【CSS】选择器汇总_css 点选择器

一、选择器权重

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

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

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

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

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

background-color: red !important;
1

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

二、基础选择器

2.1、通配符（*）

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

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

*{margin:0; padding:0;}
1

2.2、标签选择器（h1）

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

说明：

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

实例 ：

p{ color:red; }
1

2.3、 id选择器（#）

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

说明：

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

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

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

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

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

2.4、class选择器（.）

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

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

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

三、层级选择器

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

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

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

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行结果：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行结果：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行结果：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行结果：

三、 属性选择器

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>
1
2
3
4
5
6
7
8
9
10
11

运行结果：

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>
1
2
3
4
5
6
7
8

运行结果：

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>
1
2
3
4
5
6
7
8

运行结果：

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>
1
2
3
4
5
6
7
8
9

运行结果：

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>
1
2
3
4
5
6
7
8

运行结果：

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>
1
2
3
4
5
6
7
8

运行结果：

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>
1
2
3
4
5
6
7
8

运行结果：

四、伪类选择器（:）

简介：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;}	/*鼠标按下去时状态*/
1
2
3
4

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

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

4.2、结构伪类选择器

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

4.3、其他伪类选择器

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

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