CSS选择器分类（儿子选择器、序选择器、下一个兄弟选择器+）

CSS选择器分类（儿子选择器、序选择器、下一个兄弟选择器+）

<style>

/* 儿子选择器

只能在IE7浏览器以上的版本使用。IE7开始兼容，IE6不兼容（就是你写它，它不起作用，没有效果）。*/

div>p{

color: rgb(159, 130, 185);

}

</style>

</head>

<body>

<div>

<p>我是div的儿子</p>

</div>

<div>

<ul>

<li>

<p>我是div的重孙子</p>

</li>

</ul>

</div>

</body>

效果图：

<style>

/* 序选择器

序选择器，只能在IE8浏览器以上的版本使用。

IE8开始兼容；IE6、7都不兼容*/

/* 选择第一个li */

.list li:first-child{

color: aqua;

}

/* nth-child(3) 序号从1开始计数*/

.list li:nth-child(3){

color: brown;

}

/* nth-of-type(5) 序号从1开始计数*/

.list li:nth-of-type(5){

color: blue;

}

/* 选择最后一个li */

.list li:last-child{

color: blueviolet;

}

</style>

</head>

<body>

<ul class="list">

<li>你好，夏天</li>

<li>你好，夏天</li>

<li>你好，夏天</li>

<li>你好，夏天</li>

<li>你好，夏天</li>

<li>你好，夏天</li>

</ul>

</body>

效果图：

<style>

/* 下一个兄弟选择器

下一个兄弟选择器，只能在IE7浏览器以上的版本使用。IE7开始兼容，IE6不兼容。*/

/* 紧挨着的下一个 */

.con h3+p{

color: yellowgreen;

}

</style>

</head>

<body>

<div class="con">



<h3>标题3</h3>

<p>段落</p>

<p>段落</p>

<p>段落</p>

<h3>标题3</h3>

<p>段落</p>

<p>段落</p>

<p>段落</p>

<h3>标题3</h3>

<p>段落</p>

<p>段落</p>

<p>段落</p>

</div>

</body>

效果图：
相关阅读:
教给孩子们如何认真听讲
 java中的线程如何理解——精简
 实现动态页面的技术Servlet
创建springboot(五)文章发表项目
 启发式搜索: A*算法
 2023-09-20 LeetCode每日一题（拿硬币）
说说你对vue的mixin的理解，有什么应用场景
 开关控制开启和禁用Redis
金仓数据库KingbaseES客户端应用参考手册--16. reindexdb
Unity接入腾讯云
原文地址：https://blog.csdn.net/m0_71814235/article/details/125487207

CSS选择器分类（儿子选择器、 序选择器、下一个兄弟选择器+）