css属性选择器怎么用(前端css属性选择器详解值得收藏)

Joker • • 前端笔记 • 253 阅读

前端CSS选择器（Selector）是用于实现网页页面定义的基础，选择器的主要作用在于确定指定的单个元素或者一类元素。在获取元素之后即可以对所获取的元素进行样式的定义。最终为用户呈现不同交互视觉风格的前端页面。本文主要对常用CSS选择器基本概念与常用css属性选择器进行说明与实例展示。

一、CSS Selector类型划分

按照W3C技术规范划分目前CSS Selector主要类型可以划分为基本选择器、关系选择器、伪选择器三种类型不同的选择器。目前主要CSS选择器类型及分类描述如下图所示：

CSS Selector分类图

CSS Selector选择器主要分类描述如上图，其中我们较为常用的选择器主要包括基本选择器、关系选择器及伪选择器中的部分类型。总之，一句话概括的话：选择器的作用就是从HTML文档中找出需要设置样式的一个或者多个HTML元素。

二、css基本常用选择器

本文中我们选取部分常用选择器对其语法进行简单说明，并通过实例进行应用说明与展示。

（一）基本选择器

基本选择器中元素选择器、类选择器与ID选择器是较为常用选择器，也是大部分教材中详细介绍过的选择器类型。常用基本选择器描述如下图：

基本选择器中常用类型说明

三、css属性选择器

在基本选择器中以上4类为常用选择器，除此之外初学者使用较少但非常重要的选择器为属性选择器。属性选择器主要根据元素的属性确定选择元素并进行样式的设置。属性选择器主要类型包括7种不同类型选择器，描述如下图所示：

CSS 属性选择器

CSS属性选择器常用的其中方法描述如上图所示，通过属性值的选择方式确定选中的元素，进而实现元素样式的设置。属性选择器说明如下：

常用属性选择器说明

以下我们通过实例进行说明，HTML代码描述如下：

示例代码

我们在页面中添加6个不同层，并设置其基本样式，如上图所示，通过使用属性选择器实现样式的改变。原始页面效果如下图：

原始页面效果

1、[attr]选择器

该选择器主要根据属性名称确定选中的标记，并对其进行设置。我们将示例文件中的前三个div设置ID属性并以此为选择条件进行DIV样式修改。代码部分如下：

1
2
3

编写选择器如下：

[id]{background-color: red;}

通过该选择器的使用可以准确找到需要设置样式的元素。最终实现效果如下图所示：

[attr]选择器

2、[attr=value]选择器

以第一种选择器相比较除属性名称之外还需要满足取值等于value。如我们需要将上例中id值为2的DIV进行样式设置，则可直接编写选择器：

[attr="2"]{background-color:red;}

通过value值对attr属性进行筛选，最终找到符合条件的DIV实现背景颜色变化。测试效果如下：

[attr=value] 选择器

3、[attr~=value]选择器

该选择器可以选择对应属性attr的值为列表形式，且值列表中包含value值。如我们在定义样式中对于多个类选择器的使用一般写法如下：

4