1. 属性选择器
- 1.基本元素[属性]
例: <p title:"qiuqiu">p1</p>
p[title]
- 2.基本元素[属性 = 值] (属性只有一个值)
例: <p title:"qiuqiu1">p1</p>
<p title:"qiuqiu2">p1</p>
p[title = qiuqiu2]
- 3.基本元素[属性 ~= 值] (属性有多个值,空格隔开)
例: <p title:"qiuqiu1 abc">p1</p>
<p title:"qiuqiu2">p1</p>
p[title ~= qiuqiu1 abc]
- 4.基本元素[属性 ^= 值] (属性以特定值开始)
例: <p title:“test1”>p1
<p title:“test2”>p1
p[title ^= test] - 5.基本元素[属性 $= 值] (属性以特定值结束)
例: <p title:“test1 abc”>p1
<p title:“test2 acb”>p1
p[title $= bc]
2. 伪类选择器
- 1.irst-child
[例:p:first-child] 选择器用于选取属于其父元素[p]的首个子元素的指定选择器
- 2.last-child
[例:p:last-child] 选择器用于选取属于其父元素[p]的最后个子元素的指定选择器
- 3.nth-child(n)
[例:p:nth-child(n)] 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。
- 4.nth-of-type(n)
[例:p:nth-of-type(n)] 选择器匹配同类型中的第n个同级兄弟元素。n可以是一个数字,一个关键字,或者一个公式。
-
补充:a元素
a:link {color: #FF0000} //未访问的链接 a:visited {color: #00FF00} // 已访问的链接 a:hover {color: #FF00FF} // 当有鼠标悬停在链接上 a:active {color: #0000FF} // 被选择的链接鼠标按下
3.伪元素选择器
- 1.before
[例:P:before] 在子元素的最前面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容,
但是通常为空字符串
- 2.after
[例:P:after] 在子元素的最后面, 添加一个伪元素, 伪元素内容通过 content 控制,可以在content属性中写入文本内容,
但是通常为空字符串
- 3.first-letter
[例:P:first-letter] 伪元素向文本的第一个字母添加特殊样式
- 4.first-line
[例:P:first-line] 伪元素向文本的第一行文本添加特殊样式
- 5.selection
[例:p::selection] ::selection选择器匹配元素中被用户选中或处于高亮状态的文本部分。