css 的几个选择器

CSS2017年8月29日

+ 相邻兄弟选择器

~ 兄弟选择器不相邻也没关系

<!DOCTYPE html>
<html>
<head>
    <title>ThankIT</title>
</head>
<body>
<style type="text/css">
    .case-1 h1+p {
        color :#e47b7b;
    }
    .case-2 h1~p {
        color :#e47b7b;
    }
</style>
<div class="case-1">
    <h1>h1 相邻兄弟选择器</h1>
    <p>我是紧邻 h1 的 p 我变红</p>
    <p>我不是紧邻的 p 我没有效果</p>
</div>
<div class="case-2">
    <h1>h1 兄弟选择器 不相邻也没有关系</h1>
    <p>我是紧邻 h1 的 p </p>
    <div>我是个 div </div>
    <p>我不是紧邻的 p </p>
</div>
</body>
</html>

> 直接后代

X Y 所有的后代

<!DOCTYPE html>
<html>
<head>
    <title>ThankIT</title>
</head>
<body>
<style type="text/css">
    ul {
        list-style: none;
        margin:0;
        padding: 5px;
    }
    .case-3 > ul {
        border:10px solid #f9f2f4;
    }
    .case-4 ul {
        border:10px solid #f9f2f4;
    }
</style>
<div class="case-3" style="margin-bottom: 15px;">
    <ul>
        <li>直接后代</li>
        <li>直接后代</li>
        <li>直接后代</li>
        <li>
            <ul>
                <li>二代</li>
                <li>二代</li>
                <li>二代</li>
            </ul>
        </li>
    </ul>
</div>

<div class="case-4">
    <ul>
        <li>直接后代</li>
        <li>直接后代</li>
        <li>直接后代</li>
        <li>
            <ul>
                <li>二代</li>
                <li>二代</li>
                <li>二代</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

参考

30个你必须记住的CSS选择符

发表评论取消回复