CSS选择器

已于 2022-07-20 15:44:36 修改
阅读量198 收藏
点赞数 1
文章标签： css html 前端
于 2022-07-20 15:42:07 首次发布
star
本文链接：https://blog.csdn.net/qq_53386137/article/details/125892505
版权

文章目录

前言

CSS中，选择器用来指定网页上我们想要样式化的HTML元素。有 CSS 选择器提供了很多种方法，所以在选择要样式化的元素时，我们可以做到很精细的地步。本文详细介绍了css选择器的基础内容。

一、css选择器是什么？

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

每一条css样式定义由两部分组成，形式如下：<style>选择器{样式} </style> 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

二、使用步骤

1.后代选择器

代码如下（示例）：

<!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>后代选择器</title>
    <style>
        /*注释掉的两种写法也是相同效果*/
      /* .box em {
				color: red;
			} */
      .box ul li p em {
        color: blue;
      }
        /**/
      /* div ul li p em{
				color:aqua;
			} */
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          <p class="spec">我是段落 <em>强调文字</em></p>
        </li>
      </ul>
    </div>
    <p>我是段落</p>
    <p>我是段落</p>
  </body>
</html>

2.交集选择器

代码如下（示例）：

<!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>交集选择器</title>
    <style>
        /*p标签的顺序不可变，.damo和#pink可随意顺序*/
      p.damo#pink {
        color: pink;
      }
      p#red {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Hello World</p>
    <p class="damo" id="pink">这是pink色</p>
    <p class="damo">this is p3</p>
    <p id="red">这是红色</p>
  </body>
</html>

3.并集选择器

代码如下（示例）：

<!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>并集选择器</title>
    <style>
        /*同时选中h1，p，div*/
      h1,
      p,
      div {
        color: orange;
      }
    </style>
  </head>
  <body>
    <h1>this is h1</h1>
    <div>this is div</div>
    <p>this is p</p>
  </body>
</html>

并集选择器是将需要选择的选择器用逗号隔开

4.通用兄弟选择器

代码如下（示例）：

<!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>通用兄弟选择器</title>
    <style>
        /*选中h3之后的所有同级span，不是同级的无法选中*/
        h3~span{
            color:chartreuse;
            font-size:30px;
        }
    </style>
</head>
<body>
    <h3>this is h3</h3>
   <span>this is span1</span><br>
   <span>this is span2</span><br>
   <span>this is span3</span><br>
   <span>this is span4</span><br>
   <span>this is span5</span><br>
   <div><span>this is span6</span></div>
</body>
</html>

注意：选中的是h3之后的所有同级span,h3和span是兄弟关系

5.相邻兄弟选择器

代码如下（示例）：

<!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>相邻兄弟选择器</title>
    /*语法格式 a + b */
    <style>
        img+p{
            color:blue;
            font-size:30px;
        }
    </style>
</head>
<body>
    <div>
        <img src="" alt="">
        <p>this is p1</p>
        <p>thiis is p2</p>
    </div>   
</body>
</html>

注意：img和p同属一个父标签div.

选择的是紧跟img之后的一个标签.

6.子选择器

代码如下（示例）：

