基本选择器
1.通配符选择器
*通配符——通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素
*{margin：0； padding：0；}
.demo *{border:1px solid #000;}
2.元素选择器(E)
元素选择器其实就是文档的元素，如html,body,p,div等等
li{border:1px solid #000;}
3.类选择器（.className）
1、使用类选择器之前需要在html元素上定义类名
<li class="active important items">2</li>
.important {font-weight: bold; color: yellow;}
2、类选择器还可以结合元素选择器来使用，如：
p.items {color: red;}
3、多类选择器(多类选择器不被IE6支持)，如：
.important.items {background:#ccc;}
4.id选择器（#ID）
和上面说的类选择器很相似，不同的是ID选择器是一个页面中唯一的值
<li id="important">2</li>
#important {font-weight: bold; color: yellow;}
5.后代选择器（Ｅ Ｆ）
前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，中间用空格隔开
demo li {color: blue;}
6.子元素选择器(E>F)
子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而已
ul > li {background: green;color: yellow;}
IE6不支持子元素选择器
7.相邻兄弟元素选择器(E + F)
EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻
1、li + li {background: green;color: yellow; border: 1px solid #ccc;}
2、.active + li {background: green;color: yellow; border: 1px solid #ccc;}
IE6不支持
8.通用兄弟选择器（Ｅ 〜 Ｆ）
E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择
所有Ｅ元素后面的Ｆ元素。
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
IE6不支持
9.群组选择器（selector1,selector2,...,selectorN）
将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开
.first, .last {background: green;color: yellow; border: 1px solid #ccc;}
属性选择器
1.E[attr]：只使用属性名，但没有确定任何属性值
.demo a[id] {background: blue; color:yellow;font-weight:bold;}
你也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中
.demo a[href][title] {background: yellow; color:green;}
IE6不支持这个选择器
2.E[attr="value"]
E[attr="value"]是指定了属性值“value”
.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}
也可以多个属性并写，进一步缩小选择范围
.demo a[href="index.html"][title] {background: yellow; color:green;}
对于E[attr="value"]这种属性值选择器有一点需要注意：属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时 <a href="" class="links item" title="open the website">7</a>
3.E[attr~="value"]
只要属性值中有一个value相匹配就可以选中该元素
.demo a[title~="website"]{background:orange;color:green;}
总结：属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。
IE6浏览器不支持
4.E[attr^="value"]
选择attr属性值以“value”开头的所有元素
.demo a[href^="http://"]{background:orange;color:green;}
.demo a[href^="mailto:"]{background:green;color:orange;}
IE6浏览器不支持
5.E[attr$="value"]
选择元素attr属性，并且他的属性值是以value结尾的
常用在网站给pdf,png,doc等不同文件加上不同icon
.demo a[href$="png"]{background:orange;color:green;}
IE6浏览器不支持
6.E[attr*="value"]
所选择的属性，其属性值中有这个"value"值都将被选中
.demo a[title*="site"]{background:black;color:white;}
IE6浏览器不支持
7.E[attr^="value"]
选择器会选择attr属性值等于value或以value-开头的所有元素
.demo a[lang^="zh"]{background:gray;color:yellow;}
IE6浏览器不支持
七种属性选择器中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图标。
伪类选择器
1.动态伪类
a:link a:visited a:hover a:active
遵循爱（LoVe）恨（HAte）
:hover用于当用户把鼠标移动到元素上面时的效果；
:active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
:focus用于元素成为焦点，这个经常用在表单元素上。
subm:focus{ border:1px solid transparent;box-shadow: 1px 1px 3px #f33; }
2.UI元素状态伪类
:enabled :disabled :checked
主要是针对于HTML中的Form元素操作
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
input[type]:checked{width：15px; height:15px;}
IE6-8不支持":checked",":enabled",":disabled"这三种选择器。
3.CSS3的:nth选择器
1、:first-child
2、:last-child
3、:nth-child(n) 数字、even偶数、odd奇数
4、:nth-last-child(n)
5、:only-child
:nth-child(n)，其中n是一个简单的表达式，那么"n"取值从“1”开始计算,不能取负值
IE6-8和FF3-浏览器不支持":nth-child"选择器。
5、:nth-of-type
6、:nth-last-of-type
7、:first-of-type和:last-of-type
8、:only-of-type
9、:empty p:empty {display: none;}
IE6-8浏览器不支持:only-child选择器；
IE6-8和FF3.0-浏览器不支持:only-of-type选择器。
IE6-8浏览器不支持:empty选择器
4.否定选择器 :not()
input:not([type="submit"]) {border: 1px solid red;}
IE6-8浏览器不支持:not()选择器
5.伪元素
::first-letter
::first-line
::before
::after
::selection 改变网页被选中文本的样式
div::before{
content : " ";
display : inline-block;
}
下三角形 ：
width:0;
border : 10px solid transparent
border-top-color : red;
网友评论