CSS3选择器
标签选择器
标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签
span {
color: red;
}
b {
color: green;
}标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅
<p>我们一定<span>不负韶华，只争朝夕</span></p>------------------>会被选择 <ul> <li>小明</li> <li>小红</li> <li><span>小强</span></li>------------------>会被选择 </ul>
标签选择器的常见作用-标签选择器“覆盖面”非常大，所以通常用于标签的初始化
ul {
/* 去掉无序列表的小圆点 */
list-style: none;
}
a {
/* 去掉超级链接的下划线 */
text-decoration: none;
}id选择器
认识id属性
标签可以有id属性，是这个标签的唯一标识
<p id="para1">我是一个段落</p>
id的名称只能由\textcolor{red}{字母、数字、下划线、短横构成}，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
同一个页面上不能有相同id的标签
CSS选择器可以使用井号#前缀，选择指定id的标签
#para1 {
color: red;
}class选择器
class类名
class属性表示“类名”
<p class="warning">我是段落</p>
类名的命名规范和id的命名规范相同
多个标签可以为相同类名
<p class="warning">我是段落</p> <p class="warning">我是段落</p> <ul> <li>我是列表项</li> <li class="warning">我是列表项</li> <li>我是列表项</li> <li class="warning">我是列表项</li> </ul>
同一个标签可以同时属于多个类，类名用空格隔开
/* 同时属于两个类 */ <p class="warning spec">我是段落</p>
class选择器
使用点.前缀选择指定class的标签
.warning {
color: red;
}原子类
在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类
.fs12 {
font-size: 12px;
}
.fs14 {
font-size: 14px;
}
.fs16 { font-size: 16px;
}
.color-red {
color: red;
}
.color-blue {
color: blue;
}
.color-green {
color: green;
}HTML标签就可以“按需选择”它的类名了，这样可以非常快速的添加一些常见样式
<p class="fs18 color-green">我是一个文字</p>
复合选择器
| 选择器名称 | 示例 | 示例的意义 |
|---|---|---|
| 后代选择器 | .box .spec(有空格) | 选择类名为box的标签内部的类名为spec的标签 |
| 交集选择器 | li.spec(无空格) | 选择既是li标签，也属于spec类的标签 |
| 并集选择器 | ul, ol(有空格) | 选择所有ul和ol标签 |
后代选择器
CSS选择器中，使用空格表示“后代”
/* 选择类名为box的标签 后代的p标签*/ .box p { color: red; } <div class="box"> <p>我是盒子中的段落</p> /* 将被选择*/ <p>我是盒子中的段落</p> /* 将被选择*/ </div> <p>我是段落</p> <p>我是段落</p>“后代”并不一定是“儿子”
/* 选择类名为box的标签 后代的p标签*/ .box p { color: red; } <div class="box"> <ul> <li><p>我是盒子中的段落</p></li>/* 将被选择*/ <li><p>我是盒子中的段落</p></li>/* 将被选择*/ </ul> </div> <p>我是段落</p> <p>我是段落</p>后代选择器可以有很多空格，隔开好几代
.box ul li .spec em { color: red; } <div class="box"> <ul> <li> <p class="spec">我是段落<em>强调文字</em></p> </li> </ul> </div>
交集选择器
选择有.spec类的h3标签，此时应该使用交集选择器
h3.spec {
font-style: italic;
}并集选择器
并集选择器也叫作分组选择器，逗号表示分组
ul, ol {
list-style: none;
}选择器可以任何搭配、结合，从而形成复合选择器，我们必须要能一目了然的看出选择器代表的含义
伪类
LVHA伪类
伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态
| 伪类 | 意义 |
|---|---|
| a:link | 没有被访问的超级链接 |
| a:visited | 已经被访问过的超级链接 |
| a:hover | 正被鼠标悬停的超级链接 |
| a:active | 正被激活的超级链接（按下按键但是还没有松开按 |
爱恨准则
a标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效
首先伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活） lvha 规则是由于CSS特殊性导致，css特殊性有一个按顺序的规则（同一条css规则，后出现会覆盖前面的同样规则） 在这里，比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色.如果把visited放在hover的后面，那么已经访问过的链接始终触发visited伪类，根据第一条会覆盖hover里面的颜色。其实 link visited 这两个伪类，并不需要顺序关系。（他们两的位置可以交换）
CSS3新增伪类
| 伪类 | 意义 |
|---|---|
| :empty | 选择空标签 |
| :focus | 选择当前获得焦点的表单元素 |
| :enabled | 选择当前有效的表单元素 |
| :disabled | 选择当前无效的表单元素 |
| :checked | 选择当前已经勾选的单选按钮或者复选框 |
| :root | 选择根元素，即<html>标签 |
元素关系选择器
| 名称 | 举例 | 意义 |
|---|---|---|
| 子选择器 | div>p | div的子标签p |
| 相邻兄弟选择器 | img+p | 图片后面紧跟着的段落将被选中 |
| 通用兄弟选择器 | p~span | p元素之后的所有同层级span元素 |
子选择器
当使用 > 符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系
后代选择器不一定限制是子元素
子选择器从IE7开始兼容
.box>p {
color: red;
}
<div class="box">
<p>我是段落</p> /* 将被选择*/
<p>我是段落</p> /* 将被选择*/
<div>
<p>我是段落</p>
<p>我是段落</p>
</div>
</div>
<p>我是段落</p>
<p>我是段落</p>相邻兄弟选择器
相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中
说白了，a+b就是选择“紧跟在a后面的一个b”
相邻兄弟选择器从IE7开始兼容
img+span {
color: green;
}
<p>
<img src="images/0.jpg" alt="">
<span>这是北京故宫</span> /* 将被选择*/
<span>这是北京故宫</span>
</p>
<p>
<img src="images/1.jpg" alt="">
<span>这是北京鸟巢</span>/* 将被选择*/
</p>
<span>你好</span>
<span>你好</span>通用兄弟选择器
通用兄弟选择器（~），a~b 选择a元素之后所有同层级b元素
通用兄弟选择器从IE7开始兼容
h3~span {
font-style: italic;
}
<span>我是后面的span</span>
<h3>我是一个三级标题</h3>
<span>我是后面的span</span>/* 将被选择*/
<span>我是后面的span</span>/* 将被选择*/
<span>我是后面的span</span>/* 将被选择*/
<span>我是后面的span</span>/* 将被选择*/
<p>我是一个段落</p>
<span>我是后面的span</span>/* 将被选择*/
<span>我是后面的span</span>/* 将被选择*/
<div>
<span>多了一个级别span</span>
<span>多了一个级别span</span>
</div>序号选择器
| 举例 | 意义 |
|---|---|
| :first-child | 第一个子元素 |
| :last-child | 最后一个子元素 |
| :nth-child(3) | 第3个子元素 |
| :nth-of-type(3) | 第3个某类型子元素 |
| :nth-last-child(3) | 倒数第3个子元素 |
| :nth-last-of-type(3) | 倒数第3个某类型子元素 |
:first-child
:first-child表示“选择第一个子元素”，比如下面的例子就表示选择.box1盒子中第一个p
.box1 p:first-child {
color: red;
}
<div class="box1">
<p>1</p> /* 将被选择*/
<p>2</p>
<p>3</p>
<p>4</p>
</div>:last-child
:last-child表示“选择最后一个子元素”，比如下面的例子就表示选择.box1盒子中最后一个p
.box1 p:last-child {
color: red;
}
<div class="box1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>/* 将被选择*/
</div>:nth-child()
:nth-child()可以选择任意序号的子元素
.box2 p:nth-child(3) {
color: green;
}
<div class="box2">
<p>1</p>
<p>2</p>
<p>3</p>/* 将被选择*/
<p>4</p>
</div>:nth-child()
:nth-child()可以写成an + b的形式，表示从b开始每a个选 一个，注意不能写为b + an
.box2 p:nth-child(3n + 2) { color: green; } <div class="box2"> <p>1</p> <p>2</p>/* 将被选择*/ <p>3</p> <p>4</p> <p>5</p>/* 将被选择*/ <p>6</p> <p>7</p> <p>8</p>/* 将被选择*/ </div>2n+1等价于odd，表示奇数
.box2 p:nth-child(2n + 1) { color: green; } .box2 p:nth-child(odd) { color: green; }2n等价于even，表示偶数
.box2 p:nth-child(2n) { color: green; } .box2 p:nth-child(even) { color: green; }
:nth-of-type()
:nth-of-type()将选择同种标签指定序号的子元素
.box4 p:nth-child(3) {
color: blue;
}
<div class="box4">
<p>我是1号p</p>
<p>我是2号p</p>
<h3>我是1号h3</h3>
<h3>我是2号h3</h3>
<p>我是3号p</p>/*不会被选择！*/
<p>我是4号p</p>
<h3>我是3号h3</h3>
<h3>我是4号h3</h3>
</div> .box4 p:nth-of-type(3) {
color: blue;
}
<div class="box4">
<p>我是1号p</p>
<p>我是2号p</p>
<h3>我是1号h3</h3>
<h3>我是2号h3</h3>
<p>我是3号p</p>/*被选择！*/
<p>我是4号p</p>
<h3>我是3号h3</h3>
<h3>我是4号h3</h3>
</div>序号选择器的兼容性
| 选择器 | 兼容性 |
|---|---|
| :first-child | IE7 |
| :last-child | IE9 |
| :nth-child(3) | IE9 |
| :nth-of-type(3) | IE9 |
| :nth-last-child(3) | IE9 |
| :nth-last-of-type(3) | IE9 |
属性选择器
| 举例 | 意义 |
|---|---|
| img[alt] | 选择有alt属性的img标签 |
| img[alt="故宫"] | 选择alt属性是故宫的img标签 |
| img[alt^="北京"] | 选择alt属性以北京开头的img标签 |
| img[alt$="夜景"] | 选择alt属性以夜景结尾的img标签 |
| img[alt*="美"] | 选择有alt属性中含有美字的img标签 |
| img[alt~="手机拍摄"] | 选择有alt属性以“参赛作用-”开头 的img标签 |
| img[alt|="参赛作品"] | 选择有alt属性以“参赛作用-”开头 的img标签 |
伪元素
CSS3新增了“伪元素”特性，顾名思义，表示虚拟动态创建的元素
伪元素用双冒号表示，IE8可以兼容单冒号
::before和::after
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置 content 属性表示其中的内容
a::before {
content: "★";
}::after 创建一个伪元素，其将成为匹配选中的元素的最后一个子元素，必须设置 content 属性表示其中的内容
:selection
::selection CSS伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）
::first-letter和::first-line
::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母
::first-line会选中某元素中（必须是块级元素）第一行全部文字
层叠性和选择器权重计算
CSS全名叫做“层叠式样式表”，层叠性是它很重要的性质
层叠性：多个选择器可以同时作用于同一个标签，效果叠加
<p id="para" class="spec">我是段落</p>
p {
color: red;
}
.spec {
font-style: italic;
}
#para {
text-decoration: underline;
}层叠性的冲突处理
复杂选择器可以通过（id的个数, class的个数, 标签的个数）的形式，计算权重, id权重 > class权重 > 标签权重.
!important提升权重
如果我们需要将某个选择器的某条属性提升权重，可以在属性后面写!important
总结
| 分类 | 单词 | 描述 |
|---|---|---|
| 标签选择器和id选择器 | element | 标签选择器，直接使用元素的标签名，表示选择指定元素名称的所有元素 |
| 示例：p{color:red;}选择所有的p标签 | ||
| #id | id选择器，使用井号#作为前缀，表示选择指定id的元素 | |
| 示例：#firstname{color:yellow;} 选择id=firstname" 的元素 | ||
| class 选择器 | .class | class选择器，使用点.作为前缀， 表示选择指定类名的元素 |
| p示例：.intro{color:red;} 选择class="intro" 的元素 | ||
| 复合选择器 | element1 element2 | 后代选择器，使用空格分隔两个元素 |
| 示例：.box p{} 表示选择类名为box的标签的后代元素p标签 | ||
| element1.class | 交集选择器 | |
| 示例：h3.spec{} 表示选择有.spec类的<h3>标签 | ||
| element1,element2 | 并集选择器，也叫分组选择器，使用逗号隔开 | |
| 示例：ul, ol{} 表示同时选择<ul>标签和<ol>标签 | ||
| 元素关系选择器 | element>element | 子选择器，使用 > 符号分隔两个元素 |
| 示例： div > p {} 选择<div>下的所有子级<p>元素 | ||
| element+element | 相邻兄弟选择器，使用 + 分隔两个元素 | |
| 示例：div + p {}选择所有紧接着 <div> 元素之后的第一个<p>元素 | ||
| element1~element2 | 通用兄弟选择器，使用 ~ 分隔两个元素 | |
| 示例：p~ul {}选择同一父元素下的 p 元素之后的每一个 ul 元素 | ||
| 序号选择器 | :first-child | 匹配其父元素中的第一个子元素 |
| 示例：p:first-child{}匹配<p>的父元素的第一个<p>元素 | ||
| :last-child | 匹配父元素中最后一个子元素 | |
| 示例：p:last-child{}匹配<p>的父元素下最后一个<p>元素 | ||
| :nth-child(n) | 匹配父元素中的第 n 个子元素 | |
| 示例：p:nth-child(2)匹配<p>的父元素中第2个子元素<p>标签 | ||
| :nth-of-type(n) | 匹配同类型中的第n个同级兄弟元素 （不常用，了解即可） | |
| 示例：p:nth-of-type(2){}指定每个<p>元素匹配同类型中的第2个同级兄弟元素 | ||
| :nth-last-child(n) | 匹配属于其父元素的第n个子元素的所有元素，从最后一个子元素开始计数 （不常用，了解即可） | |
| 示例：p:nth-last-child(2){}指定每个<p>元素匹配同类型中的倒数第2个同级兄弟元素 | ||
| :nth-last-of-type(n) | 匹配同类型中的倒数第n个同级兄弟元素，从最后一个子元素开始计数（不常用，了解即可） | |
| 示例：p:nth-last-of-type(2){}指定每个<p>元素匹配同类型中的倒数第2个同级兄弟元素 | ||
| 属性选择器 （不常用，了解即可） | [attribute] | 选择指定属性的元素 |
| [attribute=value] | 选择指定了属性和值的元素 | |
| [attribute^=value] | 选择属性值带指定的值开始的元素 | |
| [attribute$=value] | 选择属性值带指定的值结尾的元素 | |
| [attribute*=value] | 选择元素属性值包含指定值的元素 | |
| [attribute~=value] | 选择属性值包含一个指定单词的元素 | |
| [attribute|=value] | 选择属性值以指定值开头的元素 | |
| 伪类 | :link | 选择所有未被访问的超级链接 |
| :visited | 选择所有访问过的超级链接 | |
| :active | 选择被用户激活的元素 | |
| :hover | 选择鼠标悬停的元素 | |
| css3新增伪类（不常用，了解即可） | :empty | 选择没有任何子级的元素 |
| :focus | 选择当前获得焦点的元素 | |
| :enabled | 选择已启用的元素 | |
| :disabled | 选择禁用的元素 | |
| :checked | 选择选中的输入元素（仅适用于单选按钮或复选框） | |
| :root | 选择根元素，即html标签 |
随时随地看视频
