基本选择器
下面所有的基本选择器都是在demo1.html的基础上面添加部分样式实现的。
demo1.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .demo{ width:400px; height:50px; border:1px solid #ccc; padding:10px; } ul{ height:30px; } li{ text-decoration: none; list-style: none; float:left; height:20px; line-height: 20px; width:20px; border-radius:10px; text-align:center; background:#f36; color:green; margin-right:5px; } </style> </head> <body> <div class="demo"> <ul class="clearfix"> <li id="first" class="first">1</li> <li class="active important">2</li> <li class="important items">3</li> <li class="important">4</li> <li class="items">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li id="last" class="last">10</li> </ul> </div> </body> </html>
通配符选择器（*）
通配符选择器用来选择所有元素，也可以选择某个元素下的所有元素。
*{margin:0;padding:0;}
.demo *{border:1px solid blue;}
元素选择器（E）
元素选择器用于选择文档元素
li{background-color:grey;color:orange;}
类名选择器
.important{font-weight:bold;color:yellow;}
类选择器结合元素选择器使用
li.important{font-weight:bold;color:yellow;}
id选择器
id选择器，同类选择器相同，具有唯一使用性的用ID选择器
#first{color:blue;}
后代选择器（E F）
选择元素E下面所有的后代F元素，不论之间隔了多少层， 都能被选中。
.demo li{color:blue;}
子元素选择器（E > F）
此时的F是E的直接子元素，他们之间只隔了一层，为父子关系
ul>li{color:yellow;}
相邻兄弟元素选择器（E + F）
EF两元素具有相同的父元素，而且F元素在E元素后面，二者相邻（此时只有第2开始的li满足条件）
li + li{border:1px solid blue;}
通用兄弟选择器（E ~F）
此时的EF具有相同的父元素，F在E后面，选择所有在E后面且和E拥有统一父元素的多个F
li ~ li{border:1px solid blue;}
群组选择器
.first,.last{background-color:red;}
属性选择器
常见的属性选择器包括以下几类：
- E[attr]:只使用属性名，但没有确定任何属性值
- E[attr = "value"]:指定属性名，并指定了该属性的属性值
- E[attr~="value"]:指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的~不能不写
- E[attr^="value"]:指定了属性名。并且有属性值，属性值是以value开头的
- E[attr$="value"]:指定了属性名，并且有属性值，且属性值是以value结束的
- E[attr*="value"]:指定了属性名，并且有属性值，且属性值中包含了value
- E[attr|="value"]:指定了属性名，并且属性值是value或者以"value-"开头的值
在这些属性选择器中，E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等，而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。
下面所有的属性选择器都是在demo2.html的基础上加入相关样式实现的。
demo2.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .demo{ width:300px; height:40px; border:1px solid #ccc; padding:10px; } .demo a{ float:left; display:block; height:20px; line-height:20px; width:20px; border-radius:10px; text-align:center; background:#f36; color:green; margin-right:5px; text-decoration:none; } </style> </head> <body> <div class="demo clearfix"> <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="123"> 1</a> <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a> <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a> <a href="sites/file/test.png" class="links item" target="_blank" lang="zh-tw">4</a> <a href="sites/file/image.png" class="links item" title="zh-cn">5</a> <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a> <a href="" class="links item" title="open the website" lang="cn">7</a> <a href="" class="links item" title="close the website" lang="en-zh">8</a> <a href="" class="links item" title="http://www.sina.com" >9</a> <a href="" class="links item last" id="last">10</a> </div> </body> </html>
E[attr]
.demo a[id]{background:blue;color:yellow;}
.demo a[href][title]{background: yellow;}
E[attr = "value"]
.demo a[id="first"]{background:blue;}
.demo a[href="http://www.w3cplus.com"][title]{background-color: #fff;}
E[attr~="value"]
.demo a[title~="website"]{background:orange;}
E[attr^="value"]
.demo a[href^="sites/"]{background:#eee;}
E[attr$="value"]
.demo a[href$="png"]{background:#070707;}
E[attr*="value"]
.demo a[title*="site"]{background-color: violet;}
E[attr|="value"]
.demo a[lang|="zh"]{background:gray;}
伪类选择器
下面所有的伪类选择器都是在demo3.html的基础上加入相关样式实现的。
demo3.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .demo{ width:400px; height:50px; border:1px solid #ccc; padding:10px; } li{ border:1px solid #ccc; padding:2px; float:left; margin-right:4px; list-style: none; } a{ float:left; display:block; height:20px; line-height:20px; width:20px; border-radius:10px; text-align:center; background:#f36; color:green; text-decoration:none; } </style> </head> <body> <div class="demo clearfix"> <ul class="clearfix"> <li class="first links" id="first"><a href="">1</a></li> <li class="links"><a href="">2</a></li> <li class="links"><a href="">3</a></li> <li class="links"><a href="">4</a></li> <li class="links"><a href="">5</a></li> <li class="links"><a href="">6</a></li> <li class="links"><a href="">7</a></li> <li class="links"><a href="">8</a></li> <li class="links"><a href="">9</a></li> <li class="links last" id="last"><a href="">10</a></li> </ul> </div> </body> </html>
动态伪类
动态伪类:只有当用户和网站交互的时候才能体现出来的，link：链接没有被访问时的样式，visited：链接被访问以后的样式，hover：鼠标悬浮时的样式，active：鼠标点中激活的已瞬间的样式。
.demo a:link{color:gray;}
.demo a:visited{color:yellow;}
.demo a:hover{color:green;}
.demo a:active{color:blue;}
UI元素状态伪类
UI元素状态伪类主要指type=text时的enable和disabled，type=radio和type=checkbox的checked和unchecked等。
input[type="text"]:disabled {border:1px solid red;}
:nth选择器
:first-child用来选择某个元素的第一个子元素，:last-child用来选择某个元素的最后一个子元素。
.demo li:first-child{background:green;}
.demo li:last-child{background:green;}
:nth-child()用来选择某个元素的一个或多个特定的子元素
.demo li:nth-child(n){background:green;} /*选择demo下的所有li*/
.demo li:nth-child(n+5){background:green;} /*选择demo下从第五个开始的li*/
.demo li:nth-child(-n+5){background:green;} /*选择demo下的前五个li*/
.demo li:nth-child(5){background:green;} /*选择demo下的第五个li*/
.demo li:nth-child(5n){background:green;} /*选择demo下5的倍数的li*/
.demo li:nth-child(3n+1){background:green;} /*每隔3个选一个*/
.demo li:nth-child(even){background:green;} /*偶数个li*/
.demo li:nth-child(odd){background:green;} /*奇数个li*/
:nth-last-child()同:nth-child()作用相同，只是一个是从前面开始计算，一个是从后面开始计算
:nth-of-type:类似于:nth-child，不同的是这个只计算选择器中指定的那个元素，主要用来定位元素中包含了好多不同类型的元素
:only-child
:only-child：表示该元素是其父元素的唯一的子元素
:only-of-type:表示一个元素有很多个子元素，而其中只有一个子元素是唯一的，
例如，在一个div中，包含有div、li、p等等，而p只有一个，具有唯一性，就可以这样写 p:only-of-type{background-color: green}
:empty
:empty:用来选择没有任何内容的元素，包括空格都没有
p:empty{display: none}
:has
:has:用来选择包含某元素的元素
a:has( img ){border:1px solid red;} /*为所有包含img的a添加边框*/
:not
:not:用来选择不包含某元素的元素
li:not(:has(p)){padding-top:10px;} /*选择不包含p的li元素*/
:matches
:matches用于匹配是否包含某些类或id。
p:matches(.alert,.error,.warn){color:red;} /*只要元素p带有.alert,.error,.warn中的任何一个类名，文本颜色就变为red*/
伪元素
::first-line:选择元素的第一行
::first-letter:选择文本块的第一个字母
::before和::after：主要用来在元素的前后插入内容
::selection用来改变浏览网页选中的默认效果