CSS/CSS3 3 选择器

484 阅读1分钟

1 类选择器 .class 例 .box 选择所有class="box"的元素

2 id择器 #id 例 #box 选择id="box"的元素

3 通配符选择器 * 例 * 选择所有的元素

4 标签选择器 div 例 div 选择所有div

div,span 选择 所有所有div和span
div span 选择div内的所有span
div>span 选择所有父级是div 的span
div+span 选择 紧接着 div后的span元素
div~span 选择div之后的每一个span元素

5 属性选择器 [target] 例 [src] 选择所有带有[src]的元素

[target="-black"] 选择所有使用[target="-black"]的元素
[target~="black"] 选择所有target属性包含black的元素(black aaa)
[target|="black"] 选择所有target属性以black开头的元素 (black-aaa)
[target^="bla"] 选择所有target属性以black开头的元素 (blackaaa)
[target$="ack"] 选择所有target属性以ack开头的元素 (black)
[target*="la"] 选择所有target属性以la开头的元素 (la)

6 a标签

a:link 未访问的样式
a:visited 访问过的样式 
a:hover 鼠标悬停的样式

7 input标签

input:focus 获取焦点的样子

8

p:before 每个p标签之后插入内容
p:after 每个p标签之前插入内容
p:first-letter 每个p标签的第一个字母
p:first-line 每个p标签的第一行
p:first-child p标签下 第一个子元素
p:lang(it) 选择lang属性起始值"it"的所有p元素