css3 元素属性伪类选择器

最新推荐文章于 2020-12-09 16:29:48 发布

白菜喵

最新推荐文章于 2020-12-09 16:29:48 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/eebaicai/article/details/79750839

版权

html示例

    <div id="ee">
        <p></p>
        <p></p>
        <p>白菜csstest</p>
        <p id="one">白菜csstest</p>
        <p name="ee">白菜csstest</p>
        <p id="baicai">白菜csstest</p>
        <p class='baicaii'>白菜csstest</p>
        <p>白菜csstest</p>
        <p>白菜csstest</p>
        <p>白菜csstest</p>
        <div>
            <p>我也是p标签</p>
            <p>我也是p标签</p>
            <p>我也是p标签</p>
        </div>
    </div>

css

        /* 子代和子孙p */
         #ee p{
                color:red;
                font-size: 25px;
            }
        /* 直接后代(子代)p */
            #ee>p{
                color:green;
            }
        /* 相邻p */
            #one+p{
                color: blue;
            }
        /* 同级p */
            #one~p{
                color: pink;
            }
        /* 带有id的p */
            #ee p[id]{
                color: purple;
            }
        /* name是ee的p */
            #ee p[naem="ee"]{
                color: white;
            }
        /* id以i结尾的p */
            #ee p[id$=i]{
                color: khaki;
            }
        /* class包含ii的p */
            #ee p[class*=ii]{
                color: #161FF2;
            }
        /* 根标签(html) */
            :root{
                background: red;
            }
        /* 内容为空的p */
            #ee p:empty{
                width: 200px;
                height: 40px;
                background: blue;
            }
        /* 当前活动的p */
            p:target{
                background:yellow;
            }

        /* 排除id是one的p */
            #ee p:not(#one){
                background: green;
            }
        /* 选择的p */
            p::selection{
                background: purple;
            }