CSS03（层次选择器）

最新推荐文章于 2024-07-23 16:10:02 发布
最新推荐文章于 2024-07-23 16:10:02 发布
阅读量270 收藏
点赞数
分类专栏： CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51224492/article/details/121494524
版权

后代选择器

在某个标签后的所属所有特定标签

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<span>
    <h1>h1</h1>
</span>
<ul>
    <li>
        <p>p4</p>
        <h2>h2</h2>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

css代码：

ul li p{
    background-color: deepskyblue;
}

测试访问：
在这里插入图片描述

子选择器

选中某个标签后直属的所有特定标签

html代码不变

css代码：

ul>li{
    background-color: deepskyblue;
}

测试访问
在这里插入图片描述

相邻兄弟选择器

选中的标签后面的第一个同级该标签（两个标签必须是同种标签）

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<span>
    <h1>h1</h1>
</span>
<ul>
    <li>
        <p>p4</p>
        <h2>h2</h2>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

css代码

/*相邻兄弟选择器*/
.active +p{
    background-color: deepskyblue;
}

测试访问
在这里插入图片描述

通用选择器

选中标签后的所有同级该标签

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<p>111</p>
<span>
    <h1>h1</h1>
</span>
<ul>
    <li>
        <p>p4</p>
        <h2>h2</h2>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

css代码

/*通用选择器*/
.active~p{
    background-color: deepskyblue;
}

测试访问
在这里插入图片描述

悬梁锥刺股
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3-层次选择器
Wjiahui的博客
02-04 503
CSS3-层次选择器
css层次选择器的理解
NEOSONG
10-15 1762
1、css后代选择器 （1）语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。 （2）语法：h1>em{color:red;} 仅仅选择直接子元素em，子元素中若有其他元素，则不再选择 2.prev+next（前+后）选择器，如li+p{}，则选择紧跟
CSS|层次选择器
Alan_Lowe
07-25 3316
CSS|层次选择器 1.分类 层次选择器分为四种类型： 后代选择器 子选择器 相邻兄弟选择器 通用选择器 我们先构建一个网页： body内放5个段落，第五个段落中放一个无序列表： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> </head> <body> <p&
CSS 四种层次选择器
weixin_45672377的博客
12-14 1491
实例结构图 后代选择器 格式：元素 标签{} 特点 作用域为元素所有子代标签 实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器</title> <style> body p{ background: red; } </sty
CSS学习04之层次选择器
ZXS1002的博客
02-10 452
回顾 什么是选择器 在 CSS 中，选择器是选取需设置样式的元素的模式。 选择器的作用 CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。 方便我们对元素添加样式。 层次选择器 基本选择器又分为三种方式： 后代选择器 子选择器 相邻选择器 通用选择器 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层次选择器&l
CSS之层次选择器
denggongming的博客
09-26 638
CSS中的四个层次选择器
CSS层次选择器[四种]
abc98526的博客
02-07 4069
1.后代选择器 后代选择器是包含了后面的所以标签如: 2.子选择器 3.相邻选择器 4.相邻选择器进阶版
CSS常见选择器
Python老吕的博客
02-28 1394
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。
CSS的三种层次选择器
qq_52523963的博客
06-06 588
一、后代选择器 在某个元素的后面，全部应用。二、子选择器 在某个元素的一代应用。三、相邻兄弟选择器 当前选中元素向下的一个同代元素。四、通用选择器当前选中元素向下的所有同代元素。具体如下：...
CSS--选择器--使用/教程
IT利刃出鞘的博客
11-06 1294
原文网址： 简介 说明 本文介绍CSS的选择器用法。包括：优先级，基本选择器，分组选择器，层次选择器，伪类选择器，伪元素选择器。 官网 CSS 选择器 - CSS（层叠样式表） | MDNCSS 参考 - CSS（层叠样式表） | MDN 优先级 简介 给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候CSS选择器优先级的问题了。 详解 CSS选择器的优先...
CSS3层次选择器实例
08-22
wrote based on a book
CSS学习之二 选择器
09-25
通过组合使用这些选择器，可以实现更复杂的样式规则，如选择器的层次关系、伪类和伪元素等，从而实现更加细致和动态的页面设计。记住，选择器的优先级是：ID选择器 > 类选择器 > 元素选择器 > 通配选择器，优先级高...
css串联选择器和后代选择器使用方法
09-25
后代选择器则更为广泛，适用于任何元素嵌套在另一个元素内部的情况，无论它们之间的层次有多深。这使您可以灵活地对页面的复杂结构进行样式化，例如，为某个类别的所有子级元素设置样式。 理解并熟练运用这两种选择...
高效的CSS选择器编写指南
09-25
- **后代选择器 (e.g., ul li)**：效率较低，特别是当层次深时。 - **子选择器 (e.g., parent > child)**：比后代选择器快，但仍然不如更直接的选择器。 - **相邻兄弟选择器 (e.g., elem1 + elem2)**：用于选取...
css 串联选择器和后代选择器介绍及示例
09-25
总之，串联选择器和后代选择器是CSS选择器中的重要组成部分，它们帮助开发者精确控制页面元素的样式，从而实现复杂而富有层次的网页布局和设计。了解并熟练运用这两种选择器，将极大地提升CSS编写效率和代码的可维护...
CSS3雷达扫描效果
u011626414的专栏
07-23 472
这个示例创建了一个非常基础的雷达扫描效果。您可以根据需要调整颜色、大小、旋转速度等属性，以及添加更多的细节和效果。要创建一个CSS3的雷达扫描效果，我们可以使用CSS的动画（元素在2秒内从0度旋转到360度，从而实现连续的扫描效果。属性设置为50%，这会将扫描线的顶部置于雷达圆的中心，而。的圆形div作为雷达的主体，并在其中放置了一个名为。则会将其向上移动自身高度的一半，从而实现垂直居中。的垂直线，这条线将作为雷达的扫描线。，确保旋转的起点在元素的顶部中心。进行旋转，模拟雷达扫描的效果。
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
css选择器不要第一个
09-30
CSS选择器有很多种类型,包括基本选择器,层次选择器,属性选择器,伪类选择器和伪元素选择器等。在基本选择器中，我们可以使用通用元素选择器(*)匹配任何元素，使用标签选择器(E)来匹配所有使用特定标签的元素。除此之外，还有类选择器(.class)、ID选择器(#id)、属性选择器([attribute])和伪类选择器(:pseudo-class)等。如果你不希望第一个选择器出现在你的回答中，你可以从第二个选择器开始说明。例如，你可以从标签选择器(E)开始描述： 2. E 标签选择器，匹配所有使用E标签的元素 3. .info 类选择器，匹配所有拥有.info类的元素
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值