基本选择器
id 选择器 - - - #id {} - - - 唯一标识,只能有一个。尽量少用 id 选择器,影响权重
类名选择器 - - - .class {} - - - class 类名,可以有多个,可以重复使用
标签选择器 - - - tagName {}
通配符选择器 - - - * {}
属性选择器
存在选择器 - - - [attr] {}
相等选择器 - - - [attr="value"] {}
前缀选择器 - - - [attr^="str"] {} - - - 选中所有属性 attr 里面以字符串 str 开头的元素
后缀选择器 - - - [attr$="str"] {}
子串选择器 - - - [attr*="str"] {} - - - 选中所有属性 attr 里面包含字符串 str 的元素
包含选择器 - - - [attr~="word"] {} - - - 选中所有属性 attr 里面包含单词 word 的元素
并列选择器
Selector1Selector2 - - - eg: p[class^="head"]、div.className、ul#wrap…
选择器组合
选择多个元素 - - - selector1, selector2 {}
选择后代 - - - selector1 selector2 {}
选择子元素 - - - selector1 > selector2 {}
选择兄弟元素 - - - selector1 ~ selector2 {}
选择相邻兄弟元素 - - - selector1 + selector2 {}
组合选择器的 selector1 必须在 selector2 前面,因为 CSS 样式是从上往下渲染的
selector 可以是任意一种选择器
伪类选择器
普通伪类选择器
selector:hover {} - - - 当鼠标悬停在当前元素上方时触发
selector:active {} - - - 当鼠标点击当前元素时触发
selector1:not(selector2) {} - - - 反选; eg:li:not([class^="super"])
selector:checked {} - - - 当前元素被勾选时触发 - - - 一般配合单选框、复选框使用
selector:focus {} - - - 光标在当前元素上聚焦时触发 - - - 一般配合文本框使用
selector:focus-within {} - - - 光标在当前元素或其后代上聚焦时触发
selector:link {} - - - 作用于未被访问过的超链接
selector:visited {} - - - 作用于被访问过的超链接
对于超链接,伪类必须按 link,visited - hover - active 的顺序设置。当然,不需要设置的可以不写
结构性伪类选择器
selector:nth-child(n) {} - - - 所有兄弟元素中的第 n 个(如果被选中的元素不满足选择器的条件,则不生效)
selector:nth-of-type(n) {} - - - 所有兄弟元素中、满足选择器 selector 的第 n 个(就是说,一定会生效)
selector:nth-last-child(n) {} - - - 所有兄弟元素中的倒数第 n 个
selector:nth-last-of-type(n) {} - - - 所有兄弟元素中、满足选择器 selector 的倒数第 n 个
selector:first-child {} - - - 所有兄弟元素中的第 1 个
selector:first-of-type {} - - - 所有兄弟元素中、满足选择器 selector 的第 1 个
selector:last-child {} - - - 所有兄弟元素中的最后 1 个
selector:last-of-type {} - - - 所有兄弟元素中、满足选择器 selector 的最后 1 个
selector:nth-child(even) {} - - - 所有兄弟元素中,序号为偶数的兄弟(如果被选中的元素不满足选择器的条件,则不生效)
selector:nth-child(2n) {}
selector:nth-child(odd) {} - - - 所有兄弟元素中,序号为奇数的兄弟(如果被选中的元素不满足选择器的条件,则不生效)
selector:nth-child(2n + 1) {}
区分 nth-child(n) & nth-of-type(n):简而言之,nth-of-type() 的计算条件比较苛刻
无论是否满足选择器的条件,nth-child(n) 都会计算。只是 不满足条件的元素,不会生效选择器的样式
而 nth-of-type(n) 只会计算满足选择器条件的元素。所以 被选中的元素,一定会生效选择器的样式
p:nth-of-type(2n+1) { /* 奇数段 */
color: blue;
font-weight: 700;
}
p:nth-child(2n+1) { /* 奇数段 */
background: lightpink;
}
1
2
3
4
5
6
7
8
<div> 这段不参与 nth-of-type 的计数、却是 nth-child 的第一段 </div>
<p> nth-of-type 的第一段、nth-child 的第二段 </p>
<p> nth-of-type 的第二段、nth-child 的第三段 </p>
<div> 这段不参与 nth-of-type 的计数、却是 nth-child 的第四段 </div>
<p> nth-of-type 的第三段、nth-child 的第五段 </p>
<p> nth-of-type 的第四段、nth-child 的第六段 </p>
1
2
3
4
5
6
伪元素选择器
selector::after { content: " " } - - - 用来创建一个伪元素,作为已选中元素的最后一个子元素
selector::before { content: " " } - - - 用来创建一个伪元素,作为已选中元素的第一个子元素
需要设置 content 属性,属性值为该元素的内容
即使该元素不需要内容,也要设置 content 属性,此时属性值为空字符串 ""
伪元素默认是行内元素 display: inline
一个选择器中只能使用一个伪元素(img::after::before ×)
其他伪元素选择器
::selection:鼠标选中内容发生改变,目前支持字体颜色和背景色
::first-letter:用于向某元素的第一个英文字母或第一个汉字添加样式
::first-line:用于向某个元素的第一行添加样式
::placeholder:作用于文本框内的提示符
选择器的权重 (面试考点)
选择器权重,也叫 CSS Specifity
id #id - - - 100
属性 [attr]、伪类 :hover、类名 .class - - - 10
标签 div、伪元素 ::after - - - 1
通配符 *、组合 + ~ >、否定伪类 :not() - - - 0
同一行的选择器权重值相加,权重值较高的样式会覆盖权重值较低的样式
如果权重值相同,则看样式编写的方式:行间样式 > 内联样式 > 外联样式
如果样式编写的方式也一样,则看样式编写的位置:下面的 > 上面的
权重值是 256 进制的,不是 10 进制的,不是 10 进制的,不是 10 进制的
!important 修饰的样式,权重为 infinity (无穷大)
p {
background: #ccc !important;
}
————————————————
版权声明:本文为CSDN博主「Superman_H」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Superman_H/article/details/108232294
联系客服