【CSS】选择器汇总

文章目录

一、选择器权重
二、基础选择器
- 2.1、通配符（*）
- 2.2、标签选择器（h1）
- 2.3、 id选择器（#）
- 2.4、class选择器（.）
三、层级选择器
- 3.1、群组选择器（E,F）
- 3.1、包含选择器（E F）
- 3.1、子元素选择器（E>F）
- 3.1、相邻兄弟选择器（E+F）
- 3.1、通用选择器（E~F）
三、属性选择器
- 3.1、 [attribute]选择器
- 3.2、 [attribute=value]选择器
- 3.3、 [attribute~=value]选择器
- 3.4、 [attribute|=value]选择器
- 3.5、 [attribute^=value]选择器
- 3.6、 [attribute$=value]选择器
- 3.7、 [attribute*=value]选择器
四、伪类选择器（:）
- 4.1、动态伪类选择器
- 4.2、结构伪类选择器
- 4.3、其他伪类选择器
五、伪元素选择器（::）

一、选择器权重

选择器的定义：选择器表示要定义样式的对象，可以是元素本身，也可以是一类元素或者制定名称的元素。

css中用四位数字表示样式权重，权重的表达方式如：0，0，0，0元素
注意：如果权重相同，则执行后写的样式

选择器	权重
内联样式	1000
id选择器	0100
class选择器	0010
属性选择器	0010
伪类选择器	0010
标签选择器	0001
伪元素选择器	0001
子选择器	0000
通配符	0000
相邻选择器	0000
包含选择器	所包含选择符的权重之和
继承样式	没有权重

当不同选择器的样式设置有冲突的时候，高权重选择器会覆盖低权重选择器的样式

b .demo的权重是1+10=11
.demo的权重为10
/* 所以经常会发生.demo的权重的样式失效 */

!important 代表着最高权重(最终样式)，慎用

background-color: red !important;

相同权重的选择器，样式遵循就近原则：那个选择符最后定义，就采用哪个选择符的样式。
注意：是css样式中定义该选择符的先后，而不是html中使用先后

二、基础选择器

2.1、通配符（*）

语法：* {属性：属性值；}

说明：
代表了所有元素，常用来重置样式
实例：

*{margin:0; padding:0;}

2.2、标签选择器（h1）

语法：元素名称{属性：属性值；}

说明：

元素选择器就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。
所有的页面元素都可以作为选择符
类型选择器是直接根据html语言中的标记来直接定义的

实例：

p{ color:red; }

2.3、 id选择器（#）

语法：#id名{属性：属性值；}

说明：

当我们使用id选择器时，应该为每个元素定义一个id属性；

<div id="top"></div>

id选择器的语法格式是“#”加上自定义的id名：

#box{width:100px; height:100px;}

起名时要取英文名，不能用关键字（所有标签和属性都是关键字）
一个id名称只能对应文档中一个具体的元素对象，因为id只能定义页面中某一个唯一的元素对象。
最大的用途：创建网页的外围结构

2.4、class选择器（.）

语法：.class名{属性：属性值；}

说明：
当我们使用类选择器时，应该为每个元素定义一个类名称。class选择器更适合定义一类样式。
实例：

<div class="top"></div>

三、层级选择器

3.1、群组选择器（E,F）

语法：选择符1，选择符2，…{属性：属性值；}

说明：
当有多个选择符应用相同的样式时，可以用“，”分割的方式，合并为一组。
实例：

p,.top,#nav{width:100px;}

3.1、包含选择器（E F）

语法：选择符1(父) 选择符2(子){属性：属性值；}

说明：
选择符1和选择符2用空格隔开，表示选择选择符1中所包含的所有2选择符
实例：使div1下的所以子元素p标签的字体颜色变红

<style type="text/css">.div1 p{color: red;}.div1{border: 6px solid green;}.div2{border: 6px solid yellow;}
</style>
<div class="div1"><h2>我是标题1</h2><p>我是段落1</p><p>我是段落2</p><div class="div2"><h2>我是标题2</h2><p>我是段落3</p><p>我是段落4</p></div>
</div>

运行结果：

3.1、子元素选择器（E>F）

语法：选择符1(父)>选择符2(子){属性：属性值；}

说明：选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素。用于选择特定父元素。

