目录
:nth-of-type(n)将选择第n种标签的子元素(类)
选择器分类
对于CSS选择器的类型分为“CSS2.1传统选择器”和“CSS3新增选择器”
传统CSS2.1选择器
- 标签选择器和id选择器
- class(类)选择器
- 符合选择器
- 伪类
CSS3新增选择器
- 元素关系选择器
- 序号选择器
- 属性选择器
- CSS3新增伪类
- 伪元素
标签选择器
标签选择器也叫：“元素选择器”、“类型选择器”
- 它直接使用元素的标签名当做选择器，将选择页面上所有该种标签
- 标签选择器将选择页面上所有该种标签，无论标签所处位置的深浅
/* 选中当前页面上所有的h1标签和p标签 */
h1 {
color:blue;
font-size:30px;
}
p {
color:black;
backgroun-color:18px;
}
标签选择器的作用：
- 标签选择器的覆盖面非常大，通常用于标签样式的初始化
ul {
/* 去掉无序列表左侧小圆点 */
list-style:none;
}
a {
/* 去掉超链接下划线 */
text-decoration:none;
}ID选择器
ID选择器使用HTML元素的id来选择特定的元素
- 元素的id在HTML中是唯一的，因此ID选择器用于选择一个唯一的元素
- ID的名称只能由字母、数字、下划线、短横线构成，不能以数字开头，字母区分大小写
- 名称最好是：“见名知意，多一个英文单词之间用‘-’分隔”
- 要选择具有特定id的元素，在id前面写一个井号(#)，后跟该元素id
下面的代码，用于选择id为“desc”标签
<style>
#desc {
background-color: black;
color: aliceblue;
font-size: 20px;
}
</style>
<body>
<p id="desc">定义一个id属性</p>
</body>class选择器
class属性表示“类名”
- 类名的命名规范和id选择器相同
- 类选择器以“.”前缀开头
- 多个标签可以定义相同的类名，因此class选择器通常用来选择“一群”标签
下面的代码用来选择类名为“desc”的标签，共选择了“<p>和<div>”两个标签
<style>
.desc {
font-size: 30px;
color: skyblue;
}
</style>
<body>
<p class="desc">定一个class属性</p>
<div class="desc">我是一个div标签</div>
</body>同一个标签也可以同时属于多个类，类名之间用空格隔开
<style>
.desc {
font-size: 30px;
color: skyblue;
}
.para {
background-color: beige;
}
</style>
<body>
<!-- 同时属于两个类 -->
<p class="desc para">定一个class属性</p>
</body>原子类
- 在网页项目前，可以将所有常用字号、文字、颜色、行高、外边距、内边距等等都设置为单独的类
- HTML标签就可以快速的通过给它们添加类名，来实现快速地添加一些样式
- 应用场景：组件化开发
- （不建议乱用，否则后续开发会乱套）
一个使用原子类的例子：
<style>
.fs12 {
font-size: 12px;
}
.fs14 {
font-size: 14px;
}
.fs16 {
font-size: 16px;
}
.fs18 {
font-size: 18px;
}
.fs20 {
font-size: 20px;
}
.fs22 {
font-size: 22px;
}
.color-red {
color: red;
}
.color-black {
color: black;
}
.color-green {
color: green;
}
.color-blue {
color: blue;
}
</style>通配符选择器
- 代表页面当中所有的元素
- 基本不用，对性能消耗过大
* {
/* 设置所有元素的颜色为红色 */
color:red;
}复合选择器
后代选择器
- 在CSS中，使用“空格”表示“后代”
- 后代并不一定是“儿子”
- 后代选择器可以有很多空格，隔开好几代
<style>
/* .box p 这种新式的选择器，称之为 “后代选择器” */
.box p {
color: skyblue;
font-size: 20px;
}
/* 多个空格形式 */
.box ul li p a {
color: red;
}
</style>
<body>
<div class="box">
<p>我是div中的段落标签</p>
<p>我是div中的段落标签</p>
<ul>
<li>
<p>我是 ul li 中的 <a href="#">p标签</a></p>
</li>
</ul>
</div>
</body>效果：
交集选择器
交集选择器，通常用于筛选带有某个“类”或“id”或“属性”的标签
- 如：选择有.box类的h1标签
<style>
h1.box {
color: skyblue;
font-size: 30px;
}
</style>
<body>
<h1 class="box">交集选择器</h2>
</body>并集选择器
并集选择器也叫“分组选择器”，逗号表示分组
- 并集选择器常用来选择，不同类型的元素
ul,
ol,
p {
font-size: 12px;
color: red;
}复合选择器
- 选择器可以任何搭配、结合，从而形成复合选择器，但是我们必须要能一目了然的看出选择器代表的含义
<style>
div.box ul li p.para span {
color: red;
}
</style>
<body>
<div class="box">
<ul>
<li>
<p class="para">
<span>我是最终被选择到的元素</span>
</p>
<p>我没有被选择到</p>
</li>
</ul>
</div>
<div>
我也没有被选择到
</div>效果：
伪类选择器
伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态
超链接拥有四个特殊状态
- a:link：没有被访问的超链接
- a:visited：已经访问过的超链接
- a:hover：正被鼠标悬停的超链接
- a:active：正被激活的超链接(按下按键，但还没有松开按键)
爱恨准则
- a标签的伪类书写，按照“爱恨准则”的顺序(LOVE HATE)，否则伪类不生效
- link > visited > hover > active
<style>
/*
顺序不能乱 ，爱恨准则 LOVE HATE
:link -> :visited -> :hover -> :active
*/
a:link {
color:red;
}
a:visited {
color:blue;
}
a:hover {
color: green;
}
a:active {
color:yellow;
}
</style>
</head>
<body>
<h1>伪类</h1>
<p>
<a href="https://baidu.com">百度一下，你就知道 ！</a>
</p>
</body>注：
伪类“hover”不仅可以用在a标签上，还可以用在其它标签上
元素关系选择器
子选择器
- 当时用 > 符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素
- 子选择器只能选择“父子元素”，不能跨级选择孙子，但是后代选择器“使用空格隔开”可以选择某一元素的所有后代
<style>
/* 子选择器 ：两个标签为 父子元素 */
.box > p {
color: red;
}
/* 后代选择器：不一定限制是子元素
.box p {
color: skyblue;
} */
</style>
<body>
<h1>元素关系选择器</h1>
<h2>子选择器</h2>
<div class="box">
<p>我是div的第一个子元素，也是一个段落标签</p>
<p>我是div的第二个子元素，也是一个段落标签</p>
<ul>
<li>
<p>我是一个段落标签</p>
</li>
<li>
<p>我是一个段落标签</p>
</li>
</ul>
</div>
</body>效果：
当我们把“子选择器注释，将.box p拉出注释”后：
<style>
/* 子选择器 ：两个标签为 父子元素
.box > p {
color: red;
} */
/* 后代选择器：不一定限制是子元素 */
.box p {
color: skyblue;
}
</style>效果图：
可以看到，所有<p>标签都被选择了
相邻兄弟选择器
- 相邻兄弟选择(+)基于两个选择器之间，当第二个元素紧跟在第一个元素之后，且两个元素都属于同一个父元素的子元素，则第二个元素将被选中
- a + b 即选择 紧跟在a后面的第一个b
<style>
/* 相邻兄弟选择器：a + b 即 选择 紧跟在a后面的第一个b */
p + span {
color: seagreen;
}
</style>
<body>
<h2>相邻兄弟选择器</h2>
<p>a + b 即 选择 紧跟在a后面的第一个b</p>
<p>
<p>标题一</p>
<span>小米智能电视</span>
<span>1999元</span>
</p>
<p>
<p>标题二</p>
<span>小米空气净化器</span>
<span>2999元</span>
</p>
</body>效果：
通用兄弟选择器
- 通用兄弟选择器(~) 波浪线 (a~b)选择a元素之后所有同层级b元素
<style>
/* 通用兄弟选择器：a ~ b 即 选择p后面所有的span */
p ~ span {
color: seagreen;
}
</style>
<body>
<h2>通用兄弟选择器</h2>
<p>a ~ b 即 选择p后面所有的span</p>
<p>
<p>标题一</p>
<span>小米智能电视</span>
<span>1999元</span>
</p>
<p>
<p>标题二</p>
<span>小米空气净化器</span>
<span>2999元</span>
</p>
</body>效果：
序号选择器
| 选择器 | 描述 |
|---|---|
| :first-child | 第一个子元素 |
| :last-child | 最后一个子元素 |
| :nth-child(n) | 第n个子元素 |
| :ntgh-of-type(n) | 第n个某类型子元素 |
| :nth-last-child(n) | 倒数第n个子元素 |
| :nth-last-of-type(n) | 倒数第n个某类型子元素 |
:first-child选择第一个子元素
<style>
/* 表示.box盒子中的第一个p标签 */
.box p:first-child {
color: skyblue;
}
</style>
<body>
<h2>:first-child 选择第一个子元素</h2>
<div class="box">
<!-- 第一个p标签被选择 -->
<p>第1个p标签</p>
<p>第2个p标签</p>
<p>第3个p标签</p>
<p>第4个p标签</p>
<p>第5个p标签</p>
</div>
</body>效果：
:nth-child(n)选择某一序号子元素
<style>
/* 选择任意序号的子元素,第2个p标签 */
.box2 p:nth-child(2) {
color: blue;
}
</style>
<body>
<h2>:nth-child(n) 可以选择任意序号的子元素</h2>
<div class="box2">
<p>第1个p标签</p>
<p>第2个p标签</p>
<p>第3个p标签</p>
<p>第4个p标签</p>
<p>第5个p标签</p>
</div>
</body>效果：
:nth-child(n)可以写成“an+b”的形式，表示：“从b开始每a个的选择一个”，不能写成(b+an)
<style>
/*
写成 an+b 的形式，表示从b开始每a个选择一个
将 n 作为自然数从 0,1,2 ... 开始带入公式计算，即可得出哪一行被选中
*/
.box3 p:nth-child(3n + 2) {
color: blueviolet;
}
</style>
<body>
<h2>:nth-child() 可以写成 an+b 的形式</h2>
<p>表示从b开始每a个选择一个</p>
<div class="box3">
<p>第1个p标签</p>
<p>第2个p标签</p>
<p>第3个p标签</p>
<p>第4个p标签</p>
<p>第5个p标签</p>
<p>第6个p标签</p>
<p>第7个p标签</p>
<p>第8个p标签</p>
<p>第9个p标签</p>
<p>第1个p标签</p>
</div>
</body>效果：
:nth-of-type(n)将选择第n种标签的子元素(类)
<style>
/* :nth-of-type(n) 将选择同种标签指定序号的子元素 */
.box6 p:nth-of-type(3) {
color: salmon;
}
</style>
<body>
<h2>:nth-of-type(n) 将选择同种标签指定序号的子元素</h2>
<div class="box6">
<p>第1个p标签</p>
<p>第2个p标签</p>
<h3>第1号h3标签</h3>
<h3>第2号h3标签</h3>
<!--第三个p标签将被选中-->
<p>第3个p标签</p>
<p>第4个p标签</p>
<p>第5个p标签</p>
<h3>第3号h3标签</h3>
<h3>第4号h3标签</h3>
</div>
</body>效果：
属性选择器
| 案例 | 描述 |
|---|---|
| img[alt] | 选择带有alt属性的img标签 |
| Img[alt="123"] | 选择alt属性是123的img标签 |
| Img[alt=^"123"] | 选择alt属性以123开头的img标签 |
| img[alt$="123"] | 选择alt属性以123结尾的img标签 |
| Img[alt*="123"] | 选择alt属性中包含的123文字的img标签 |
| Img[alt~="123"] | 选择alt属性中有空格隔开的123字样的img标签 |
| Img[alt | ="123"] | 选择alt属性中以123-开头的img标签 |
实际开发中用到的很少，了解即可
CSS3新增伪类
:empty选择为内容为空的p标签
该伪类，只对<p>标签生效
<style>
p,span {
width: 200px;
height: 50px;
border: 1px solid red;
}
/* :empty 选择所有p标签，为空（没有内容）的标签 */
p:empty {
background-color: skyblue;
}
</style>
<body>
<h1>CSS3新增伪类</h1>
<h2>:empty 选择空标签</h2>
<p class="para1"></p>
<p class="para2"></p>
<p class="para3">123</p>
<p class="para4"></p>
</body>效果：
:focus选择当前焦点的表单元素
只对表单元素有效，例如<input>、<button>等
<style>
/* :focus 选择当前获得焦点的表单元素 */
input:focus {
background-color: skyblue;
}
</style>
<body>
<h2>:focus 选择当前获得焦点的表单元素</h2>
<div>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</body>效果：
:enabled选择当前有效的表单元素
“当前有效”即表单元素不处于”禁止修改“状态
<style>
/* :enabled 选择当前有效的表单元素 */
input:enabled {
background-color: salmon;
}
</style>
<body>
<h2>:enabled 选择当前有效的表单元素</h2>
<div>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</body>效果：
:disabled 选择当前无效的表单元素
<style>
/* :disabled 选择当前无效的表单元 */
input:disabled {
background-color: green;
}
</style>
<body>
<h2>:disabled 选择当前无效的表单元</h2>
<div>
<input type="text" />
<input type="text" disabled />
<input type="text" />
</div>
</body>效果：
:checked 选择当前已经勾选的单选按钮或复选框
<style>
/*
:checked 选择当前已经勾选的单选按钮或复选框
+span 表示input标签后边第一个span标签
*/
input:checked + span {
color: red;
}
</style>
<body>
<h2>:checked 选择当前已经勾选的单选按钮或复选框</h2>
<div>
<label><input type="checkbox" /><span>篮球</span></label>
<label><input type="checkbox" checked /><span>乒乓球</span></label>
<label><input type="checkbox" /><span>书法</span></label>
</div>
</body>效果：
:root 选择根元素，即<html>标签
常用于设置一些变量，这些变量对应于字号，颜色等，方便后续修改
<style>
/* :root 选择根元素，即 <html>标签 */
:root {
font-size: 20px;
}
</style>CSS3新增：伪元素
- CSS3新增了”伪元素“特性，表示”虚拟动态创建的元素“
- 伪元素用双冒号“::”表示
::before
- ::before创建一个伪元素， 将成为匹配选中的元素的第一个元素
- 必须设置content属性表示其中的内容
<style>
/* ::before 创建一个伪元素，将成为匹配选中的元素的第一个元素 */
a::before {
content: "※☆";
}
</style>
<body>
<h2>::before 创建一个伪元素，将成为匹配选中的元素的第一个元素</h2>
<a href="#">123</a>
</body>效果：
::after
- ::after创建一个伪元素，成为匹配选中的元素的最后一个元素
- 必须设置content属性表示其中的内容
<style>
/* ::after 创建一个伪元素，成为匹配选中的元素的最后一个子元素 */
span::after {
content: "△❥(^_-)";
}
</style>
<body>
<h2>::after 创建一个伪元素，成为匹配选中的元素的最后一个子元素</h2>
<span>123</span>
</body>效果：
::selection
- ::selection选择器匹配被用户选取的部分
- 只能向::selection选择器应用少量css属性:color、background、cursor、 outline
<style>
/*
::selection 选择器匹配被用户选取的选取是部分
只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline
*/
.box::selection {
color: pink;
background-color: black;
}
</style>
<body>
<h2>::selection 选择器匹配被用户选取的选取是部分</h2>
<div class="box">鞠婧祎你好美！！！！！</div>
</body>效果:
::first-letter
- 选中某元素中第一行的第一个字母
- 必须是块级元素
<style>
/* ::first-letter 会选中某元素中第一行的第一个字母 */
.box1::first-letter {
font-size: 30px;
color: skyblue;
}
</style>
<body>
<h2>::first-letter 会选中某元素中第一行的第一个字母</h2>
<div class="box1">鞠婧祎</div>
</body>效果：
CSS选择器的权重计算
层叠性
- CSS全名叫“层叠式样式表”，层叠性是它很重要的性质
- 层叠性：多个选择器可以同时作用于同一个标签，效果叠加
<style>
div {
width: 300px;
height: 100px;
}
.para {
color: aliceblue;
background-color: skyblue;
}
#desc {
background-color: green;
}
</style>
<body>
<h2>层叠性</h2>
<div class="para" id="desc">我是一个div</div>
</body>效果：
层叠性的冲突处理
- 多个选择器定义同一元素的冲突问题
- CSS有严密的处理冲突规则
- id权重 > class权重 > 标签权重 > 通配符权重
<style>
/* id 权重 > class权重 > 标签权重 */
p {
color: red;
}
#arry {
color: skyblue;
}
.me {
color: green;
}
</style>
<body>
<h2>层叠性的冲突处理</h2>
<p class="me" id="arry">我是一个段落标签</p>
</body>效果：
复杂选择器权重计算
- 复杂选择器可以通过(id的个数，class的个数，标签的个数)的形式，计算权重
<style>
/* id 权重 > class权重 > 标签权重 */
/* （2,0,1）权重 */
#box1 #box2 p {
color: red;
}
/* （2,1,2）权重 三个中，此复合样式权重最高，生效*/
#box1 div.box2 #box3 p {
color: green;
}
/* （0,3,1）权重 */
.box1 .box2 .box3 p {
color: blue;
}
</style>
<body>
<h2>复杂选择器权重计算</h2>
<div class="box1" id="box1">
<div class="box2" id="box2">
<div class="box3" id="box3">
<p>我是一个段落标签</p>
</div>
</div>
</div>
</body>效果：
!important提升权重
- 如果我们需要将某个选择器的某条属性提升权权重，可以在属性后边写上!important
- 实际企业中，不允许使用!important，因为这会带来不经意的样式冲突
<style>
/* 权重 （0,1,2） */
.list ul li {
color: red;
}
/* 权重（0,1,0） */
/* !important 提升权重，生效 */
.desc {
color: skyblue !important;
}
</style>
<body>
<h2>!important 提升权重</h2>
<div class="list">
<ul>
<li>我是列表项</li>
<li class="desc">我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ul>
</div>
</body>效果：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
