CSS3选择器（选择符）示例详解

最新推荐文章于 2024-07-18 17:34:14 发布

前端呆头鹅

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量1k

点赞数

分类专栏： # CSS权威指南前端进击史：权威书籍重点知识拆解文章标签： css 关系选择器 css3 前端

本文链接：https://blog.csdn.net/weixin_45809580/article/details/114093587

版权

前端进击史：权威书籍重点知识拆解同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

CSS权威指南

2 篇文章 0 订阅

订阅专栏

前言

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行样式控制的。该文章可以使您对CSS选择器有整体的，具体的认识，您的点赞，评论，和关注是对作者的莫大鼓励。
在这里插入图片描述

一简单选择符

h1 {color: gray;} // 元素选择符 简单的一个元素名称，没有其他装饰符 就选中了所有h1元素
h1, h2 {color: gray;} // 群组选择符(,) 一个逗号 隔开几个选择器 使得每个选择器对应的元素同时被选中
.className {color: gray;} // 类选择符 类型名前面加'.' 就可选中class属性为对应名称的元素
#myID {color: gray;} // id选择符 类型前面加'#' 就可选中id属性为对应名称的元素

h1.className{color: gray;} // 选择符是可以拼接使用的 该行意为 选择类名为className的h1元素

二属性选择符

2.1 简单属性选择符

选择具有某个属性的元素，而不管属性的值是什么。

h1[class] {color: silver;} // 该行意为 选择具有class属性的h1元素 而不论其元素是什么

2.2 根据精准的属性值选择

选择属性为特定值的元素，实现的实质为进行字符串匹配，即当含有多个class的情况下，必须选择器中精准选中所有类名，顺序与空格都需完全一致。

h1[class="className1 className2"] {...} 

<h1 class="className1 className2"></h1> // 选中
<h1 class="className2 className1"></h1> // 不被选中
<h1 class="className1 className2 className3"></h1> // 不被选中

2.2 属性值模糊选中

[foo|="bar"]：选中元素具有foo属性且该属性值以bar-开头或者仅为bar。

例：<h1 foo="foo-fooName"></h1> <h1 foo="foo"></h1>

[foo~="bar"]：选中元素具有foo属性且该属性值是包含bar的一组值。

例：<h1 foo="bar aaa bbb"></h1>

[foo*="bar"]：其值包含子串bar。

例：<h1 foo="abc abarabc"></h1>

[foo^="bar"]：以其开头。

例：<h1 foo="barabc"></h1>

[foo$="bar"]：以其结尾。

例：<h1 foo="abcbar"></h1>

实践举例：可以声明“btn-small-arrow-active”类，然后使用前缀`[class|="btn"]`选中。也可使用`[class|="btn"][class*="-arrow"]`选中。

属性选择符a在匹配时是区分大小写的，我们可以通过声明的方式使匹配时忽略大小写。

例：h1[foo$="bar" i]

三根据文档结构选择

首先我们要理解DOM文档父子关系，HTML文档中的元素是一种层次结构，文档视图是树状的，文档中的元素，要么是另一个元素的父元素，要么是另一个元素的子元素，而且经常两者兼具。
在这里插入图片描述

<html>
	<head></head>
	<body></body>
</html>

如上，是html的基础结构，其中有三个元素，其中，html元素是head和body的父元素，head和body互为兄弟元素，也是html的子元素。

父子元素是祖辈元素和后代元素的特例，即两个元素的位置是直接相连的。如果两个元素直接的层级不连续，则是祖辈和后代的关系，而不是父子关系。

<html>
	<head></head>
	<body>
		<h1>该元素和html元素是祖辈关系 和body元素是父子关系</h1>
	</body>
</html>

3.1 后代选择符

样式规则：h1 em {...} // 祖辈元素+空格+后代元素

选中h1中的所有后代em元素。

<h1>
	<em></em> // 选中
	<span>
		<em></em> // 选中
	</span>
</h1>
<em></em> // 未选中

3.2 子代连结符

样式规则：h1>em {...}。 // 父元素+大于号+子元素

选中h1中的所有子代em元素。

<h1>
	<em></em> // 选中
	<span>
		<em></em> // 未选中
	</span>
	<h1>
		<em></em> // 选中
	</h1>
</h1>
<em></em> // 未选中

3.3 紧邻同胞连接符

样式规则：li+li {...}。// 兄弟元素+大于号+兄弟元素

<ul>
	<li></li> // 未选中
	<li> // 作为前一个li元素的兄弟/紧邻同胞元素选中
		<li></li> // 未选中
	</li> 
	<li></li> // 作为前一个li元素的兄弟/紧邻同胞元素选中
	<span></span>
	<li></li> // 未选中
</ul>

3.4 一般同胞连接符

样式规则：li ~li {...}。// 兄弟元素+波折号+兄弟元素

在li后的所有li,且与其处一个父元素下。符号后的元素于符号前的元素具有同一个父元素，且位置在前面的元素之后。

<ul>
	<li></li> // 未选中
	<li></li> // 选中
	<span></span>
	<li></li> // 选中
</ul>

四伪类选择符

伪类选择符又称为“幽灵类”，利用这种选择符可以为文档中不一定真实存在的结构指定样式，或者为某些元素的特定状态赋予幽灵类。