实例：使div1下的子元素p标签的字体颜色变红

<style type="text/css">.div1>p{color: red;}.div1{border: 6px solid green;}.div2{border: 6px solid yellow;}
</style>
<div class="div1"><h2>我是标题1</h2><p>我是段落1</p><p>我是段落2</p><div class="div2"><h2>我是标题2</h2><p>我是段落3</p><p>我是段落4</p></div>
</div>

运行结果：

3.1、相邻兄弟选择器（E+F）

语法：选择符1+选择符2{属性：属性值；}

说明：选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面。用于选择（不是内部）指定的第一个元素之后紧跟的元素。
*
实例：使紧挨着h2标签的p标签的字体颜色变红

<style type="text/css">h2+p{color: red;}.div1{border: 6px solid green;}.div2{border: 6px solid yellow;}
</style>
<div class="div1"><h2>我是标题1</h2><p>我是段落1</p><p>我是段落2</p><div class="div2"><h2>我是标题2</h2><p>我是段落3</p><p>我是段落4</p></div>
</div>

运行结果：

3.1、通用选择器（E~F）

语法：选择符1~ 选择符2{属性：属性值；}

说明：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素。这两种元素必须具有相同的父元素，但 element2 不必紧跟在 element1 的后面。
*
实例：使div1下h2标签后的所有p标签的字体颜色变红

<style type="text/css">.div1 h2~p{color: red;}.div1{border: 6px solid green;}.div2{border: 6px solid yellow;}
</style>
<div class="div1"><h2>我是标题1</h2><p>我是段落1</p><p>我是段落2</p><div class="div2"><h2>我是标题2</h2><p>我是段落3</p><p>我是段落4</p></div>
</div>

运行结果：

三、属性选择器

3.1、 [attribute]选择器

语法：选择符 [ 属性名 ]

描述：用于选取带有指定属性的元素。
实例：

<style type="text/css">[id]{color: red;}/* 选择所有拥有该属性的标签 */p[class]{color: green;}/* 选择p标签内拥有该属性的p标签 */
</style>
<h3 id="cab">111</h3>
<p id="abc">222</p>
<p class="abc">333</p>
<p class="adb">444</p>
<p class="bdc">555</p>

运行结果：

3.2、 [attribute=value]选择器

语法：选择符 [ 属性名=属性值 ]

描述：用于选取带有指定属性和值的元素。
实例：

<style type="text/css">[id=abc]{color: red;}
</style>
<h3 id="cab">111</h3>
<p id="abc">222</p>
<p class="abc">333</p>
<p class="adb">444</p>
<p class="bdc">555</p>

运行结果：

3.3、 [attribute~=value]选择器

语法：选择符 [ 属性名~=属性值 ]

描述：用于选取属性值中包含指定词汇的元素。该值必须是整个单词，必须以空格隔开。
实例：

<style type="text/css">p[class~=abc]{color: red;}
</style>
<h3 id="cab">111</h3>
<p id="abc">222</p>
<p class="abc">333</p>
<p class="adb abc">444</p>
<p class="bdc">555</p>

运行结果：

3.4、 [attribute|=value]选择器

语法：选择符 [ 属性名|=属性值 ]

描述：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词，必须以“-”隔开。
实例：

<style type="text/css">p[class|=adb]{color: red;}
</style>
<h3 id="cab">111</h3>
<p id="abc">222</p>
<p class="abc adb">333</p>
<p class="adb-abc">444</p>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201231150202682.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Njc3Njcx,size_16,color_FFFFFF,t_70)
<p class="bdc">555</p>

运行结果：

3.5、 [attribute^=value]选择器

语法：选择符 [ 属性名^=属性值 ]

描述：匹配属性值以指定值开头的每个元素。
实例：

<style type="text/css">p[class^=a]{color: red;}
</style>
<h3 id="cab">111</h3>
<p id="abc">222</p>
<p class="abc">333</p>
<p class="adb">444</p>
<p class="bdc">555</p>

运行结果：

3.6、 [attribute$=value]选择器

语法：选择符 [ 属性名$=属性值 ]

描述：匹配属性值以指定值结尾的每个元素。
实例：

<style type="text/css">p[class$=c]{color: red;}
</style>
<h3 id="cab">111</h3>
<p id="abc">222</p>
<p class="abc">333</p>
<p class="adb">444</p>
<p class="bdc">555</p>

