CSS3 选择器详解

阳光穿透心脏的1/2处 2022-05-20 00:42 166阅读 0赞

## 一、CSS样式的基本规则 ##

（1）链接外部样式文件：这种方式将样式文件彻底与HTML，样式文件需要额外的引入。在这种方式下，一批样式可以控制多分文档。

（2）导入外部样式文件：这种方式与上一种方式一样。只是表达方式不一样。

（3）使用内部样式文件：通过在HTML文档头定义样式单部分来实现的，每批CSS只控制一份文档。

（4）使用行内样式化：这种方式将样式行内定义到具体的HTML元素，通常用于精确控制一个HTML元素的表现。每份CSS只控制单个HTML元素，这样回很麻烦，维护起来很不方便，我们建议使用第一种方式。

（5）优先级：行内样式 > 内部样式 >  链接外部样式（导入外部样式）

## 二、CSS选择器 ##

我们可以通过各种选择器来选择到相应的元素标签，然后来进行相应的操作。选择器大致分为以下几种

### 1. 元素选择器 ###

>  可以通过元素名来找到元素标签进行操作，例如：

E {..........} 其中E代表有效的HTML元素名 具体实例如下： html{     margin: 0;     padding: 0;     font-family: "微软雅黑";     font-size: 60px;     background-color: paleturquoise; }

### 2. 属性选择器 ###

从广义角度看，元素选择器就是特殊的属性选择器，属性选择器一般有以几种语法格式：

（1）E\{.......\} ：指定该CSS样式对所有的E元素起作用

（2）E\[attr\]  \{......\}：指定该CSS样式对具有attr属性的E元素起作用

（3）E\[attr = value\] \{......\}：指定该CSS样式对所有包含attr属性，且attr属性为value的E元素起作用。

（4）E\[attr ~= value\] \{......\}：指定该CSS样式对所有包含attr属性，且attr属性为以空格隔开的系列值，其中某个值为value的E元素起作用。

（5）E\[attr |= value\] \{......\}：指定该CSS样式对所有包含attr属性，且attr属性为以连字符隔开的系列值，其中第一个值为value的Tag元素起作用。

（6）E\[attr ^= value\] \{......\}：指定该CSS样式对所有包含attr属性，且attr属性为以value开头的字符串的E元素起作用。

（7）E\[attr $= value\] \{......\}：指定该CSS样式对所有包含attr属性，且attr属性为以value结尾的字符串的E元素起作用。

（8）E\[attr \*= value\] \{......\}：指定该CSS样式对所有包含attr属性，且attr属性为为包含value的字符串的E元素起作用。

其中比较常使用的是前三个，第一个我们已经实现过，我们实现下两个选择器：例如：

img[alt]{     width: 50px;     height: 50px; } img[alt = "111"]{     width: 50px;     height: 50px; }

### 3. ID选择器 ###

ID选择器指定CSS样式将会对具有指定id属性值的HTML元诉求作用。ID选择器的语法格式如下：

#idValue {......} 实例如下： #box2 {     width: 50px;     height: 50px;     background-color: peru; }

### 4. Class选择器 ###

Class选择器指定CSS样式对具有指定class属性的元素起作用。Class选择器的语法格式如下：

[E]. classVuale {......} /*其中E是有效的HTML元素*/ .box_class{     width: 50px;     height: 50px;     background-color: palegreen; }

### 5. 子选择器 ###

子选择器用于制定目标选择器必须是某个选择器对应的子元素的子元素。子选择器的格式如下：

Selector1 > Selector2{......} /*其中Selector1和Selector2都是有效的选择器 ul li {     font-size: 100px;     color: red; }

### 6. 包含选择器 ###

包含选择器用于制定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下：

Selector1 Selector2{......} /*其中Selector1和Selector2都是有效的选择器 ul li {     font-size: 100px;     color: red; }

### 7. CSS3新增的兄弟选择器 ###

兄弟选择器是CSS 3.0新增的一个选择器。兄弟选择器的语法如下：

Selector1 ~ Selector2{......} /*其中Selector1和Selector2都是有效的选择器 .box_brother_1 ~ .box_brother_4 {     font-size: 100px;     color: red; }

### 8. 伪元素选择器 ###

为元素选择器不是针对真正的元素使用的选择器，伪元素选择器只能在行业内对CSS中已有的伪元素起作用

CSS提供的伪元素选择器有如下几个：

:first-letter : 该选择器对应的CSS样式对指定对象内的第一个字符起作用

:first-line : 该选择器对应的CSS样式对指定对象内的第一行内容起作用

:before : 该选择器与内容相关的属性结合起来使用，用于在指定的对象内部的前端插入内容。

:after :该选择器与内容相关的属性结合起来使用，用于在指定的对象内部的尾端插入内容。

注意：冒号前后不能加空格

.box_false:first-letter{     font-weight: 900; } .box_false:first-line{     font-weight: 900; } .box_false:before{     content: DCF;     font-weight: 900; } .box_false:after{     content: DCF;     font-weight: 900; }

### 9. CSS3新增的伪类选择器 ###

#### 9.1 结构性伪类选择器 ####

Selector : first-child : 匹配符合Selector选择器，而且必须是其父元素的第一个子节点的元素

Selector : last-child :匹配符合Selector选择器，而且必须是其父元素的最后一个子节点的元素

Selector : nth-child(n) : 匹配符合Selector选择器，而且必须时期父元素的第n个字节：odd是奇数   even 是偶数

li:first-child {     color: magenta; } li:last-child {     color: magenta; } li:nth-child(even) {     color: magenta; } li:nth-child(odd) {     color: magenta; }

#### 9.2 UI元素状态伪类选择器 ####

UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选。常用的UI元素状态伪类选择器有如下几个：

（1）Selector : link : 匹配Selector 选择器且未被访问前的元素（通常只能是超链接）

（2）Selector : visite : 匹配Selector 选择器且已被访问过的元素（通常只能是超链接

（3）Selector : active : 匹配Selector 选择器且处于被用户激活（通常只能是超链接

（4）Selector : hover : 匹配Selector 选择器且处于鼠标悬停状态的元素

（5）Selector : focus : 匹配Selector 选择器且且已得到焦点的元素

li:hover {     color: magenta; }