高级选择器:
层次选择器:
后代选择器 E F
选中E标签下所有F元素
示例:
<style type="text/css">
div a{
color: red;
}
</style>
<body>
<div>
<a>这是后代选择器</a>
</div>
</body>
子选择器 E>F
选中E标签标签下子元素F
示例:
<style type="text/css">
div a{
color: red;
}
div>p{
color: blue;
}
</style>
<body>
<div>
<a>这是后代选择器</a>
<p>p 标签</p>
<a><p>这是a 标签</p></a>
</div>
</body>
相邻兄弟选择器 E+F
选中E标签相邻的兄弟元素F(E标签下)
通用兄弟选择器 E~F
选中E标签下所有的兄弟元素F
.h21~h2{
color: blue;
}
<h2 class="h21">如何做菜?</h2>
<p>
1.点击餐厅中的炉灶,打开菜谱,选择自己要做的食物后,进行烹饪。不断点击炉灶,直到食物进入自动烹饪阶段;<br />
2.每道菜所需要制作的步骤和烹饪的时间不一样,你可以根据自己的时间和偏好来进行选择,还会有各地特色食物供应哦;<br />
3.烹饪完毕的食物要及时端到餐台上,否则过一段时间会腐坏;<br />
4.食物放在餐台上后,服务员会自动端给顾客,顾客吃完后会付钱给你。<br />
</p>
<h2>如何经营餐厅?</h2>
<p>
1.自己做老板,当大厨,雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少,工作的时间越短心情越好;好友间亲密度越高,可雇用的时间越长;<br />
2.随着等级的升高,可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加;<br />
3.餐桌椅的摆放位置也很有讲究,它会影响顾客和服务员行走路程。<br />
</p>
<h2>如何吸引顾客?</h2>
结构伪类选择器
常用的几个伪类选择器示意图:
小结:
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
E F:nth-child(n)在父级里从一个元素开始查找,不分类型
E F:nth-of-type(n)在父级里先看类型,再看位置
示例:
li p:nth-of-type(1){
font-size: 14px;
color: #640000;
}
li p:nth-of-type(2){
font-size: 14px;
color: blue;
}
列举最后一个列表:
<li>
<img src="img/aqy/img4.png" />
<h3>山海经之赤影传说</h3>
<p>娜扎张翰再度联手</p>
<p>点击次数:242445次</p>
</li>
属性选择器
E[attr]
E[attr=val]
E[attr^=val]
E[attr$=val]
E[attr*=val]
注意!:
有些浏览器中val值是纯数字时需要加" "号才能正常使用(转为字符形式)!