选择器
标签选择器
就是标签的名字:
h1,p {
color:red;
font-size:50px;
}id选择器
#pp {
color:red;
font-size:50px;
}
<p id="pp">我是段落</p>类选择器
.h3 {
color:red;
font-size:50px;
}
.zhongyao {
text-decoration:underline;
}
<p class="teshu zhongyao">我是段落</p>
<h3 class="teshu">我是h3</h3>后代选择器
空格就表示后代 .div1 p 表示div的后代所有的 p，后代不代表是儿子：
.div p {
color：red;
}
<div class = 'div1'>
<p>我是p</p>
</div>
<!--p全部变红-->
<div class = 'div1'>
<ul>
<li>
<p>我是p</p>
</li>
<li>
<p>我是p</p>
</li>
<li>
<p>我是p</p>
</li>
</ul>
</div>即使在第2个 li 中加入了类标记，但是 p 标签全部会变红。可以看出，只要是 div1 的后代中有 p，那么均会起作用
只希望第2个 li 中的 p 标签会变红：
.div1 .li1 p {
color: red;
}
<div class = 'div1'>
<ul>
<li>
<p>我是pp</p>
</li>
<li class="li1">
<p>我是pp</p>
</li>
<li>
<p>我是pp</p>
</li>
</ul>
</div>下面的 p 标签依旧会变红：
div div p {
color: red;
}
<div class = 'div1'>
<div class = 'div2'>
<div class = 'div3'>
<div class = 'div4'>
<p>我是什么颜色？？？</p>
</div>
</div>
</div>
</div>交集选择器（从IE7开始兼容）
使类为 special 的h3标签变红：
<head>
<meta charset="UTF-8">
<title>交集选择器练习</title>
<style type="text/css">
h3.special {
color: red;
}
</style>
</head>
<body>
<h3></h3>
<h3 class="special">我是 h</h3>
<h3 class="special">我是 h</h3>
<p class="special">我是 p</p>
<p>我是 p</p>
</body>说明：h3和.special 之间没有空格，有空格就是后代选择器了。
可以连续交集：h3.special.imp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器练习</title>
<style type="text/css">
h3.special.imp {
color: red;
}
</style>
</head>
<body>
<h3></h3>
<h3 class="special">我是 h</h3>
<h3 class="special imp">我是 h</h3>
<p class="special">我是 p</p>
<p>我是 p</p>
</body>
</html>并集选择器
用，表示并集。
h3,li {
color:red;
}CSS3的一些选择器
儿子选择器（IE7开始兼容）
div>p {
color:red;
}序选择器（IE8开始兼容）
ul li:nth-child(n+2) {
color:red;
}
ul li:first-child {//选择第一个li
color:red;
}
ul li:last-child {//选择最后一个li
color:red;
}下一个兄弟选择器（IE7开始兼容）
h3+p {
color:red;
}
//表示紧跟着 h3后面的 p 会变红。
