概念
前文说，CSS是给HTML添加样式的， 那么要想两者之间产生作用，就需要用到选择器。
选择器标记在HTML标签上; 通过选择器，浏览器可以知道什么时候加载这些样式。
CSS 通过选择器组合一组样式，集体作用在某一段html代码上。
多种选择器
标签选择器
标签选择器，使用HTML的标签作为选择器。
作用域：引用页面上所有的同名标签， 标签选择区域大，通常用来初始化样式
举例
<style>
span {
background-color: rebeccapurple;
color: rgb(182, 56, 56)
}
</style>
<body>
<span >
我式这个div
</span>
<span >
我式这个div
</span>
<div>这个</div>
<div>那个</div>
</body>id选择器
每个html标签都可以 有id属性，用来标记该标签的唯一性。
定义了id属性，就可以用id 作为一个选择器来用。
id选择器通常以#号开头。
举例
<!DOCTYPE html>
<html lang="en">
<head>
<!--匹配demoSpan ， 匹配上的才会选择，匹配不上的就不选择 -->
<style>
#demoSpan{
color: rgb(128, 0, 53);
}
</style>
</head>
<body>
<span >
我式这个div
</span>
<span id="demoSpan">
我式这个div
</span>
</body>
</html>class 选择器
每个html都可以设置class属性，用来指定特定的样式。
利用class属性来指定样式的，定义为class选择器。
class 选择器 通常以 符号 . 开头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.colorRed{
color: red;
}
</style>
</head>
<body>
<span class="colorRed">
我是span，内容红色
</span>
</body>
</html>复合选择器
选择器名称 | 示例 | 解释 |
后代选择器 | .box1 .sp | 选择类名为box的标签内部的class属性值为sp的标签,使用空格隔开 |
交集选择器 | li.sp | 选择既是li标签也属于 sp类的标签 |
并集选择器(也叫分组选择器) | ul,ol | 选择所有的ul和ol标签 |
复合选择器 | div.box li p.spec.item | 复合选择器可以式 id，class 后代选择器等的随组合从而形成的选择器 |
<!--后代选择器示例-->
<!--css 后代选择器， 只有box1自己的后代中叫 sp 才会显示红色-->
.box1 .sp {
color: red
}
<div class="box1">
<span class="sp">第一段文字</span>
</div>
<div class="box2">
<span class="s2">第二段文字</span>
</div>
<!--交集选择器 同时 拥有 box1 和 box2 的盒子才会高亮-->
.box1.box2 {
color: red
}
<div class="box1">
盒子1
</div>
<div class="box1 box2">
盒子2
</div>
<div class="box2">
盒子3
</div>
<!--并集选择器 box1 box2 颜色均会为红色-->
.box1,.box2 {
color: red
}
<div class="box1">
盒子1
</div>
<div class="box2">
盒子2
</div>
<div class="box3">
盒子3
</div>元素关系选择器
名称 | 举例 | 意义 |
子选择器 | div>p | div的子标签， 只会匹配div标签的子（不含孙子等）元素中的所有P标签 |
相邻兄弟选择器 | img+p | 图片后面紧跟着的段落将被选中 |
通用兄弟选择器 | p~span | p元素后的所有同层级span元素， （从IE7开始兼容） |
序号选择器
名称 | 意义 | 兼容性 |
:first-child | 第一个子元素 | IE7 |
:last-child | 最后一个子元素 | IE9 |
:nth-child(3) | 第3个子元素 | IE9 |
:nth-of-type(3) | 第三个某类型子元素,同种标签指定序号 | IE9 |
:nth-last-child(3) | 倒数第三个子元素 | IE9 |
:nth-last-of-type(3) | 倒数第三个摸个类型的子元素，同种标签指定元素 | IE9 |
<!--一段html代码-->
<div class="parentBox">
<div class="box">
<p>box1</p>
<p>box1</p>
</div>
<div class="box">
<p>box2</p>
<p>box2</p>
</div>
<div class="box">
<p>box3</p>
<p>box3</p>
</div>
<div class="box">
<p>box4</p>
<p>box4</p>
</div>
<div class="box">
<p>box5</p>
<p>box5</p>
</div>
</div>
<!--模拟第一个div元素，背景称红色-->
<style>
.box:first-child {
background-color: red;
}
</style>
<!--模拟div元素，最后一个背景为绿色-->
<style>
.box:last-child {
background-color: green;
}
</style>
<!--模拟 nth-child指定 元素下标，如果指定的元素下表不是p标签，那么css也不会生效-->
<style>
div p:nth-child(4) {
background-color: red;
}
</style>
<div>
<p>第1个p标签</p>
<p>第2个p标签</p>
<div>第一个div子标签</div>
<p>第3个p标签</p>
<p>第4个p标签</p>
</div>
<!--模拟 nth-child 传参为基数的时候，css发挥作用。nht-child 可以写成 an+b的形式，表示从b开始每a个选择一个-->
<!--2n+1 表示奇数 2n表示偶数-->
<style>
div p:nth-child(2n+1) {
background-color: red;
}
</style>
<div>
<p>第1个p标签</p>
<p>第2个p标签</p>
<div>第一个div子标签</div>
<p>第3个p标签</p>
<p>第4个p标签</p>
</div>
<!--模拟将选择同种标签指定子元素序号的子元素-->
<style>
div p:nth-of-type(2n) {
background-color: red;
}
</style>
<div>
<p>第1个p标签</p>
<p>第2个p标签</p>
<div>第一个div子标签</div>
<p>第3个p标签</p>
<p>第4个p标签</p>
</div>属性选择器
举例 | 意义 |
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标签 |
伪类
伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，例如： 超级链接有四个特殊状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a:link {
color: dodgerblue;
}
a:visited {
color: black;
}
a:hover {
color: brown;
}
a:active {
color:crimson;
}
</style>
</head>
<body>
<div>
<a href="http://www.taobao.com">淘宝</a>
</div>
<div>
<a href="http://www.alibaba.com">阿里巴巴</a>
</div>
</body>
</html>CSS3新增伪类
伪类 | 意思 |
:empty | 选择空标签 |
:focos | 选择当前获得焦点的表单元素 |
:enabled | 选择当前有效的表单元素 |
:disabled | 选择当前无效的表单元素 |
:checked | 选择当前已经勾选的单选按钮或者复选框 |
:root | 选择根元素， 即<html>标签 |
<!--验证选取空标签示例-->
<style>
p {
height: 200px;
width: 200px;
border: 2px solid red;
}
p:empty {
background-color: green;
}
</style>
<p></p>
<p></p>
<p>费控标签</p>
<p></p>
<!--验证获得焦点后 背景颜色为黑色-->
<style>
input:focus {
background-color: black;
}
</style>
<input></input>
<input></input>
<input></input>
<input></input>
<!--验证添加disabled enabled伪类-->
<!--默认情况下， 为input标签为 enabled-->
<style>
input:disabled {
background-color: blue;
}
input:enabled {
background-color: green;
}
</style>
<input></input>
<input></input>
<input disabled></input>
<input></input>
<!--验证 checked,已经单选的或者复选框,如果选中，相邻兄弟span标签的文字变成红色-->
<style>
input:checked+span{
color: red;
}
</style>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<input type="checkbox"> <span>文字</span>
<!--root选择器 即表示根节点开始的所有元素-->
<style>
:root {
font-size: 30px;
}
</style>伪元素
表示虚拟动态创建的元素, 伪元素用双冒号表示:: , IE8可以兼容到单冒号
伪元素 | 意义 |
::before | 表示元素之前的虚拟出一个元素 |
::after伪元素 | 表示元素之后的虚拟出一个元素 |
::selection | 用于文档中被用户高亮的一部分 |
::first-letter | 选中某个元素（必须是块级元素）第一行的第一个字母 |
::first-line | 选中某个元素（必须是块级元素）第一行全部文字 |
<!--::before伪元素，表示元素之前的虚拟出一个元素-->
<!--::after伪元素，表示元素之后的虚拟出一个元素-->
<!--示例中表示在 a元素内容前面插入一个特殊符号 ○ ， ::before必须设置content属性，表示虚拟元素的内容-->
<!--示例中表示在 a元素内容后面插入一个特殊符号 ★ ， ::after必须设置content属性，表示虚拟元素的内容-->
<style>
a::before {
content: "○";
}
a::after {
content: "★";
}
</style>
<a>超级链接</a>
<a>超级链接</a>
<a>超级链接</a>
<a>超级链接</a>
<!--::selection文字选中的部分会被变为绿色-->
<style>
div {
width: 300px;
height: 300px;
}
div::selection {
background-color: springgreen;
}
</style>
<div>打字机看得开搭理我了两位打字机看得开搭理我了两位打字机看得开搭理我了两位打字机看得开搭理我了两位打字机看得开搭理我了两位打字机看得开搭理我了两位打字机看得开搭理我了两位打字机看得开搭理我了两位打字机看得开搭理我了两位</div>
<!--first-letter 选中第一个字母-->
<!--first-line 选中第一行-->
<style>
div::first-letter {
font-size: 50px;
}`
div::first-line {
text-decoration: underline;
}
</style>
<div>
Renowned graffiti-artist Banksy has unveiled his latest work on a building devastated by shelling in Ukraine.
Banksy posted a picture on Instagram of the artwork, a gymnast doing a handstand amid debris, in Borodyanka.
Murals spotted in and around Ukraine's capital Kyiv had led to speculation the anonymous artist was working in the war-torn country.
Another, not officially claimed, depicts a man resembling Vladimir Putin being defeated at Judo by a child.
The graffiti artist posted three images of the gymnast mural in the wreckage left by Russian shelling, with a caption merely stating "Borodyanka, Ukraine".
Borodyanka was one of the places hardest hit by Russia's bombardment of Ukraine in the immediate aftermath of the 24 February invasion.
Russian soldiers occupied the town - located around 30 miles (48km) north west of Ukraine's capital Kyiv - for weeks in the initial phase of the war, before it was eventually liberated by Ukraine in April.
</div>