CSS高级选择器

最新推荐文章于 2024-03-05 14:35:41 发布

dawn_8300

最新推荐文章于 2024-03-05 14:35:41 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/weixin_43903813/article/details/112390240

版权

7 篇文章 0 订阅

订阅专栏

高级选择器

相邻兄弟选择器

同辈

只有一个向下

p1会变色

        .c1+p{
            background: green;
        }
    </style>
</head>
<body>
<p class="c1">p0</p>
<p>p1</p>

通用兄弟选择器，当前选中元素的向下的所有同辈元素

p1 p2 p3都会变色

        .c1~p{
            background: green;
        }
    </style>
</head>
<body>
<p class="c1">p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>

带冒号的都是伪类过滤

ul li:first-child{
    background: #b4a53b;
}
ul li:last-child{
    background: red;
}

选中当前p元素的父级元素，然后选中父级元素的第1个子元素，并且是当前元素才生效。

/*不变色*/
p:nth-child(1){
    background: blueviolet;
}
/*变色*/
p:nth-child(2){
    background: chocolate;
}

h>p0</h>
<p>p1</p>
<p>p2</p>
<p>p3</p>

p:nth-of-type(2){
    background: deepskyblue;
}

选中父元素，下的p元素的第二个

与p:nth-child(2)区别选择父元素下的第二个元素，并且是p元素才生效

P:nth-of-type(2) 选择父元素下的p元素的第二个

id和class结合

=，*=，^=,$=

标签名为a ，[]中写属性名，属性名=属性值

a[id]{
    background: #f8da02;
}
a[id=windows]{
    background: cyan;
}

*=表示包含这个元素即可

a[class*=links]{
    background: #042626;
}

关注