演示CSS中常用的选择器，并着重了解2种伪类选择器
伪类选择器 两种的区别
第一种是选择一个父元素，操作下面所有的子元素
第二种是指明一个子元素的名称，只能操作指定的子元素
收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器*/
b{color: red}
/*ID选择器*/
#box1{color: gray}
/*class 类选择器*/
.box2{color: pink}
/*层级选择器*/
.box3 .box4{color: brown;}
/*属性选择器*/
span[class="box5"]{color: aqua;}
/*群组选择器*/
.box7,.box6{background-color: #888888}
/*相邻选择器*/
.box2 + li{color: brown}
/*兄弟同级选择器*/
#box1 ~ li{color: blueviolet}
/*=============================伪类选择器*/
/*选择ul下面的第一个子元素*/
ul :first-child{color: blueviolet}
/*选择ul下面的最后一个子元素*/
ul :last-child{color: blue}
/*明确指定第几个子元素*/
ul :nth-child(2){color: aqua}
/*倒序明确指定第几个子元素 例如正数是第3个 倒数是第二个*/
ul :nth-last-child(2){color: cadetblue}
/*----------------------------------*/
/*选择P标签下面的第一个span标签*/
p span:first-of-type{color: #3487ff}
/*选择P标签下面的最后一个span标签*/
p span:last-of-type{color: #888888}
/*明确指定第几个元素*/
p span:nth-of-type(2){color: cadetblue}
/*倒序明确指定第几个元素*/
p span:nth-last-of-type(2){color: brown}
/*伪类选择器 两种的区别*/
/*第一种是选择一个父元素，操作下面所有的子元素*/
/*第二种是指明一个子元素的名称，只能操作指定的子元素*/
</style>
</head>
<body>
<b class="box7">PHP中文网</b>
<hr>
<b class="box3">
<span class="box4">专业PHP</span>
<span class="box5">开发教学</span>
</b>
<hr>
<div class="box6">
<p>加油</p>
<p>学习</p>
</div>
<ol>
<li id="box1">Java</li>
<li>asp</li>
<li>html</li>
</ol>
<hr>
<ol>
<li class="box2">PHP</li>
<li>node</li>
<li>css</li>
</ol>
<hr>
<ul>
<li>net</li>
<li>go</li>
<li>net</li>
<li>go</li>
</ul>
<hr>
<p>
<span>我要学习</span><br>
<span>网站编程</span><br>
<span>加油吧</span><br>
<span>努力努力努力</span>
</p>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
