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元素