后代选择器
什么是后代选择器
找到标签的后代标签,设置属性。
格式:
标签名称1 标签名称2 ....{属性:值;}
先找到名称叫做标签1的标签,然后再这个标签下面去查找所有名称叫做标签2的标签一直找下去,然后设置属性。
注意点:
1.后代选择器必须使用空格隔开。
2.后代不仅仅是儿子,也包括孙子。。。。只要是放在这个标签内的都是后代。
3.后代选择器不仅仅可以使用标签的名称,还可以使用其他选择器,比如使用类/id名称来代替标签名。但是必须有后代。标签可以用类名或者/id名,但是#和.都不能漏掉,中间还有一个空格。
.cl .ca {color: greenyellow;}
4.可以有多层嵌套,如果不能使用id/class选择器,需要标签一层层寻找。
div ul li p {color: aqua;}
<div class="cl"><ul><li><p class="ca">我是段落</p></li></ul></div>
先在div中找ul ,ul中再找li,最后li里找p标签。层层递进。
子选择器
什么是子选择器
先找到指定标签中所有特定的直接子元素,然后设置属性。比如div标签下有4个p标签,其中两个红色,另外两个蓝色,如果不能直接使用class/id属性,后代选择器无法满足,所以有了子选择器。
格式
标签名称1>标签名称2{属性:值;}
div>p {color: skyblue;}
<p>我是段落</p><div class="cl"><p>我是段落</p><ul><li><p>我是段落</p></li></ul><p>我是段落</p></div><p>我是段落</p>
div标签中的p全部为skyblue颜色。
注意点
1.子元素选择器只会找儿子,不会查找其他被嵌套的标签。
2.子元素选择器之间需要>符号连接,之间不能有空格。
3.子选择器不仅仅可以选择使用标签名称,还可以使用其他选择器。
4.子元素选择器可以一直递归下去。
id选择器
#dv>p {color: skyblue;}
class选择器
.cl>p {color: green;}
标签选择器(递归)
div>ul>li>p {color: brown;}
子选择器和后代选择器
区别
1.后代选择器使用空格作为连接符号,子选择器使用>作为连接符号。
2.后代选择器会选中指定标签中,所有的特定标签(包括儿子、孙子,从孙子。。。。),而子选择器只选中特定标签中的儿子标签。
共性
1.后代选择器和子选择器都可以使用标签名称/id名称/class名称来作为选择器名称。
2.后代选择器和子选择器都可以通过各自的连接符号一直递归下去