标签：
子元素选择器：
div>p{background：yellow；}
相邻的后兄弟选择器（必须相邻）
h1+p{padding-top：20px；}
后兄弟选择器（同级的当前元素后面的元素）
div~p{color：red；}
属性选择器：（属性可以自己定义，例如：class=abc）
[abc=value] 属性值为value的元素
[abc~="value1"]属性值包含value1的元素（多个值之间用空格区分）
[abc*="val"]模糊匹配 属性值中包含val的元素
[abc^="val"]匹配属性值以val开头
[abc$="val"]匹配属性值以val结尾
[abc=val]属性值为val的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3选择器 | 属性选择器</title>
<style type="text/css">
/*li { border: 1px solid red; }*/
/*li.active { border: 1px solid red; }*/
/*li[class] { border: 1px solid red; }*/
/*li[class=‘active‘] { border: 1px solid red; }*/
/*li[class=‘active clear‘] { border: 1px solid red; }*/
/*li[class~=‘active‘] { border: 1px solid red; }*/
/*li[abc] { border: 1px solid red; }*/
/*li[abc~=‘d‘] { border: 1px solid red; }*/
li[class*=‘c‘] { border: 1px solid red; }
/*li[class^=‘act‘] { border: 1px solid red; }*/
/*li[class$=‘ve‘] { border: 1px solid red; }*/
/* li[class|=‘act‘] { border: 1px solid red; }*/
</style>
</head>
<body>
<ul class="list">
<li>
<h2>第一级菜单</h2>
<ul>
<li>
<h2>第二级菜单</h2>
</li>
<li class="act">
<h2>第二级菜单</h2>
</li>
<li>
<h2>第二级菜单</h2>
</li>
<li class="act focus">
<h2>第二级菜单</h2>
</li>
<li>
<h2>第二级菜单</h2>
</li>
</ul>
</li>
<li abc="d f"><h2>第一级菜单</h2></li>
<li class="clear active"><h2>第一级菜单</h2></li>
<li><h2>第一级菜单</h2></li>
<li class="abc"><h2>第一级菜单</h2></li>
</ul>
</body>
</html>
伪类选择器：
input：disabled
a:hover/:active/a:visited/a:link
:before/:after
:nth-child(n)第n个元素（p:nth-child,限制标签名）
:nth-last-child(n)倒数第n个元素（p:nth-last-child）
:nth-of-type(n)所有符合选择器要求的第n个元素
:nth-last-of-type()同上，倒序
:first-child/:last-child第一个/最后一个子元素
p:first-child第一个子元素并且标签名必须为p
p:last-child最后一个子元素，并且标签名必须为p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*body { background: pink; }*/
/*:nth-child(2) {
border: 1px solid #333;
}
div :nth-child(3){
color: green;
}*/
/*div:nth-child(3){
color: green;
}*/
/*div p:nth-child(2){
div 的第二个子标签，并且标签类型为 p标签的元素
color: green;
}*/
/*:first-child {
font-size: 20px;
}*/
/*p:first-child {
font-size: 20px;
}*/
/*div :first-child {
font-size: 30px; color: red;
}*/
/* :nth-child(3) {
color: red; font-size: 20px;
}*/
/*:nth-of-type(3) {
color: red; font-size: 20px;
}*/
.div1 :nth-child(odd) {
color: red;
}
/*#div1 .div2*/
/*
伪类选择器：
*/
</style>
</head>
<body>
<div class="div1">
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>fdsf123131313</div>
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>
<span>fdsf123131313</span>
<p>fsafaffafaf</p>
<div>123131313</div>
</div>
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>fdsf123131313</div>
</div>
<div class="div2">
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>fdsf123131313</div>
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>
<span>fdsf123131313</span>
<p>fsafaffafaf</p>
<div>123131313</div>
</div>
<h2>fdsafafafaf</h2>
<p>123131231</p>
<div>fdsf123131313</div>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/llz1314/p/5738595.html
