更多内容,欢迎关注微信公众号“让知识成为资产”
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元素的内容之后插入内容