WEB前端 -- 关系选择器、属性选择器

一、关系选择器包含：

1）包含选择器（A B）：如ul li{}

2）子选择器（A>B）

3）相邻选择器（A+B）

4）兄弟选择器（A~B）：注意对它后面的元素起作用

1.包含选择器

2.子选择器

<div>
<a href="#">子链接</a>
<p><a href="#">子孙链接</a></p>
</div>

div>a{ background-color:#F66; color:#C36}

3.相邻选择器（A+B）

A元素之后相邻的第一个B元素

4.兄弟选择器（A~B）

A元素之后所有的兄弟元素B

二、属性选择器

1）E[att]：选择属性为att的E元素

2）E[att="val"]：选择属性值为val的属性att的E元素

3）E[att~="val"]：选择属性att中属性值中有一个符合val的E元素

<div class="div1 divColor">第一个div</div>
<div class="div1 div2">第一个div</div>
<div class="Pmo div1">第一个div</div>
<div class="p11"></div>

div[class~="div1"]{color:blue;}即前3个div被选中，其中的字体变色

4）E[att^="val"]：选择属性值中以“val”开头的属性att的E元素

<div class="div1 divColor">第一个div</div>
<div class="div1 div2">第一个div</div>
<div class="Pmo div1">第一个div</div>
<div class="p11"></div>

div[class^="d"]{color:blue;}即前2个div被选中，其中的字体变色

5）E[att$="val"]：选择属性值中以“val”结尾的属性att的E元素

6）E[att*="val"]：属性值中包含val的属性att的E元素