02css选择符

css的选择符

  <div id="father" class="box">
        父亲
        <div id="son1" class="box1">
            孩子1
        </div>
        <div id="son2" target class="box2">
            孩子2
        </div>
        <p>我是p标签</p>
        <ul target="hhh">
            孩子3
            <li>孙子1</li>
            <li>孙子2</li>
        </ul>
        <ol target="hhh">
            孩子3
            <li>孙子1</li>
            <li>孙子2</li>
        </ol>
        <ul>
            孩子4
            <li><a href="https://www.baidu.com/">孙1</a> <a href="sss">女</a></li>
            <li><a href="https://www.baidu.com/">孙2</a> <a>男</a></li>
        </ul>
    </div>
<div id="father" class="box">
        父亲
        <div id="son1" class="box1">
            孩子1
        </div>
        <div id="son2" target class="box2">
            孩子2
        </div>
        <p>我是p标签</p>
        <ul target="hhh">
            孩子3
            <li>孙子1</li>
            <li>孙子2</li>

        </ul>
        <ol target="hhh">
            孩子3
            <li>孙子1</li>
            <li>孙子2</li>
        </ol>
        <ul>
            孩子4
            <li><a>孙1</a> <a>女</a></li>
            <li><a>孙2</a> <a>男</a></li>
        </ul>

一、id选择器

#father{

}

选择id=“father”的元素

二、类选择器

.box{

}

选择class="box"的元素

三、标签选择器

div{

}

选择所有div元素

四、相邻选择器

p+ul{

}

选择紧挨着p标签的第一个ul标签

五、子选择器

ul>li{

}

选择所有父级是ul的li元素

六、后代选择器

li a{

}

选择li里面的所有a标签

七、通配符选择器

*{

}

选择所有元素

八、属性选择器

[target]{

}

选择所有带有target属性的元素

[target=‘hhh’]{

}

选择所有带有target属性=‘hhh’的元素

ul[target=‘hhh’]{

}

选择所有带有target属性=‘hhh’的ul元素

九、伪类选择器

a:hover{

}

当鼠标在链接上面时

li:nth-child(2){

}

选择li为第二个孩子的li标签

CSS3新增伪类

ul:first-of-type{
    
}
//选择每一个属于其父元素的首个ul元素的每一个ul元素

ul:first-last-type{
    
}
//选择每一个属于其父元素的最后一个ul的每一个ul元素

ul：only-of-type{
    
}
//选择属于其父元素唯一一个ul的每一个ul元素

ul：only-child{
    
}
//选择属于其父元素唯一子元素的每一个ul元素