上文介绍了一些常用的复合选择器，现在再补充一些不常用但有必要了解的一些复合选择器和属性选择器。

2、复合选择器

复合选择器补充
选择器	示例	示例说明
兄弟选择器（一）	#l1+li	选择和id值为l1的元素为兄弟元素(同级元素)的下一个li标签即li和id值为l1的元素为同级元素且li标签是id值为l1的标签的下一个标签
兄弟选择器（二）	#l1~li	选择和id值为l1的元素为兄弟元素(同级元素)的所有弟元素li标签即选中的li标签和id值为l1的元素为同级元素且这些li标签都在id值为l1的标签的后面

3、属性选择器

属性选择器：通过属性和属性值选择标签

语法：

[属性名及条件] {}

属性选择器
选择器	示例	示例说明
属性选择器（一）	[title]	选择含有属性title的所有标签
属性选择器（二）	[title="ab"]	选择含有属性title且值为“ab”的所有标签
属性选择器（三）	[title^="ab"]	选择含有属性title且值以“ab”开头的所有标签
属性选择器（四）	[title$="ab"]	选择含有属性title且值以“ab”结尾的所有标签
属性选择器（五）	[title*="ab"]	选择含有属性title且值包含“ab”的所有标签

4、伪类选择器

伪类选择器：选择处于某种特殊状态的元素，根据状态选择标签

常用的结构伪类选择器

没有CSS样式的html代码

<!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>CSS伪类选择器</title><link rel="stylesheet" href="index.css">
</head><body><div><p>乡愁</p><span>余光中</span><p>小时候，</p><span>乡愁是一枚小小的邮票。</span><p>我在这头，</p><span>母亲在那头。</span><p>长大后，</p><span>乡愁是一张张窄窄的船票。</span><p>我在这头，</p><span>新娘在那头。</span><p>后来啊，</p><span>乡愁是一方矮矮的坟墓。</span><p>我在外头，</p><span>母亲在里头。</span><p>而现在，</p><span>乡愁是一湾浅浅的海峡。</span><p>我在这头，</p><span>大陆在那头。</span></div></body></html>

代码效果

下面使用伪类选择器对诗歌样式进行修改

E元素是一个子元素，有父元素

E：first-child 选择作为第一个子元素的E元素

例：p：first-child 选中的是p元素，且该p元素满足是同级元素中的第一个元素标签

即先对E元素的所有同级元素进行编号，然后判断第一个元素是否为E元素，是则选中，否则选择失败

E：first-of-type 选择所有子元素中的第一个E元素

例：p：first-of-type 选中的是p元素，且该p元素是所有同级p元素中的第一个元素标签

即先将E元素同级元素的所有E元素单独拿出来进行编号，然后选择第一个E元素标签，不会选择失败

CSS代码

*{margin: 0;padding: 0;
}
/*使用伪类选择器修改样式
将标题设置字体：微软雅黑；字号：24像素；*/
p:first-child{font-family: "微软雅黑";font-size: 24px;color: red;
}
/*设置作者字体：微软雅黑；字号：20像素；
由下图1可以看出下面的选择器并没有选中标签*/
span:first-child{font-family: "微软雅黑";font-size: 20px;color: blue;
}/*正确的设置作者样式,效果见图2*/
span:first-of-type{font-family: "微软雅黑";font-size: 20px;color: blue;
}

代码效果

图1

图2

下面两个和上面两的大同小异

E：last-child 选择作为最后一个子元素的E元素

例：p：last-child 选中的是p元素，且该p元素满足是同级元素中的最后一个元素标签

即先对E元素的所有同级元素进行编号，然后判断最后一个元素是否为E元素，是则选中，否则选择失败

E：last-of-type 选择所有子元素中的最后一个E元素

例：p：last-of-type 选中的是p元素，且该p元素是所有同级p元素中的最后一个元素标签

即先将E元素同级元素的所有E元素单独拿出来进行编号，然后选择最后一个E元素标签，不会选择失败

CSS代码

