标签：
1.选择符:
a.关系选择符：
1).E F ：包含选择符，选择所有被E包含的F元素。例如：
<style>
p h1 {
color:red;
}
</style>
<body> <p> <h1>嘻嘻</h1> <h1>嘻嘻</h1> </p> </body>
2).子选择符：E > F，选择所有作为E元素的子元素F。例如：
<style>
p > font {
color:red;
}
</style>
<body> <p> <font>嘻嘻</font> <font><a>嘻嘻</a></font> </p> </body>
3).相邻选择符：E + F，选择紧贴在E元素之后的F元素。例如：
<style>
p + h1 {
color:red;
}
</style>
<body> <p> <h1>嘻嘻</h1> <a>嘻嘻</a> </p> </body>
4).兄弟选择符：E~F,选择E元素之后所有兄弟元素F。例如：
<style>
p ~ h1 {
color:red;
}
</style>
<body> <p> <h1>嘻嘻</h1> <h1>嘻嘻</h1> </p> </body>
5).id和class选择符：id/class选择器可以为标有特定ID/class的元素指定样式。例如：
<style>
#nav {
font-size:12px;
}
.header {
background:red;
}
</style>
<body>
<p id="nav">哈哈</p>
<header class="header">呵呵</head>
</body>
6).伪类选择符：这里列举一些常用的。例如：
a标签的伪类选择符：
<style> a:link { color:red; } a:visited { color:blue; } a:hover { color:yellow; } a:active { color:green; } </style> <body> <a>我是a标签</a> </body>
input标签的伪类选择符:
<style>
input:focus {
outline:1px solid red;
}
iuput:checked {
color:red;
}
input:disable {
font-weidh:20px
}
input:enable {
font-weight:30px;
}
</style>
<body>
<input type="text" name="" value="" id="" / >
<input type="text" name="" value="" id="" checked/ >
<input type="text" name="" value="" id="" disable/ >
<input type="text" name="" value="" id="" enable/ >
</body>
<style>
ul li:first-child {color:red;}
ul li:last-child {color:blue;}
ul li:nth-child(3) {color:yellow;}
ul li:nth-last-child(2) {color:green;}
</style>
<body>
<ul>
<li>第一个li</li>
<li>第一个li</li>
<li>第一个li</li>
<li>第一个li</li>
</ul>
</body>
伪类：E：target，匹配相关URL指向的E元素,和锚点差不多。例如：
<style>
a:target {
outline:2px dashed blue;
}
</style>
<body>
<a href="#aaa" id="aaa">嘻嘻</a>
<a href="#bbb" id="bbb">哈哈</a>
<a href="#ccc" id="ccc">嘿嘿</a>
</body>
实现奇偶行样式：
<style>
//奇数行样式；
.ul2 li:nth-child(odd){background:red;}
//偶数行样式;
.ul2 li:nth-child(even){background:#0F7CCF;}
//3的倍数;
.ol2 li:nth-child(3n){background:yellow;}
</style>
<body>
<ul class="ul2">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
</ul>
<ol class="ol2">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
<li>test6</li>
</ol>
</body>
标签：
原文地址：http://www.cnblogs.com/lss-bk/p/5755498.html
