CSS选择器及其优先级

最新推荐文章于 2024-06-16 17:29:19 发布

good_moring_

最新推荐文章于 2024-06-16 17:29:19 发布

阅读量246

点赞数

分类专栏：炫酷的CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/good_moring_/article/details/111044731

版权

炫酷的CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

选择器的种类

基础选择器

标签选择器 (tagName)

body { 
	width: 100%;
	background: pink;
}

类选择器 (.)

.class { 
	width: 100%;
	background: pink;
}

ID选择器 (#)

#id { 
	width: 100%;
	background: pink;
}

通配选择器 (*)

在CSS3中,星号(*)可以和命名空间组合使用:
ns| * - 会匹配ns命名空间下的所有元素
* | * - 会匹配所有命名空间下的所有元素
| * - 会匹配所有没有命名空间的元素
属性选择器 ([])

属性选择器通过已经存在的属性名或属性值匹配元素

语法:
[attr]
表示带有以 attr 命名的属性的元素。
[attr=value]
表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
[attr^=value]
表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
[attr$=value]
表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
[attr=value]*
表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。
[attr operator value i]
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
[attr operator value s]
在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}
/* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}

/* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

/* 包含 "insensitive" 的链接,不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 包含 "cAsE" 的链接，区分大小写 */ 
a[href*="cAsE" s] { 
  color: pink; 
}

组选择器（选择器列表）

span, 
div {
  border: red 2px solid;
}

选择器列表无效化：
在选择器列表中，如果有一个选择器不被支持，那么整条规则就会失效。这种情况下可以使用:is()，但是会影响整个选择器列表的优先级。

关系选择器

后代元素选择器 ( A B)

/* p可能是div的子孙重孙等等 */
div p {
	color: red;
}

直接子元素选择器 (A > B)

/* p肯定是div的儿子 */
div > p {
	color: red;
}

兄弟元素选择器 (A ~ B)

/* img后面所有同级的p将被选中 */
img ~ p{
	background: grey;
}

邻近兄弟元素选择器 (A + B)

/* img后面紧跟着的p将被选中 */
img + p {
  font-style: bold;
}

伪选择器

伪类 ( : )
为选择的元素的特殊状态应用样式

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

伪元素 ( :: )
可被用于为一个元素的特定部分应用样式

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

选择器优先级

一个选择器的优先级由四位数组成

千位：内联样式，即声明在style的属性，1000
百位：ID选择器，0100
十位：类选择器、属性选择器、伪类，0010
个位：元素、伪元素选择器，0001

在计算时不进位，即使一百个十位也比不了一个百位，级别碾压。

通用选择器 (*)，组合符 (+, >, ~, ’ ')，和否定伪类 (:not) 不会影响优先级。

看下图：
在这里插入图片描述
h1 + p::first-letter的选择器权重：

选择器	选择器类型	权重
h1	标签选择器	0001
p	标签选择器	0001
::first-letter	伪元素选择器	0001
	合计	0003

li > a[href*="en-US"] > .inline-warning的选择器权重：

选择器	选择器类型	权重
li	标签选择器	0001
a	标签选择器	0001
[href*=“en-US”]	属性选择器	0010
.inline-warning	类选择器	0010
	合计	0022

其他优先级规则：

最近的祖先样式比其他祖先样式优先级高
直接样式比祖先样式优先级高
!important优先级最高
多类选择器<div class="blue red">xxx</div>中的顺序无关紧要，不牵扯优先级顺序(也可以写成red blue都不影响样式)
一个元素应用多个class样式，后定义的优先，如.red { color: red} .blue{ color: blue}，若应用了red、blue两种样式，则会展示blue定义的样式

一个栗子

下面这个例子中的111、222分明是什么颜色，你答对了吗？

<style>
	.red { color: red;}
	.blue { color: blue;}
</style>

<body>
	<div class="red blue">111</div>
	<div class="blue red">222</div>
</body>

答案在此，看下图：
在这里插入图片描述

good_moring_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器及其优先级

选择器的种类基础选择器标签选择器 (tagName)body { width: 100%; background: pink;}类选择器 (.).class { width: 100%; background: pink;}ID选择器 (#)#id { width: 100%; background: pink;}通配选择器 (*)在CSS3中,星号(*)可以和命名空间组合使用:ns| * - 会匹配ns命名空间下的所有元素* | *
复制链接

扫一扫

专栏目录