*{margin: 0;padding: 0;
}
/*使用伪类选择器修改样式
将标题设置字体：微软雅黑；字号：24像素；字体颜色：红色*/
p:first-child{font-family: "微软雅黑";font-size: 24px;color: red;
}
/*设置作者字体：微软雅黑；字号：20像素；字体颜色：蓝色*/
span:first-of-type{font-family: "微软雅黑";font-size: 20px;color: blue;
}
/*给最后两句话设置字体：微软雅黑；字号：18像素；字体颜色：橙色；*/
span:last-child,
p:last-of-type{font-family: "微软雅黑";font-size:18px;color:orange;
}

代码效果

E：nth-child(m) 选择作为第m个子元素的E元素

例：p：nth-child(m) 选中的是p元素，且该p元素满足是同级元素中的第m个元素标签

即先对E元素的所有同级元素进行编号，然后判断第m个元素是否为E元素，是则选中，否则选择失败

E：nth-of-type(m) 选择所有子元素中的第m个E元素

例：p：nth-of-type(m) 选中的是p元素，且该p元素是所有同级p元素中的第m个元素标签

即先将E元素同级元素的所有E元素单独拿出来进行编号，然后选择第m个E元素标签，不会选择失败

m的一些特殊值：

n：表示选择所有的

2n+1：表示选择编号为奇数

2n：表示选择编号为偶数

CSS代码

*{margin: 0;padding: 0;
}
/*所有作为子元素的p标签修改样式如下*/
p:nth-child(n){font-family: "微软雅黑";font-size: 20px;color: red;
}
/*所有作为子元素的span标签修改样式如下*/
span:nth-of-type(n){font-family: "微软雅黑";font-size: 20px;color: blue;
}

代码效果

E：not(伪类选择器) 选择除了被伪类选择器选中的元素的E元素

例：p：not（p：fitst-child）选中的是除了作为第一个子元素的p标签的其他p标签，即除了作为第一个子元素的p标签不选，其他的p标签都选中

CSS代码

*{margin: 0;padding: 0;
}
/*选择除了标题和作者的所有元素修改样式*/
p:not(p:first-child){font-family: "微软雅黑";font-size: 20px;color: red;
}
span:not(span:first-of-type){font-family: "微软雅黑";font-size: 20px;color: blue;
}

代码效果

以上主要学习了结构伪类选择器，归类如下

E：first-child 选择作为第一个子元素的E元素

E：last-child 选择作为最后一个子元素的E元素

E：nth-child(m) 选择作为第m个子元素的E元素

E：first-of-type 选择作为子元素的第一个E元素

E：last-of-type 选择作为子元素的最后一个E元素

E：nth-of-type(m) 选择作为子元素的第m个E元素

E：not(结构伪类选择器) 选择除了被结构伪类选择器选中的元素的E元素

CSS之选择器（三）伪类选择器相关推荐

CSS之关系选择器、属性选择器、伪类选择器
一.关系选择器后代选择器:只要是这个元素的后代,样式都会发生变化,div下面的所有h1标签样式都会改变关系选择器:子代选择器,只改变子标签的样式 <!DOCTYPE html> < ...
CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器
CSS复合选择器建立在基础选择器上,对基本选择器进行组合形成的可以更准确.更高效的选择目标元素(标签) 包含:后代选择器.子选择器.并集选择器.伪类选择器一.后代选择器又称为包含选择器,可以选 ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
css选择器类型伪类选择器(详)
css选择器有八种: 1.标签选择器(如:body,div,p,ul,li). 2..类选择器(如:class="head",class="head_logo" ...
css中什么是伪类选择器？伪类选择器的简介
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
第一章：第三课选择器-状态伪类选择器[四]
前三节我们学习了form元素的状态伪类选择器,今天我们再来学习一下复选框和单选框的选择器,以下选择器Opera支持最好! :default选择器.:checked选择器和:indeterminate选 ...
复合选择器-链接伪类选择器（HTML、CSS）
复合选择器-链接伪类选择器(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
:is()伪类选择器 :where()伪类选择器
1.1 :is()伪类选择器在日常写代码中,经常遇见重复的同一个元素在不同的标签中的情况,这样我们想要统一写一个这个元素的样式时就会比较麻烦,稍加不注意就会出现错误.例如: li a, artcil ...

CSS之选择器（三）伪类选择器

2、复合选择器

3、属性选择器

4、伪类选择器

常用的结构伪类选择器

CSS之选择器（三）伪类选择器相关推荐

最新文章

热门文章