CSS选择器

最新推荐文章于 2023-05-22 19:43:03 发布
最新推荐文章于 2023-05-22 19:43:03 发布
阅读量302 收藏
点赞数
分类专栏： css3 文章标签： css3选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web_note/article/details/53255896
版权

CSS选择器，主要是用来确定html的树形结构中的DOM元素节点。主要分为三部分：

一、基本选择器

选择器 类型 功能描述
* 通配选择器 选择文档中所有的html元素
E 元素选择器 选择指定的类型的html元素
#id ID选择器 选择指定ID属性值为“id”的任意类型的元素
.class 类选择器 选择指定的class属性值为“class”的任意类型的任意多个元素
selector1，selector2 群组选择器 将每一个选择器匹配的元素集合并
1.通配选择器的运用：它是用来选择文档中所有的元素或选择某个元素下的所有元素

  • *{marigin:0;padding:0;}/*指的是文档中所有的元素的margin值和padding值为0*/
  • ul *{background:blue;}/*指的是ul元素里的所有标签的背景颜色为蓝色，这里选择的对象是ul的所有子代元素；书写时ul与*号之间有个空格*/

2.元素选择器的运用：这是最常见的选择器了，选择的是文档的元素

  • p{color:red;}/*指的是文档中所有p标签的内容颜色为红色*/

3.ID选择器的运用：选择ID名为“id”的任意元素

  • #box{background:yellow;}/*选择ID名为box的元素，让它的背景为黄色*/

4.类选择器的运用：选择class名为“class”的任意元素（可多个元素）

  • .box{background:yellow;}/*选择class名为box的一个或多个元素，让它的背景为黄色*/

5、并列选择器（群组选择器）

  • p,ul,div{margin:0;padding:0;}/*选择文档中所有的p元素、ul元素、div元素的外边距和内边距都为0*/

二、层次选择器

选择器 类型 功能描述
E    F 后代选择器 选择匹配的F元素，且F元素被包含在匹配的E元素内
E > F 子选择器 选择匹配的F元素，且F元素是E元素的子元素
E + F 相邻兄弟选择器 选择匹配的F元素，且F元素是E元素后面紧邻的兄弟元素
E ~ F 通用选择器 选择匹配的F元素，且F元素是E元素后面的所有兄弟元素

三、属性选择器

选择器 功能描述
E[attr] 选中具有attr属性的E元素
E[attr=val] 选中具有attr属性，并且属性值为val的E元素
E[attr|=val] 选中具有attr属性，并且属性值为val或以val-开头
E[attr~=val] 选中具有attr属性，并且属性值包含val的E元素，该属性值必须以空格隔开
E[attr*=val]通配符 选中具有attr属性，并且属性值包含val的E元素
E[attr^=val]起始符 选中具有attr属性，并且属性值以val开始的E元素
E[attr$=val]结束符 选中具有attr属性，并且属性值以val结束的E元素
1、E[attr]

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat]{background:red;}/*选择属性名为cat的元素*/
</style>
</head>
<body>
<p cat="leo">leo</p>
<p cat="dp">杜鹏</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
</body>
</html>

2、E[attr=val]

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat=leo]{background:red;}
</style>
</head>
<body>
<p cat="leo">leo</p>
<p cat="dp">杜鹏</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
</body>
</html>
3、 E[attr|=val]

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat|=b]{background:#C3C;}
</style>
</head>
<body>
<p cat="b-leo">leo</p>
<p cat="bleo">杜鹏</p>
<p cat="b-leo">子鼠</p>
<p cat="g-xm">小美</p>
<p cat="b">无名氏</p>
</body>
</html>

4、E[attr~=val]

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat~=old]{background:red;}
</style>
</head>
<body>
<p cat="leo old">leo</p>
<p cat="dp">杜鹏</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
</body>
</html>

5、E[attr*=val]通配符

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat*=d]{background:#C3C;}
</style>
</head>
<body>
<p cat="bleo old">leo</p>
<p cat="bdp">杜鹏</p>
<p cat="bzM">子鼠</p>
<p cat="gxm">小美</p>
</body>
</html>

6、E[attr^=val]起始符

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat^=g]{background:pink;}
</style>
</head>
<body>
<p cat="bleo old">leo</p>
<p cat="bdp">杜鹏</p>
<p cat="bzM">子鼠</p>
<p cat="gxm">小美</p>
</body>
</html>

