先上代码
<ul>
<li class = "header">
<a href = "#">一级标题</a>
<div>
<a href = "#">二级标题</a>
<a href = "#">二级标题</a>
<a href = "#">二级标题</a>
</div>
<p class = "test_p">段落</p>
</li>
<li class = "footer">
...
</li>
</ul>
后代选择器
1.说明：选择某个标签下的所有子标签
2.用法：把外层标签写在前面，内层标签写在后面，中间用空格分开，选择li标签下的所有a标签
<style>
li a{
color : red;
}
</style>
3.延展：可以用类名来代替标签选择，例如
<style>
.header a{
color : red;
}
</style>
子代选择器
1.说明：选择某个标签下的直属子标签
2.用法：用">"进行分割
3.示例: 选择一级标题
<style>
li > a{
color : green;
}
</style>
交集选择器
1.说明：表示既 又的关系，类似且的关系
2.示例：选一个类名叫header的li标签
<style>
li.header{
}
</style>
注意：类名不能以数字开头
并集选择器
1.说明：表示或的关系，应用于相同样式的标签
2.用法：用逗号进行连接
3.实例：将a标签和段落标签的背景颜色都设置为红色
<style>
a,p{
background-color : red;
}
</style>
也可以用类名进行替换
<style>
a,text_p{
background-color : red;
}
</style>
伪类选择器
1.说明：用于修改链接文本的颜色状态等(鼠标移动到文字身上时，点击链接跳转后，用户点击按下时)
2.用法：“:”加状态,必须按着规定顺序来，依次是":link"、":visited"、":hover"、":active" 顺序互换将不起作用
3.实例:
<head>
<style>
a:link{/*链接的基础状态*/
color: #333333;
font-size: 25px;
text-decoration: none; /*取消下划线 */
font-weight: 700;/*粗细*/
}
a:visited{/*链接点击过后的状态*/
color : red; /*链接点击后颜色变为红色*/
}
a:hover{/*鼠标经过时的状态*/
color:green;
}
a:active{/*用户选择按下时的状态*/
color:skyblue;
}
</style>
</head>
<body>
<a href = "#">链接</a>
</body>
网友评论