一、id及class选择符
id和class的名称是由用户自定义的。id号可以唯一地标识html元素，为元素指定样式。id选择符以#来定义。
1、id选择符 注：在网页中，每个id名只能是唯一不重复的。
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #title2{ /*#后的是id名称*/ background-color: red; font-family: "微软雅黑"; } </style> </head> <body> <h2 id="title1">我是标题2</h2> <h2 id="title2">我也是标题2</h2> </body>
2、class选择符 注：class与id不同，class可以重复使用，定义一类的元素。class选择符以.来定义。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .pp{ /*将同一个class名的元素都选中了*/ background-color: blue; font-family: "微软雅黑"; } </style> </head> <body> <p class="pp">这是个段落</p> <h3 class="pp">这是个标题</h3> </body> </html>
这是个段落
这是个标题
二、伪类选择符
伪类选择符比较多，如下表所示：
下面简单举几个例子说明：
（一）、E：link、E：hover、E：visited
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1 a:link{ background-color: red; /*设置链接a在未访问前的样式为红色背景色*/ } } #div1 a:visited{ background-color: blue;/*设置链接a在访问后的样式的背景色为蓝色*/ } #div1 a:hover{ text-decoration: none; /*当鼠标悬停在链接上时，链接的下划线消失*/ } </style> </head> <body> <div id="div1"> <a href="#">点击链接</a> </div> </body> </html>
（二）、E：first-child、E：last-child
注：这里可能会存在误区。要记住E元素是子元素，而不是父元素。所以这里要设置第一个li的样式就是li:first-child,而不是ul:first-child。而且必须是排在第一的元素才会被选中。E：last-child同理可得。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .ul li:first-child{color:red;} /*第一个*/ .ul li:last-child{color:blue;} /*最后一个*/ .ul li:nth-child(2){color:yellow;}/*第二个*/ /*倒数第二个*/ .ul li:nth-last-child(2){color:yellow;} </style> </head> <body> <ul class="ul"> <li>test1</li> <li>test2</li> <li>test3</li> <li>test4</li> <li>test5</li> </ul> </body> </html>
- test1
- test2
- test3
- test4
- test5
（三）、E：nth-child(n)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*奇数*/ .ul2 li:nth-child(odd){background-color:#ccc;} .ul2 li:nth-child(2n+1){border-left:2px solid red;} /* 偶数 */ .ul2 li:nth-child(even){background-color:#0F7CCF;} .ul2 li:nth-child(2n){border-left:2px solid black;} /* 3的倍数 */ .ul2 li:nth-child(3n){color:red;font-weight:bold;} </style> </head> <body> <ul class="ul2"> <li>哈哈</li> <li>呵呵</li> <li>嘻嘻</li> <li>啊啊</li> <li>哦哦</li> <li>嗯嗯</li> </ul> </body> </html>
- 哈哈
- 呵呵
- 嘻嘻
- 啊啊
- 哦哦
- 嗯嗯
（四）、E：first-of-type。
注：要与E：first-child区分开。E：first-child 要求E元素是第一个子元素，但E：first-of-type不是，该选择符总是能命中父元素的第1个为E的子元素，不论第1个子元素是否为E。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> p:first-of-type { color: #f00; } </style> </head> <body> <div class="test"> <div>我是一个div元素</div> <p>我是一个p元素</p> <p>我是一个p元素</p> </div> </body> </html>
（五）、E：not(s)
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> p:not(.abc) { /*设置除类名为.abc的元素的其他元素颜色*/ color: #f00; } </style> </head> <body> <p class="abc">pppp p</p> <p id="abc">ppp</p> <p class="abcd">ppppp</p> <p>pppppp</p> </body> </html>
