CSS选择器

更多内容，欢迎关注微信公众号“让知识成为资产”

1.通配选择器

作用
可以修饰页面上的任何元素
语法
*{ 样式声明 }
示例
*{ color: red; }
div * p {color: blue; }

2.元素选择器

作用
设置页面上某类元素的样式
语法
element1 { 样式声明 }
示例
body { background: #FFF; }
p { font-size: 14px; }

3.ID选择器

作用
设置指定ID元素的样式
语法
id值 { 样式声明 }
示例
h1 #title { font-size: 250%; }
body #home { background: silver; }

4.类选择器

作用
设置页面上某个或某些元素的样式
语法
.classname { 样式声明 }
分类选择器——element1.classname { 样式声明 }
多类选择器——element1.classname1.classname2 { 样式声明 }
详细用法
示例
.example { background: olive; }
p.urgent { color: red; }
.important.urgent { background: silver; }

5.群组选择器

作用
将多个选择器放在一起进行样式的声明
语法
element1, element2, element3, … { 样式声明 }
示例
div, #main, .p.text { color:red; }

6.后代选择器

作用
通过元素的后代关系匹配元素(多级嵌套)
语法
element1 element2 { 样式声明 }
示例
body h1 { font-size: 200%; }

7.子代选择器

作用
通过元素的子代(一层层级关系)关系匹配元素
语法
element1 > element2 { 样式声明 }
示例
div > p { color: cyan; }
ul > li { font-weight: bold; }

8.兄弟选择器

兄弟元素——具备相同父元素的平级元素称为兄弟元素

8.1 相邻兄弟选择器

作用
获取紧挨在某元素之后的兄弟元素
语法
element1 + element2 { 样式声明 }
示例
table + p { margin-top: 2.5em; }

8.2 通用兄弟选择器

作用
获取某元素后所有满足条件的兄弟元素
语法
element1 ~ element2 { 样式声明 }
示例
p ~ ul { font-size: 20px; }

9.属性选择器

9.1 简单属性选择器

作用
根据属性的存在来选择元素
语法
element1 [attr]
示例
p [class] { border: 1px dotted silver; }

9.2 具体属性值选择器

作用
根据属性的具体值选择元素
语法
element1 [attr=”value”]
示例
a [ rel=”home” ] { font-weight: bold; }

9.3 部分属性值选择器

作用
根据属性值中的一部分选择元素
语法
element1 [attr~=”value”]
示例
a [rel~=”friend”] { text-transform: uppercase; }

9.4 开始子串属性值选择器

作用
根据属性值最开始的子串选择元素
语法
element1 [attr^=”substring”]
示例
a [src^=”https”] { font-size: 10px; }
选择其 src 属性值以 “https” 开头的每个 a元素

9.5 结束子串属性值选择器

作用
根据属性值最后面的子串选择元素
语法
element1 [attr$=”substring”]
示例
a [src$=”.pdf”] { font-size: 10px; }
选择其 src 属性以 “.pdf” 结尾的所有a元素

9.6 任意子串属性值选择器

作用
根据属性值中任意位置上的子串选择元素
语法
element1 [attr*=”substring”]
示例
a [src*=”abc”] { font-size: 10px; }
选择其 src 属性中包含 “abc” 子串的每个a元素

9.7 语言属性选择器

作用
选择一个有lang属性的元素，lang属性值是一个用连字号分隔的值列表，且最前面是该选择器中提供的值
语法
element1 [ attribute|=value]
示例
html [lang|=en] { color: gray; }
选择 lang 属性值以 “en” 开头的所有元素

10.伪类选择器

连接伪类——

:link

作用
应用于URI尚未访问过的链接
示例
a:link { color: blue; }

:visited

作用
应用于URI已访问的链接
示例
a:visited { color: purple; }

动态伪类——

:hover

作用
应用于鼠标悬停在元素上时的状态
示例
a [href] :hover { text-decoration: underline; }

:active

作用
应用于元素被激活时的状态(超链接，文本框，密码框点击时)
示例
a :active { color:red; }

:focus

作用
应用于元素获取焦点时的状态(文本框和密码框…)
示例
input :focus { background: yellow; }

目标伪类——

:target

作用
突出显示活动的HTML锚点元素，匹配被激活的锚点
示例
div :target { color: blue; }

结构伪类——

:first-child

作用
匹配其父元素的第一个子元素
示例
p :first-child { font-size: 125%; }
选择属于父元素的第一个子元素的每个p元素

:last-child

作用
匹配其父元素的最后一个子元素
示例
p :last-child { font-size: 125%; }
选择属于其父元素最后一个子元素每个 p元素

:nth-child(n)

作用
匹配其父元素中第n个子元素
示例
table tr:nth-child(2) { color: red; }
表格的第二行数据

否定伪类——

:not(selector)

作用
将满足指定选择器的元素排除出去
示例
table tr :not(:first-child){
font-size:24px;
}
除第一行以外的所有行

11.伪元素选择器

:first-letter/::first-letter

作用
匹配某个元素的首字符
示例
p:first-letter { font-size: 20px }
选择每个p元素的首字母

:first-line/::first-line

作用
匹配某个元素的首行
如果首行与首字符冲突，以首字符为准
示例
p:first-line { color: red; }
选择每个p元素的首行

:selection

作用
匹配被用户选取的内容
示例
p::selection { color: blue; }

:before/::before

作用
在元素内容的最前面插入生成内容
示例
p:before { content: attr(class); }
在每个p元素的内容之前插入内容

:after/::after

作用
在元素内容的最后插入生成内容
示例
p:after { content: “|” }
在每个p元素的内容之后插入内容