CSS层次选择器和属性选择器

1.层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素的所有匹配的F元素

层次选择器，就是通过元素之间的层次关系来选择元素的一种基础选择器。层次选择器在实际开发中也是相当重要的。常见的层次关系包括：父子、后代、兄弟、相邻。

1.1后代选择器

语法规范：

<style>（选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内）

E F {

color： blue

}

</style>

案例：

<style>li被ul包裹的情况下，即li为ul的后代级别，颜色变红）

ul li {

color：red

}

</style>

<ul>

    <li>我是ul里面的li</li>

</ul>

<div>（li被div包裹的情况下不会变红）

        <li>我是div里面的li</li>

</div>

<ul>(li是ul的孙子级别）

<p>

    <li>我是ul里面的li</li>

</p>

</ul>

1.2子选择器

语法规范：

<style>

E > F{

color:red

}

</style>

案例：

<style>(li元素中包裹的子元素p 显示为红色 >左右可以添加空格