小毛

css选择器
<!DOCTYPE html> <html lang="en"> &l...
扫描右侧二维码阅读全文
19
2019/07

css选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*.p1 {*/
            /*color: brown;*/
        /*}*/
        /*div p {             !*后代选择器,同时更改孙子辈*!*/
            /*color: blue;*/
        /*}*/
        /*div>p{*/
            /*color: aqua;    !*子带选择器,更改儿子的颜色,孙子辈也会随之改,孙子随父辈的变化而变化*!*/
        /*}*/
        /*#ul1>li {*/
            /*list-style: none;*/
            /*color: aquamarine;!*子代选择器用>表示,子代选择如果改变子代的颜色,字体大小,*/
            /*那么孙子辈会随着儿子辈变化而变化,因为对于儿子辈来说,孙子辈是儿子辈的儿子,儿子辈是孙子辈的爸爸,孙子会随着儿子的变化而变化,这叫子随父代。*/
            /*更改list-style:none;除字体大小,颜色以外,其他的css样式不会被孙子辈继承。*/
        /*}*/
    .p1+p{                          /*相邻选择器*/
         color: darkgoldenrod;
        font-size: 20px;
    }

    </style>
</head>
<body>
<div>
<p class="p2">我是P2段落标签,我是p1相邻标签,我在p1标签上方</p>
<p class="p1">我是P1段落标签</p>
<p class="p3">我是P3段落标签,我是P1相邻标签,我在p1标签下方</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签,我是div的儿子,div是我爸爸<span>我是段落里面的标签,我是div的孙子,div是我爷爷</span></p>
<span>我是一个文本标签</span>
<span>我是一个文本标签</span>

    <ul id="ul1">
        <li>我是div的儿子</li>
        <li>我是div的儿子</li>
        <li>我是div的儿子</li>
        <li>
            <ul>
                <li>我是div的孙子</li>
                <li>我是div的孙子</li>
                <li>我是div的孙子</li>
            </ul></li>
    </ul>
</div>
</body>
</html>

css相邻选择器

代码如下:

<html>
<head>
<style>
#p2+p{
    color:green;
}
</style>
</head>
<body>
<p id="p1" >我是p1标签,我是p2的相邻标签,我在p2标签的上一行代码中</p>
<p id ="p2">我是p2标签,</p>
<p id = "p3">我是p3标签,我是p2的相邻标签,我在p2下方一行</p>
</body>
</html>

相邻选择器

使用相邻选择器,代码如下,

p2+p

代码意思就是更改标签为#p2标签相邻的P标签,颜色更改为绿色,

得到的结果
执行效果如下

相邻选择器代码执行效果

成功的更改了,p2相邻的p标签-p3的颜色,

原因,html代码执行过程是,从上向下执行,执行到p2时候,说明p1已经执行完毕了,就不会在执行p1了,找她相邻标签就会向下执行,找与他相邻的p标签,然后改变颜色。
这就是相邻标签选择器,

兄弟选择器

<html>
<head>
<style>
#p2~p{
    color:green;
}
</style>
</head>
<body>
<p id="p1" >我是p1标签,我是p2的兄弟标签</p>
<p id ="p2">我是p2标签,</p>
<p id = "p3">我是p3标签,我是p2的兄弟标签</p>
<p id = "p3">我是p32标签,我是p2的兄弟标签</p>
</body>
</html>

兄弟标签选择器的代码是 #p2~p

p2~p{

color:green;

}

会和他相邻的下部同级别的兄弟标签,不论几行,只要是兄弟标签,全部更改样式

得到结果

兄弟标签.jpg

群组标签选择器

ul,li,a,p,p1,p2{
color:green
}

就是多个标签都有共同的属性
则可以
ul,li,a,p,p1,p2{
color:green
}

一次给多个标签进行css赋值,

所有标签设置属性可以用*{
color:green
}

加个*就可以了,一次性给所有标签赋值属性

Last modification:July 20th, 2019 at 01:41 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment