复合选择器
CSS2.1
前提:样式继承
后代选择器:空格
ul b{
color:pink;
}
交集选择器:连续书写
交集没有继承性
li.mystyle2{
background-color:pink;
}
并集选择器:逗号
h3,h4{
color:yellow
}
CSS3(类似于JQuery)
- 层次选择器
–后代选择器:空格
–子代选择器:>
–相邻同辈选择器(只对后面的元素有效):+
h4+h1
{
color:blue;
}
–通用同辈选择器(只要是同辈都可以):~
h4~h1
{
color:blue;
}
- 结构伪类选择器
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*设置第一个li标签子类*/
li:first-child{
color:blue;
}
/*设置最后一个li标签子类*/
li:last-child{
color:red;
}
/*设置第n个li标签子类*/
li:nth-child(2){
color:green;
}
li:nth-child(3){
color:pink;
}
/*设置第一个p标签格式*/
p:first-of-type{
background-color:yellow;
}
/*设置最后一个p标签格式*/
p:last-of-type{
background-color:blue;
}
/*设置第n个p标签格式*/
p:nth-of-type(2){
background-color:pink;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
<li>111111</li>
</ul>
</body>
</html>
- 属性选择器
input[name]{/*设置有name元素的标签的背景色为黄色*/
background-color:yellow;
}
input[name="username"]{ /*设置name=username的元素格式*/
color:blue;
}
input[name^=a]{/*选中name以a开头的元素*/
background-color:pink;
}
input[name$=b]{/*选中name以b结尾的元素*/
background-color:gray;
}
input[name*=k]{/*选中name内含k的元素*/
background-color:red;
}