css选择器怎么选择子类的子类

html-css09

css选择器怎么选择子类的子类,第1张

首先，选择器有很多种，继承关系也有很多种像子类的子类可以这样写.collapse>ul>li{样式}为什么要这样写呢，因为你里面不仅仅有一个ul，所以使用父子选择器就可以确定你是给哪一个ul里面的li设置样式，如果是使用后代选择器的话，如：.collapse ul li{样式}，那么就会出现的是所有在collapse类里面的ul 的li 都使用了这个样式。

一个是子类选择器，一个是后代选择器。

div>p 是子类选择器，选择所有div的所有子元素中p元素（不包括孙子类元素）。

div p 是后代选择器，选择所有div中所包含的所有p元素(包括孙子类元素)。

<body>

<div id="header"><div class="red"></div></div>

<div id="content"></div>

<div id="footer"><div class="red"></div></div>

</body>

样式表↓

#header .red{}

#footer .red{}

用#的是ID选择器，命名时用id，在一个页面里不能重复出现。

用.的是类选择器，命名时用class，在一个页面里可以出现多次。

配合最上面那几句代码一起看，那这个样式表的意思就是id名为header的Div里面嵌了一个class名为red的Div

不知道你看得懂不？顺便和你分享一个资料，看下图。