CSS选择器

最新推荐文章于 2024-04-09 11:29:06 发布
原创 最新推荐文章于 2024-04-09 11:29:06 发布 · 349 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3选择器

本文详细介绍了CSS中的各类选择器，包括基本选择器、层次选择器、属性选择器及伪类选择器等，通过实例帮助读者更好地理解每种选择器的作用与应用场景。

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>

CSS选择器.pdf
10-09
在CSS选择器的体系中，存在多种不同类型的选择器，每种都有其特定的用途和使用场景。 首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中...
CSS3的选择器
琳
11-16 406
CSS选择器，主要是用来确定html的树形结构中的DOM元素节点。主要分为三部分： 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 #id ID选择器 选择指定ID属性值为“id”的任意类型的元素
css中选取子元素
生存不忘生活
08-08 6082
1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-ch
解决css :last-child不生效的问题
Dante_al的博客
11-09 1257
像这样的双循环结构，如果只给class名为"line"的盒子设置:last-child,则会全部生效，无法实现给最后一个盒子单独设置样式,这时候要考虑双循环带来的影响。步骤：先选择父级，然后选择第一层循环下的子级最后一个单元，之后在设置最后一个要改变的样式。
css 定义最后一个孩子,如何在CSS中选择具有特定类名的“最后一个孩子”？
weixin_36209848的博客
08-04 3718
test1test2test3test4如何选择具有类名称的“最后一个孩子”：list？ul li.list:last-child{background-color:#000;}我知道上面的例子不起作用，但是有什么类似的东西可以工作吗？重要：a)我不能使用ul li:nth-child(3)，因为它可能发生在第四或第五位。b)没有JavaScript。任何帮助将不胜感激，谢谢！答案我建议你利用这样...
常用伪类选择器之 :last-child()、:first-child()、nth-child()、:nth-of-type()
Wod_7的博客
05-22 3526
在CSS中，常规选择器可以根据元素的类型、类、ID、指定的属性，或者它们的父级或子级进行选择。与常规选择器不同，伪类选择器可以根据元素的状态或位置，而不是它们的属性或标签名称来选择元素。在伪类选择器中，:nth-child、:last-child、:first-child、:nth-of-type()是其中比较常用的几个。
CSS选择器-.pdf
02-28
此外，CSS 还提供了分组选择器，可以将多个选择器分组在一起，并应用同样的样式。例如： ```css h2, p {color: gray;} ``` 这将将 h2 和 p 元素的颜色设置为灰色。 分组选择器可以将任意多个选择器分组在一起，对此...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
【CSS3】的语法【四】
最新发布
lianafany的博客
04-09 3212
但是，如果使用first-child选择器与last-child选择器，这个多余的class属性就不需要了。如果使用nth-child选择器与nth-last-child选择器，不仅可以指定某个父元素中第一个子元素以及最后一个子元素的样式，还可以针对父元素中某个指定序号的子元素来指定样式。将指定序号书写在“nth-child”或“nth-last-child”后面的括号中，如“nth-child（3）”表示第三个子元素，“nth-last-child（3）”表示倒数第三个子元素。
css权重继承的理解
sadwang9的博客
12-11 507
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: :last-child 与 :first-child的坑
热门推荐
weixin_39015132的博客
07-23 6万+
原文链接 前言 前端开发中，我们有时候要为第一个或最后一个元素设置进行某些特殊的操作。CSS默认为我们提供了:last-child和:first-child选择器， 但是在实际使用中，要特别需要注意一个点。 开始 :last-child:指定属于其父元素的最后一个子元素的 p 元素的背景色。（来自W3C的官方描述） 实践 HTML: <div class="div1"&gt...
:last-child | CSS属性参考
初晴
09-19 1952
CSS :last-child伪类选择器用于匹配父元素中的最后一个子元素。 :last-child伪类选择器仅仅会匹配某个父元素中的最后一个子元素，例如： article>   p>     第一个段落...   p>   p>     第二个段落...   p> article>
css -- 为什么:last-child 无效?
Dark_programmer的博客
02-15 1万+
在产品需求中，总有对第一个或者最后一个同类元素进行特殊的样式处理。 如果使用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 5738
CSS3 :last-child 选择器 :last-child 选择器用来匹配父元素中最后一个子元素。 eg:指定父元素 ul 中最后一个 li 元素，并设置背景颜色： li:last-child { background-color: #ff0000; }
last-child获取不到最后一个元素
pukun888的博客
06-09 1134
last-child 这个选择器是根据你获取最后一个元素的父类来获取 如图，你要获取所有excerpt元素的最后一个（第二个红框框），那么它就会从当前元素的父类（第一个红框框）中开始寻找最后一个为excerpt的元素 .excerpt:last-child{ border-bottom:2px solid #51c4d3; } 如果找到最后一个元素的class为excerpt,那么成立，反之则不成立，所以你怎么设置都无效，没法改变最后一个元素的样式 ...
给最后一个class设置样式
qq_41353397的博客
12-06 732
使用:last-child .divClass:last-child{ border: none; }
元素选择器（一）
iteye_2179的博客
09-14 121
$(document).ready(function(){ //选择 id为 one 的元素 $('#btn1').click(function(){ $('#one').css("background","#bfa"); }); //选择 class 为 mini 的所有元素 $('#btn2').click(function(){ ...
掌握CSS选择器的在线学习游戏分享
### 知识点：CSS选择器学习 CSS (Cascading Style Sheets) 是一种样式表语言，用于描述 HTML 或 XML 文档的呈现格式。通过 CSS，我们可以为网页添加样式，控制布局，以及对元素进行定位。选择器是 CSS 的核心概念之...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值