选择器的权重:
既然我们的 CSS 选择器有这么多种,那么我们怎么知道谁生效谁无效呢?那就要通过权重来计算了。CSS 选择器的权重计算遵循以下规则:
1. 选择器的权重可以相加,数值越大,权重越大,两种选择器覆盖同一属性时,权重大的选择器生效;
2. 通配符选择器的权重为 0 ;
3. 标签选择器、伪元素选择器:1;
4. 类选择器、伪类选择器、属性选择器:10,
5. id 选择器:100;
6. 内联样式:1000;
7. !important 声明的样式的权重最高;
8. 继承得到的样式的权重最低;
9. 由于 HTML 代码的执行特点时从上往下执行,因此在权重相同的情况下,后面的选择器会覆盖前面的选择器相同的属性;
10. 伪类选择器和属性选择器的权重相当于类选择器的权重,伪元素选择器的权重相当于元素选择器的权重;
11. 子代,后代和兄弟有可能是元素选择器、类选择器、id选择器,因此要根据具体情况来具体分析。
12. CSS 里面的进制并不是 10 进制,而是 256 进制,所以 10 个低级选择器并不能等于 1 个高级选择器。
13. 样式表的来源不同时,优先级顺序为:内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。
1.css选择器有哪些?
1.id选择器 ( ID 选择器以 # 开头,它选择的是文档中 id 属性的值。)
2.类选择器 (类选择器以一个句点(.)开头,它选择的是文档中应用了这个类的所有元素。)
3.标签选择器(有时也叫做 类型选择器 或者是 元素选择器,因为它在文档中选择的是 HTML 标签/元素。)
4.交集选择器(相交的部分就是要设置属性值的标签。选择器之间没有任何的连接符号(也不允许出现空格),选择器可以是标签名称,也可以是 id、class 名称。)
/*
格式:
选择器1选择器2...{
属性:值;
}
*/
/* 这会让id等于app的div标签的背景变为红色 */
div#app {
background: red
}
/* 这会让class等于app的span标签的背景变为蓝色 */
span.app {
background: blue
}
/* 这会让id等于box的p标签的背景变为绿色 */
p#box {
background: green
}
5.并集选择器 (并集选择器,选择器之间利用(,)连接,选择器可以是标签名称,也可以是 id、class 名称。)
/*
格式:
选择器1选择器2...{
属性:值;
}
*/
/* 这会让所有的class等于app的标签以及所有的p标签的背景变为红色 */
.app,p {
background: red
}
6.通配符选择器(也称为“全局选择器”,由一个星号(*)代指,它选中了文档中的所有内容或者是父元素中的所有内容。)
<style>
/* 这会让所有元素的背景变为红色 */
* {
background: red;
}
/* 这会让#app中所有元素的文字变为绿色 */
#app * {
color: green;
}
</style>
7.后代选择器(后代选择器,用单个空格( )字符组合两个选择器,匹配第祖先元素中所有的对应元素。)
<style>
/* 这会让class=box的元素里面所有后代的div标签的背景变为红色 */
.box div {
background: red;
}
</style>
8.子代选择器 (子代选择器,用单个大于号(>)组合两个选择器,只会在直接子元素中进行匹配。继承关系上更远的后代则不会匹配。)
<style>
/* 这会让class=box的元素里面相邻后代(子代)所有的div标签的背景变为红色 */
.box > div {
background: red;
}
</style>
9.兄弟选择器 (兄弟选择器,使用(~)组合两个选择器。)
但是要注意:
(1) 兄弟元素之间可以存在其他元素;
(2) 只能选择元素后面的兄弟元素。
<style>
/* 这会让span元素所有的兄弟p标签的背景变为红色 */
span ~ p {
background: red;
}
</style>
10.相邻兄弟选择器 (兄弟选择器,使用(+)组合两个选择器。
(1) 兄弟元素之间不可以存在其他元素;
(2) 只能选择元素后面的兄弟元素。
<style>
/* 这会让span元素的第一个兄弟p标签的背景变为红色 */
span + p {
background: red;
}
</style>
11.属性选择器 (顾名思义,是根据标签的属性进行选择的选择器,大概分为以下七种。)
/*1. [name],选择带有 name 属性的所有元素。*/
[name] {
background: red;
}
/*2. [name="hzw"],选择 name 属性值等于 hzw 的所有元素。*/
[name='hzw'] {
background: red;
}
/*3. [name~="hzw"],选择 name 属性包含单词 hzw 的所有元素。注意:必须是整个单词,多个单词使用空格隔开。*/
[name~='hzw'] {
background: red;
}
/*4. [name|="hzw"],选择 name 属性值以 hzw 开头的所有元素。注意:必须是整个单词或者中间有连字符的单词。*/
[name|='hzw'] {
background: red;
}
/*5. [name^="hzw"],选择其 name 属性值以 hzw 开头的所有元素。无限制。 */
[name^='hzw'] {
background: red;
}
/*6. [name$="hzw"],选择其 name 属性以 hzw 结尾的所有元素。 */
[name$='hzw'] {
background: red;
}
/*7. [name*="hzw"],选择其 name 属性值中包含 hzw 子串的所有元素。无限制。*/
[name*='hzw'] {
background: red;
}
12.伪类选择器 (伪类表示被选择元素的某种状态。)
:active 匹配用户正在激活(例如点击)元素。
:any-link 匹配一个链接的:link和:visited状态。
:blank 匹配空输入值的 input 元素。
:checked 匹配处于选中状态的单选或者复选框。
:current 匹配正在展示的元素,或者其上级元素。
:default 匹配一组相似的元素中默认的一个或者更多的 UI 元素。
:dir 基于其方向性( HTML dir 属性或者 CSS direction 属性的值)匹配一个元素。
:disabled 匹配处于关闭状态的用户界面元素。
:empty 匹配除了可能存在的空格外,没有子元素的元素。
:enabled 匹配处于开启状态的用户界面元素。
:first 匹配分页媒体的第一页。
:first-child 匹配兄弟元素中的第一个元素。
:first-of-type 匹配兄弟元素中第一个某种类型的元素。
:focus 当一个元素有焦点的时候匹配。
:focus-visible 当元素有焦点,且焦点对用户可见的时候匹配。
:focus-within 匹配有焦点的元素,以及子代元素有焦点的元素。
:future 匹配当前元素之后的元素。
:hover 当用户悬浮到一个元素之上的时候匹配。
:indeterminate 匹配未定态值的UI元素,通常为复选框。
:in-range 用一个区间匹配元素,当值处于区间之内时匹配。
:invalid 匹配诸如 input 的位于不可用状态的元素。
:lang 基于语言( HTMLlang 属性的值)匹配元素。
:last-child 匹配兄弟元素中最末的那个元素。
:last-of-type 匹配兄弟元素中最后一个某种类型的元素。
:left 在分页媒体中,匹配左手边的页。
:link 匹配未曾访问的链接。
:local-link 匹配指向和当前文档同一网站页面的链接。
:is() 匹配传入的选择器列表中的任何选择器。
:not 匹配作为值传入自身的选择器未匹配的物件。
:nth-child 匹配一列兄弟元素中的元素——兄弟元素按照 an+b 形式的式子进行匹配(比如 2n+1 匹配元素 1、3、5、7等。即所有的奇数个)。
:nth-of-type 匹配某种类型的一列兄弟元素(比如 p 元素)——兄弟元素按照 an+b 形式的式子进行匹配(比如 2n+1
匹配元素 1、3、5、7等。即所有的奇数个)。
:nth-last-child 匹配一列兄弟元素,从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配(比如 2n+1
匹配按照顺序来的最后一个元素,然后往前两个,再往前两个,诸如此类。从后往前数的所有奇数个)。
:nth-last-of-type 匹配某种类型的一列兄弟元素(比如 p 元素),从后往前倒数。兄弟元素按照 an+b
形式的式子进行匹配(比如 2n+1 匹配按照顺序来的最后一个元素,然后往前两个,再往前两个,诸如此类。从后往前数的所有奇数个)。
:only-child 匹配没有兄弟元素的元素。
:only-of-type 匹配兄弟元素中某类型仅有的元素。
:optional 匹配不是必填的 form 元素。
:out-of-range 按区间匹配元素,当值不在区间内的的时候匹配。
:past 匹配当前元素之前的元素。
:placeholder-shown 匹配显示占位文字的input元素。
:playing 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的,且正在“播放”的元素。
:paused 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的,且正在“暂停”的元素。
:read-only 匹配用户不可更改的元素。
:read-write 匹配用户可更改的元素。
:required 匹配必填的 form 元素。
:right 在分页媒体中,匹配右手边的页。
:root 匹配文档的根元素。
:scope 匹配任何为参考点元素的的元素。
:valid 匹配诸如 input 元素的处于可用状态的元素。
:target 匹配当前 URL 目标的元素(例如如果它有一个匹配当前 URL 分段的元素)。
:visited 匹配已访问链接。
13.伪元素选择器 (伪元素表示的是被选择元素的某个部分,但是是只存在于 CSS 中的"假元素",不出现在 HTML 中,所以叫"伪"元素。)
::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter 匹配元素的第一个字母。
::first-line 匹配包含此伪元素的元素的第一行。
::grammar-error 匹配文档中包含了浏览器标记的语法错误的那部分。
::selection 匹配文档中被选择的那部分。
::spelling-error 匹配文档中包含了浏览器标记的拼写错误的那部分。
w3school:https://www.w3school.com.cn/cssref/css_selectors.asp