<!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>子选择器</title>
    <style>
      /* p是div的儿子 */
      div > p {
        color: red;
        font-size: 30px;
      }
      /* li是div的孙子 所以不会生效*/
      div > li {
        color: green;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div>
      <p>这段文字是红色</p>
      <p>这段也是红色</p>
      <ul>
        <li>这是绿色的吗？</li>
      </ul>
    </div>
  </body>
</html>

选择的是第一个元素的直接后代，孙子辈无法生效

7.:first-child

代码如下（示例）：

<!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>:first-child选择器</title>
    <style>
        /* 选择div的子元素p标签的第一个 */
        div p:first-child{
            font-size:large;
            color:green;
        }
    </style>
</head>
<body>
    <div>
        /*第一个子元素*/
        <p>this is p1</p>
        /*第二个子元素*/
        <p>this is p2</p>
        /*第三个子元素*/
        <p>this is p3</p>
        /*第四个子元素*/
        <p>this is p4</p>
        /*第五个子元素*/
        <p>this is p5</p>
    </div>
</body>
</html>

表示选择的是父元素的第一个子元素.

8.:last-child

代码如下（示例）：

<!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>:last-child选择器</title>
    <style>
        /* 选择div的子元素p标签的最后一个*/
        div p:last-child{
            font-size:large;
            color:green;
        }
    </style>
</head>
<body>
    <div>
         /*第一个子元素*/
        <p>this is p1</p>
        /*第二个子元素*/
        <p>this is p2</p>
        /*第三个子元素*/
        <p>this is p3</p>
        /*第四个子元素*/
        <p>this is p4</p>
        /*第五个子元素*/
        <p>this is p5</p>
    </div>
</body>
</html>

表示选择的是父元素的最后一个子元素.

9.:first-of-type

代码如下（示例）：

<!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>:first-of-type</title>
    <style>
      p:first-of-type {
        color: red;
        font-size: 60px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>this is span</span>
      <p>this is p1</p>
      <p>this is p2</p>
      <p>this is p3</p>
      <p>this is p4</p>
      <p>this is p5</p>
      <p>this is p6</p>
    </div>
  </body>
</html>

选择当前同类标签的第一个

10.:last-of-type

代码如下（示例）：

<!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>:last-of-type</title>
    <style>
        /*选择最后一个p标签*/
      p:last-of-type {
        color: green;
        font-size: 60px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>this is span 1</span>
      <p>this is p1</p>
      <p>this is p2</p>
      <p>this is p3</p>
      <p>this is p4</p>
      <p>this is p5</p>
      <span>this is span2</span>
      <p>this is p6</p>
      <span>this is span3</span>
    </div>
  </body>
</html>

选择当前同类标签的最后一个

11.:only-child

代码如下（示例）：

<!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>:only-child</title>
    <style>
      /* 选择的元素是其父级的唯一子元素 */
      p:only-child {
        font-size: 60px;
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <p>被选中了吗</p>
    </div>
    <div>
        <p>this is p1</p>
        <p>this is p2</p>
        <p>this is p3</p>
        <p>this is p4</p>
        <p>this is p5</p>
        <p>this is p6</p>
    </div>
    
  </body>
</html>

父级元素除了当前元素p不可以再有任何其他的子元素

12.:only-of-type

代码如下（示例）：

<!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>only-of-type</title>
    <style>
      /* 选择的元素是同类标签中的唯一一个 */
      div p:only-of-type {
        color: red;
        font-size: 60px;
      }
    </style>
  </head>
  <body>
    <div>
      <span>this is span</span>
      <span>this is span</span>
      <span>this is span</span>
      <p>被选中了吗</p>
      <span>this is span</span>
    </div>
  </body>
</html>

父元素的同类子元素中唯一的一个元素

不可再有第二个p标签，否则无效过

13.:nth-child

代码如下（示例）：

<!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>:nth-child</title>
    <style>
      /* 可以选择任意序号的子元素 */
        /*当前选择的是div下的第6个子元素*/
      div :nth-child(6) {
        color: orange;
        font-size: 60px;
      }
        /* 选择奇数序号的p元素
        div :nth-child(2n+1) {
        color: orange;
        font-size: 60px;
      }*/
    </style>
  </head>
  <body>
    <div>
      	<!-- 1-->
      <p>this is p1</p>
        <!-- 2-->
      <span>this is span</span>
        <!-- 3-->
      <p>this is p2</p>
        <!-- 4-->
      <p>this is p3</p>
        <!-- 5-->
      <p>this is p4</p>
        <!-- 6-->
      <p>this is p5</p>
        <!-- 7-->
      <p>this is p6</p>
        <!-- 8-->
      <p>this is p7</p>
        <!-- 9-->
      <p>this is p8</p>
        <!-- 10-->
      <p>this is p9</p>
    </div>
  </body>
</html>

选择父元素下的任意序号的子元素.

14.:nth-of-type

代码如下（示例）：

<!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>:nth-of-type</title>
    <style>
        p:nth-of-type(3){
            color:red;
            font-size:30px;
        }
    </style>
</head>
<body>
    	<!--1-->
    <p>this is p1</p>
    <span>this span</span>
   		 <!--2-->
    <p>this is p2</p>
   		 <!--3-->
    <p>this is p3</p>
   		 <!--4-->
    <p>this is p4</p>
    	<!--5-->
    <p>this is p5</p>
</body>
</html>

同种标签的任意序号元素.

15.:nth-last-child

代码如下（示例）：

<!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>nth-last-child</title>
    <style>
        /* 倒数第二个p标签 */
        p:nth-last-child(2){
            color:blue;
            font-size:50px;
        }
    </style>
</head>
<body>
    <div>
    <p>this is p1</p>
    <p>this is p2</p>
    <p>this is p3</p>
    <p>this is p4</p>
    <p>this is p5</p>
</div>
</body>
</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>nth-last-child</title>
    <style>
        /* 倒数第二个p标签 */
        p:nth-last-child(2){
            color:blue;
            font-size:50px;
        }
    </style>
</head>
<body>
    <div>
    <p>this is p1</p>
    <p>this is p2</p>
    <p>this is p3</p>
    <p>this is p4</p>
    <span>选中的位置被span占用</span>
    <p>this is p5</p>
</div>
</body>
</html>

16.:nth-last-of-type

代码如下（示例）：

<!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>nth-last-of-type</title>
    <style>
        /*倒数第二个p标签被选中*/
        p:nth-last-of-type(2){
            color:red;
            font-size:30px;
        }
    </style>
</head>
<body>
    <div>
        <p>this is p1</p>
        <p>this is p2</p>
        <p>this is p3</p>
        <!-- this is p4将会被选中 -->
        <p>this is p4</p>
        <span>this is span</span>
        <p>this is p5</p>
        <h3>this is h3</h3>
    </div>
</body>
</html>

同类型标签的倒序序号查找选择，不需要父元素

总结

以上就是今天要讲的内容，本文仅仅简单介绍了css选择器的使用语法规范。CSS 中，选择器由 CSS 选择器规范加以定义。就像是 CSS 的其他部分那样，它们需要浏览器的支持才能工作。

Duck不必︎
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
css选择子项同类型的索引对象
xdongll的专栏
07-18 1015
.jdemo li:nth-child(2){ background-color:red; } .jdemo li:nth-of-type(2){ background-color:yellow; } 我是文本 第一条 第二条 .jdemo li:nth-child(2)选择的是第一条节点， 而.jdemo li:nth-of-type(2)则选择的是第二条节点
css3中属性选择器测试
富在术数不在劳身,利在势局不在力耕。
03-18 376
<!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> .
五种排序算法（选择、冒泡、归并、快排、插入）的思路和代码。
weixin_45742441的博客
07-23 1187
五种常见排序算法说明分析
css如何选择相同class下的第一个class元素和最后一个元素?
热门推荐
hh1197787867的博客
08-29 13万+
如图，如果像选择类名为  class=exerciseInfo  中的第一个和最后一个div，做法如下： 选择第一个类名： .exerciseInfo: nth-of-type(1) { ... }; 选择最后一个类名： .exerciseInfo: last-child { ... }; 选择其中一个指定的类名：.exerciseInfo: nth-of-type(x) { ... }...
CSS的:nth-child选择器：如何选择相同元素中指定的元素
细节打败一切
06-28 4万+
现象： CSS中出现多个相同元素需要获取，依次给所有元素写class或者id又太麻烦 方法： 使用CSS的:nth-child选择器 一：首先写一个div容器 里面写了五个div 颜色都设置为了红色（为了方便区分） 二：获取div中的第一个 改变他的颜色 使用:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。 括号里面的数...
css选择器
总结前端开发中遇到的问题，分享前端知识
08-25 5971
通配选择器（Universal selector）作用：选中页面中的所有元素;元素选择器（Type selector）也叫类型选择器、标签选择器
JSoup CSS选择器用法大全
08-15
备查，搞爬虫开发者必备
CSS教程之css选择器 、属性、值
10-30
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。 每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。 值在冒号（不是等号）后面，分号分离属性。
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
CSS的四种基本选择器和四种高级选择器
Jack
07-11 9万+
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。 CSS的选择器分为两大类：基本选择题和扩展选择器。 基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议使用） 下面来分别讲一讲。 1、标签选择器：选择器的名字代表html页面上的标签...
CSS实现经典打字小游戏《生死时速》
坚信万物皆可切的切图仔
06-11 1144
游戏开始后，警察在3秒后开始出动，如果警察抓到小偷（位置重合）即游戏失败。你需要根据页面底部的对话正确输入单词，即可让小偷不断运动，拉开与警察的距离，如果在输入全部对话前没有被警察逮到，即闯关成功。整个游戏其实实现起来很简单，只需要在设置offset路径动画的基础上加一点点细节就完成了。学如逆水行舟，不进则退～
发博客了发博客
最新发布
Cherry_garcia的博客
06-17 212
stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。-- localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。-- 1.IE盒子模型||怪异盒子模型 box-sizing: border-box;-- 1.标准盒子模型 box-sizing: content-box;弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 406
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
CSS从入门到精通——背景样式
m0_73614626的博客
06-12 1318
当页面较长时，滚动页面，背景图像也会随之滚动。从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用。请在右侧的编辑框中修改。属性设置元素的背景属性，常见的网页背景图就是这样设置的。文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。
day02 CSS基础
Liang_z_的博客
06-11 973
今日内容：CSS概念及基本使用、box模型、元素显示方式
web css选择器
03-09
以下是一些常见的CSS选择器： 1. 元素选择器：通过元素的标签名选择元素。例如，`p`选择所有的`<p>`元素。 2. 类选择器：通过元素的类名选择元素。类名以`.`开头。例如，`.container`选择所有具有`container`类的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Duck不必︎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值