css--层次选择器_css 层级选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45204987/article/details/97952942

本文详细解析了CSS中层次选择器的应用，包括直接子元素选择器、相邻兄弟选择器及通用兄弟选择器的使用方法，通过实例展示了如何精确地定位页面元素。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        body,ul{
            margin: 0;
        }
        .nav {
            background: #007de8;
            color: #853e02;
        }

        ul {
            list-style: none;
        }

        .nav > ul::after {
            content: "";
            display: block;
            clear: both;
        }

        .nav li {
           line-height: 3em;
        }

        .nav > ul > li {
            float: left;
            width: 100px;
            text-align: center;
            position: relative;
        }

        .nav > ul > li > ul {
            display: none;
            position: absolute;
            background-color: pink;
            color: #007f80;
            width: 100%;
        }

        .nav > ul > li:hover > ul {
            display: block;
        }
        /*.product>ol>li.ios~*{
            color: red;
        }*/
        .product>ol>li:nth-child(2n+1){
            color:greenyellow;
                 }
        .dd>
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><p>JavaEE</p>
            <ul>
                <li>CoreJava</li>
                <li>Linux</li>
                <li>XML</li>
                <li>oracle</li>
            </ul>
        </li>
        <li>
            <p>javaee</p>
            <ul>
                <li>CoreJava</li>
                <li>Linux</li>
                <li>XML</li>
                <li>oracle</li>
            </ul>
        </li>
        <li>
            <p>TOT</p>
        </li>
    </ul>
</div>
<div class="content">
    <div class="product">
        <ol type="I">
        <li>1</li>
        <li>2</li>
        <li>4</li>
        <li class="ios">5</li>
        <li>6</li>
        <li>7</li>
        </ol>
    </div>
</div>
</body>
</html>