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>

效果图：
相关阅读:
Linux下的一些工具
 【EXCEL】SUMIFS多次条件筛选数据
 操作系统MIT6.S081：Lab4-＞Trap
java基于SpringBoot+vue的宠物销售商城网站 elementui
【信息融合】基于BP神经网络和DS 证据理论实现不确定性信息融合问题附matlab代码
 P01914100尹自杨
 【华为机试真题 JAVA】分糖果-100
BOM模型与DOM模型
 C语言MFC导出dll回调函数方法详解
 【Docker】了解Docker Desktop桌面应用程序，TA是如何管理和运行Docker容器（3)
原文地址：https://blog.csdn.net/m0_71814235/article/details/125487207

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