运行结果：

3.7、 [attribute*=value]选择器

语法：选择符 [ 属性名*=属性值 ]

描述：匹配属性值中包含指定值的每个元素。
实例：

<style type="text/css">p[class*=d]{color: red;}
</style>
<h3 id="cab">111</h3>
<p id="abc">222</p>
<p class="abc">333</p>
<p class="adb">444</p>
<p class="bdc">555</p>

运行结果：

四、伪类选择器（:）

简介：CSS 伪类用于向某些选择器添加特殊的效果。
伪类选择器不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

4.1、动态伪类选择器

E:link（链接伪类选择器）：定义E元素，未访问的链接状态。
E:visited（链接伪类选择器）：定义E元素，已访问的链接状态。
E:active（用户行为选择器）：定义E元素，鼠标点击未抬起时的状态。
E:hover （用户行为选择器）：定义E元素，鼠标悬停在上面时的状态。
E:focus （用户行为选择器）：定义E元素，鼠标点击了抬起后的状态。

说明：
1）当前4个超链接伪类选择器联合使用时，应注意他们的顺序，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的，a:active 必须被置于 a:hover 之后，才是有效的。。错误的顺序有时会使超链接的样式失效

a:link{color:red;}       /* 未访问的链接状态 */
a:visited{color:green;} /* 以访问的链接状态 */
a:hover{color:blue;}    /*鼠标滑过链接状态*/
a:active{color:yellow;} /*鼠标按下去时状态*/

2）为了简化代码，可以把伪类选择器中相同的声明提出来放在a选择符中；使用hover属性来设置样式。

a:hover{color:green;}
/*表示超链接的三种状态都相同，只有鼠标滑过变换颜色*/

4.2、结构伪类选择器

语法	选择	描述
E:fisrt-child	作为父元素的第一个子元素的元素E	与E:nth-child(1)等同
E:last-child	作为父元素的最后一个子元素的元素E	与E:nth-last-child(1)等同
E:root	选择匹配元素E所在文档的根元素。	在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
`E F:nth-child(n)`	选择父元素E的第n个子元素F。	其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n)	选择父元素E的倒数第n个子元素F。	此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
`E:nth-of-type(n)`	选择父元素内具有指定类型的第n个E元素	p:nth-of-type(2) 选择所有p元素第二个为p的子元素
E:nth-last-of-type(n)	选择父元素内具有指定类型的倒数第n个E元素	p:nth-of-type(2) 选择所有p元素倒数的第二个为p的子元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素	与E:nth-of-type(1)等同
E:last-of-tye	选择父元素内具有指定类型的最后一个E元素	与E:nth-last-of-type(1)等同
E:only-child	选择父元素只包含一个子元素，且该子元素匹配E元素	选择仅有一个子元素的E元素
E:only-of-type	选择父元素只包含一个同类型子元素，且该子元素匹配E元素	选择仅有一个子元素为E的元素
E:empty	选择没有子元素的元素	而且该元素也不包含任何文本节点

注意：
结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。

4.3、其他伪类选择器

语法	类型	描述
E: target	目标伪类选择器	选择匹配E的所有元素，且匹配元素被相关URL指向。
E: lang(language)	语言伪类选择器	用来匹配使用指定语言的元素
E: not(F)	否定伪类选择器	匹配所有除F外的E元素
E: checked	元素状态伪类选择器	匹配所有用户界面（form表单）中处于选中状态的元素
E: enabled	元素状态伪类选择器	匹配所有用户界面（form表单）中处于可用状态的元素
E: disabled	元素状态伪类选择器	匹配所有用户界面（form表单）中处于不可用状态的元素

五、伪元素选择器（::）

简介：CSS 伪元素用于将特殊的效果添加到某些选择器。
伪元素的效果是需要通过添加一个实际的元素才能达到的。可能会改变dom结构，创建虚拟dom。

语法	描述
`E::after`	在E元素之后添加内容，常用"content"配合使用
`E::before`	在E元素之前添加内容，常用"content"配合使用
E::first-letter	向文本的第一个字母添加特殊样式。
E::first-line	向文本的首行添加特殊样式。
E::selection	给被用户选中或处于高亮状态的部分的E元素添加特殊样式。