13、层次选择器 - HTML5&CSS3.0基础部分-xyphf_html5层次选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/xyphf/article/details/74306555

本文介绍了CSS中的层次选择器、子元素选择器、下一个兄弟节点选择器及元素以后所有节点选择器的应用实例。通过具体的HTML结构展示如何使用这些选择器来定位页面元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
#div1 div{background:red;}/*obj.getElementsByTagName*/
</style>
</head>
<body>

<div id="div1">
    <div>div1 div</div>
    <ul>
         <li></li>
         <li></li>
         <li>
            <div>div1 div</div>
          </li>
         <li></li>
         <li></li>
    </ul>
    <ol>
         <li></li>
         <li></li>
         <li>
            <div>div1 div</div>
          </li>
         <li></li>
         <li></li>
    </ol>
</div>

</body>
</html>

2.子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
#div1 > div{background:red;}/* 一级子元素*/
</style>
</head>
<body>

<div id="div1">
    <div>div1 div</div>
    <ul>
         <li></li>
         <li></li>
         <li>
            <div>div1 div</div>
          </li>
         <li></li>
         <li></li>
    </ul>
    <div>div1 div</div>
    <ol>
         <li></li>
         <li></li>
         <li>
            <div>div1 div</div>
          </li>
         <li></li>
         <li></li>
    </ol>
    <div>div1 div</div>
</div>
</body>
</html>

3.下一个兄弟节点选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
.active + li{background:red;} /*=>obj.nextSiblings*/
</style>
</head>
<body>
 <ul>
     <li></li>
     <li></li>
     <li class="active">active</li>
     <li></li>
     <li></li>
</ul>
</body>
</html>

4.元素以后所有节点选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
.active ~ li{background:red;} /*obj.nextAll(); 元素之后所有节点选择器*/
</style>
</head>
<body>
 <ul>
     <li></li>
     <li></li>
     <li class="active">active</li>
     <li></li>
     <li></li>
</ul>
</body>
</html>