CSS选择器 ~ + >

CSS选择器 ~ + >

~(波浪号):A ~ B表示选择A标签后的所有B标签,但是A和B标签必须有相同的父元素。

<style>
        h3~h5{
            color: red;
        }
</style>

<body>
    <div>
        <h1>我是第1</h1>
        <h2>我是第2</h2>
        <div>
            <h3>我是第3</h3>
            <h5>我会变红</h5>
            <h4>我是第6</h4>
            <h5>我会变红</h5>
        </div>
        <h4>我是第4</h4>
        <h5>我是第5</h5>
    </div>
</body>

+(加号)
加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素,且A和B必须拥有相同的父元素,所选到的仅为一个B元素标签。

<style>
        h3+h5{
            color: red;
        }
</style>

<body>
    <div>
        <h1>我是第1</h1>
        <h2>我是第2</h2>
        <div>
            <h3>我是第3</h3>
            <h5>我会变红</h5>
            <h4>我是第6</h4>
            <h5>我是测试行</h5>
        </div>
        <h4>我是第4</h4>
        <h5>我是第5</h5>
    </div>
</body>

>(大于号)
大于号表示某个元素的下一代元素。A>B指选择A元素里面的B元素,其中B元素是A元素的第一代。


```javascript
<style>
        .myDiv>h3{
            color: red;
        }
</style>

<body>
    <div>
        <h1>我是第1</h1>
        <h2>我是第2</h2>
        <div class="myDiv">
            <h3>我会变红</h3>
            <div>
                <h3>我也是测试行</h3>
            </div>
        </div>
        <h4>我是第4</h4>
        <h5>我是第5</h5>
    </div>
</body>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值