7、E[attr$=val]结束符

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat$=M]{background:#CC0;}
</style>
</head>
<body>
<p cat="bleo old">leo</p>
<p cat="bdp">杜鹏</p>
<p cat="bzM">子鼠</p>
<p cat="gXM">小美</p>
</body>
</html>

四、伪类选择器

选择器 功能描述
E ： first-child 作为父元素的第一个子元素的E元素
E ： last-child 作为父元素的最后一个子元素的E元素
E ： root
E  F：nth-child（n） 选中的F元素是E元素的第n个子元素
E  F： nth-last-child（n） 选中的F元素是E元素的倒数第n个子元素
E ： nth-of-type（n） 选择父元素内具有指定类型的第n个E元素
E ： nth-last-of--type（n） 选择父元素内具有指定类型的倒数第n个E元素
E ： first-of-type 选择父元素内具有指定类型的第1个E元素
E ： last-of-type 选择父元素内具有指定类型的倒数第1个E元素
E ： only-child 选择父元素内只包含一个子元素,且该元素是E元素
E ： only-of-type 选择父元素内只包含一个类型的子元素，且该元素是E元素
E ： empty 选择没有子元素的元素
1、E ： first-child

2、E ： last-child

<!DOCTYPE HTML>
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {
height: 30px;
border: 1px solid #000;
}
p:first-child {
background: red;
}
/*
p:nth-child(2) 找p标签父级下的第二个子元素，并且这个元素还的是p标签
 
p:nth-of-type(2) 找p标签父级下的第二个p元素
 
:first-child==:nth-child(1)
:last-child==:nth-last-child(1)
:first-of-type==nth-of-type(1)
:last-of-type==nth-last-of-type(1)
*/
</style>
</head>
 
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>
</body>
 
</html>

3、E ： root

[html]  view plain  copy
 print ?
  1. DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>菜鸟教程(runoob.com)</title>  
  6.         <style>  
  7.             :root {  
  8.                 background: #ff0000;  
  9.             }  
  10.         </style>  
  11.     </head>  
  12.     <body>  
  13.         <h1>This is a heading</h1>  
  14.     </body>  
  15. </html>    

4、 E  F：nth-child（n）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {height: 30px;border: 1px solid #000;}
h2:nth-child(1) {/*查找p标签的父元素的第一个孩子,并且该标签刚好是p标记.*/ 
background: red;}
</style>
</head>
<body>
<h2>h2</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</body> 
</html>

5、E  F： nth-last-child（n）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {height: 30px;border: 1px solid #000;}
body *:nth-last-child(2n) {background: red;}
/*p:nth-child(2) 找p标签父级下的第二个子元素，并且这个元素还的是p标签*/
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>
</body>
</html>

6、E ： nth-of-type（n）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {height: 30px;border: 1px solid #000;}
p:nth-of-type(4) {background: red;}
/*p:nth-child(2) 找p标签父级下的第二个子元素，并且这个元素还的是p标签
 p:nth-of-type(2) 找p标签父级下的第二个p元素*/
</style>
</head> 
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>
</body> 
</html>

7、E ： nth-last-of--type（n）

<!DOCTYPE HTML>
<html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {height: 30px;border: 1px solid #000;}
p:nth-last-of-type(2) {background: red;}
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>
</body> 
</html>

8、E ： first-of-type

:first-of-type==nth-of-type(1)

9、E ： last-of-type

:last-of-type==nth-last-of-type(1)

10、E ： only-child

11、E ： only-of-type

12、E ： empty

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {height: 30px;border: 1px solid #000;}
p:empty {background: red;}
span {display: block;height: 20px;}
p *:only-of-type {background: yellow;}
p *:only-child {background: blue;}
/*p:nth-child(2) 找p标签父级下的第二个子元素，并且这个元素还的是p标签
p:nth-of-type(2) 找p标签父级下的第二个p元素
:first-child==:nth-child(1)
:last-child==:nth-last-child(1)
:first-of-type==nth-of-type(1)
:last-of-type==nth-last-of-type(1)
*/
</style>
</head>
<body>
<p></p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p><span></span></p>
<h1>h3</h1>
<p>
<span></span>
<span></span>
<a href="#">链接</a>
</p>
<p>p5</p>
</body> 
</html>


五、文本新增伪类

选择器 功能描述
E ：： first-letter 选择文本块的第一个字母
E ：： first-line 选择文本快的第一行
E ：： before    和E ：： after 主要用于清除浮动
E ：： selection 选中的E元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{width:300px;border:1px solid #000;font:12px/30px "宋体";padding:10px;}
p:first-line{ background:red;}
p:first-letter{ font-size:30px;}
p::selection{background:#F60;color:#690;}
p:before{ content:"cat"; display:block; border:1px solid #000;}
p:after{ content:"cat"; display:block; border:1px solid #000;}
</style>
</head>
<body>
<p>前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁，
在 HTML5&CSS3 被炒至沸沸扬扬的今天，全面系统的掌握此项技能，是加重技术含金量的重要砝码！
</p>
</body>
</html>

小小樟鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS3的选择器
琳
11-16 347
CSS选择器，主要是用来确定html的树形结构中的DOM元素节点。主要分为三部分： 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 #id ID选择器 选择指定ID属性值为“id”的任意类型的元素
常用伪类选择器之 :last-child()、:first-child()、nth-child()、:nth-of-type()
Wod_7的博客
05-22 2026
在CSS中，常规选择器可以根据元素的类型、类、ID、指定的属性，或者它们的父级或子级进行选择。与常规选择器不同，伪类选择器可以根据元素的状态或位置，而不是它们的属性或标签名称来选择元素。在伪类选择器中，:nth-child、:last-child、:first-child、:nth-of-type()是其中比较常用的几个。
css 定义最后一个孩子,如何在CSS中选择具有特定类名的“最后一个孩子”？
weixin_36209848的博客
08-04 3495
test1test2test3test4如何选择具有类名称的“最后一个孩子”：list？ul li.list:last-child{background-color:#000;}我知道上面的例子不起作用，但是有什么类似的东西可以工作吗？重要：a)我不能使用ul li:nth-child(3)，因为它可能发生在第四或第五位。b)没有JavaScript。任何帮助将不胜感激，谢谢！答案我建议你利用这样...
css权重继承的理解
sadwang9的博客
12-11 440
css与它的优先级、继承 CSS选择器：---------------------------------------------------- 1. 标签选择器 2. 类选择器 class 可以给多个标签指定相同的class名，也可以给一个标签添加多个class名。 目的是：可以把一些标签的相同样式放在同一个 类 中，这些标签都可以调用这个公共的类，然后再调用自己独有的类。从而节省css代码，也方便统一修改样式。 3. id选择器 唯一性 4. 伪
解决css样式中first-child和last-child不生效的问题
LYQ
11-29 1万+
前端项目需要使用v-for指令来渲染一个问题回复列表，列表的第一和最后需要显示不同的样式，便使用到了first-child和last-child这两个CSS属性，在编码后发现 last-child 和 first child 中的样式不生效，经过查找资料后解决了这个不生效问题的同时也加深了印象。 首先我们得明白first-child和last-child是干什么用的： first-child选择器用于选取属于其父元素的首个子元素的指定选择器。 last-c...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS选择器.pdf
10-09
在CSS选择器的体系中，存在多种不同类型的选择器，每种都有其特定的用途和使用场景。 首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中...
四大类CSS选择器的使用说明
01-31
### 四大类CSS选择器的使用说明 #### 一、基础选择器 **基础选择器**主要包括四种类型：标签（元素）选择器、类选择器、ID选择器以及通配符选择器。 1. **标签选择器**：用于选取文档中的特定HTML标签。例如： `...
CSS: :last-child 与 :first-child的坑
热门推荐
weixin_39015132的博客
07-23 5万+
原文链接 前言 前端开发中，我们有时候要为第一个或最后一个元素设置进行某些特殊的操作。CSS默认为我们提供了:last-child和:first-child选择器， 但是在实际使用中，要特别需要注意一个点。 开始 :last-child:指定属于其父元素的最后一个子元素的 p 元素的背景色。（来自W3C的官方描述） 实践 HTML: <div class="div1"&gt...
:last-child | CSS属性参考
初晴
09-19 1779
CSS :last-child伪类选择器用于匹配父元素中的最后一个子元素。 :last-child伪类选择器仅仅会匹配某个父元素中的最后一个子元素，例如： article>   p>     第一个段落...   p>   p>     第二个段落...   p> article>
css -- 为什么:last-child 无效?
Dark_programmer的博客
02-15 9717
在产品需求中，总有对第一个或者最后一个同类元素进行特殊的样式处理。 如果使用js来判断哪个是第一个、最后一个也并不是不可以。 但是，完全属于css的管理范围为什么要去使用js呢？ css选择器出场！ 下面仅展示:last-child效果 1.期望效果 代码展示: <template> <div class="root-container"> <div class="father"> <div class="child" v-for="item
【css】:last-child 选择器
羽裳醉月的博客
03-18 5601
CSS3 :last-child 选择器 :last-child 选择器用来匹配父元素中最后一个子元素。 eg:指定父元素 ul 中最后一个 li 元素，并设置背景颜色： li:last-child { background-color: #ff0000; }
last-child获取不到最后一个元素
pukun888的博客
06-09 1039
last-child 这个选择器是根据你获取最后一个元素的父类来获取 如图，你要获取所有excerpt元素的最后一个（第二个红框框），那么它就会从当前元素的父类（第一个红框框）中开始寻找最后一个为excerpt的元素 .excerpt:last-child{ border-bottom:2px solid #51c4d3; } 如果找到最后一个元素的class为excerpt,那么成立，反之则不成立，所以你怎么设置都无效，没法改变最后一个元素的样式 ...
给最后一个class设置样式
qq_41353397的博客
12-06 564
使用:last-child .divClass:last-child{ border: none; }
元素选择器（一）
iteye_2179的博客
09-14 79
$(document).ready(function(){ //选择 id为 one 的元素 $('#btn1').click(function(){ $('#one').css("background","#bfa"); }); //选择 class 为 mini 的所有元素 $('#btn2').click(function(){ ...
大学生创业计划书(30)-两份资料.doc
08-20
大学生创业计划书(30)-两份资料.doc
学习DXP编辑多个对像
最新发布
08-20
DXP编辑多个对像
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值