伪类选择符也是可拼接串联使用的，如a:link:hover {...}，选中所有未访问过的，鼠标悬浮其上的a标签。

伪类大多数是结构上的，例如选择表格的单行或双数行，或每隔两个的第三个段落。

伪类的格式都是冒号后面加单词的格式，可以出现在选择符的任何位置。

伪类始终指代所依附的元素，这一点可以通过下面的例子理解。

#ericmeyer: first-child // 始终指向ericmeyer 含义是ericmeyer元素同时也是其父元素的第一个子元素
#ericmeyer > : first-child // 始终指向#ericmeyer > 含义是ericmeyer元素的第一个子元素

4.1 结构伪类

:root

根元素，html中为元素

:empty

空元素，无文本节点也无子节点。

谨慎使用*:empty，因其中img与input元素会被影响。

:only-child

唯一子元素。

a[href] img:only-child {border: 2px solid black;}

<a href="http://abc/"><img src="w3.png" alt=""></a>

上例中，为选中a的后代元素img，该img为其直系父元素(可能非a元素)的唯一子后代。

如果上述a标签下还有其他非img元素，则可以使用下述选择符：

:only-of-type

该元素为其父元素的唯一本类型元素。

:first-child :last-child

该元素为其父元素的第一个/最后一个子元素，两个选择符拼接使用的效果相当于only-child。

:first-of-type :last-of-type

该元素为其父元素的第一个/最后一个本类型元素，两个选择符拼接使用的效果相当于only-of-type。

:nth-child(n)

选择该元素的父元素的第n个子元素，:nth-child(1) === :first-child。

实践举例：

偶数子代：`nth-child(2n)` `nth-child(even)`

奇数子代：`nth-child(2n+1)` `nth-child(2n-1)` `nth-child(odd)`

更复杂的情况，可使参数为an+b的方式，n是从0开始递增1的数列，如3n+1为从第一个元素开始，装饰每第三个元素。

:nth-last-child(n)：也可加相同参数，只是从后向前数。

li:nth-child(1):nth-last-child(4) ~ li：当列表中有四个li时，选中所有li。

:nth-of-type() :nth-of-last-type()：类上。

4.2 动态伪类

在页面渲染之后根据页面的变化而变化。

4.3 超链接伪类

:link：尚未访问的超链接如果一个a元素不包含href属性则不包含

:visited：已访问的超链接

出于隐私设置，:link装饰的是所有访问状态的超链接，而:visited只能设置颜色和边框颜色属性，当使用dom查询时，返回的总是未访问状态的链接样式，即无法通过样式收集用户访问了哪些链接。

4.4 用户操作伪类

:focus：当前获得输入焦点的元素。

:hover：鼠标指针放置其上的元素。

:active：由用户输入激活的元素。(按钮按下时间)

4.5 UI状态伪类

:enabled :disabled :checked :not(:checked) :default :required :optional :valid :invalid

input[required]===input:requited ，因为在元素中含有required属性时，元素的值是必须的，含义对应了required状态伪类。

input:not([required])===input:optional，因为在元素中未含有required属性时，元素的值是可选的，含义对应了optional状态伪类。

:in-range :out-of-range，值在/不在范围内的元素，范围在input元素中使用min max属性给出。

:read-write :read-only，可写元素，只读元素，未禁用的非只读input元素，以及设定了contenteditable属性(该属性使得元素可写)的元素匹配:read-write，其他所有元素匹配:read-only。

4.6 :target伪类

url中存在片段标识符，它所指向的文档片段称为目标，目标元素对应该伪类。

假如现有url为http://abc/a/#aa，其中的#aa即为片段标识符。

其中#aa对应html中一个值为aa的id，存在该id的元素为目标元素。

4.7 :not()

括号中放置简单选择符，简单选择符指没有祖辈，后代关系的选择符。

.class1:not(li)：选择类为class1的元素，但不是li元素。

li:not(.class1)：与上相反。

*:not(thead)>tr>th：选择不在表头中的表头单元格。(该选择符不一定放在末尾)

该选择符可串联，意为不是前面的也不是后面的元素。

五伪元素选择符

在文档中插入虚构的元素，伪类使用一个冒号，伪元素使用两个冒号。

伪元素只能出现在选择符的最后。一个选择符中只能有一个伪元素。

::first-letter：装饰非行内元素的首字母。

::first-line：装饰首行。

::before ::after ：在元素前或后生成内容，使用content生成，可指定样式。

p::first-letter {} // p元素的首字母被选中
p::first-line {} // p元素的段落首行被选中
p::before {
	content: "我是要生成的文本";
	color: red; // 我是其他属性
}

个冒号，伪元素使用两个冒号。

伪元素只能出现在选择符的最后。一个选择符中只能有一个伪元素。

::first-letter：装饰非行内元素的首字母。

::first-line：装饰首行。

::before ::after ：在元素前或后生成内容，使用content生成，可指定样式。

p::first-letter {} // p元素的首字母被选中
p::first-line {} // p元素的段落首行被选中
p::before {
	content: "我是要生成的文本";
	color: red; // 我是其他属性
}

前端呆头鹅

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
CSS3选择器（选择符）示例详解

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行样式控制的。该文章可以使您对CSS选择器有整体的，具体的认识。
复制链接

扫一扫