CSS3知识点总结1

一、后代选择器（Ｅ Ｆ）

        前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，中间用空格隔开

.demo li {color: blue;}

二.子元素选择器(E>F）

        子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而已

ul > li {background: green;color: yellow;}

三、相邻兄弟元素选择器(E + F) 

        EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻

li + li {background: green;color: yellow; border: 1px solid #ccc;}

.active + li {background: green;color: yellow; border: 1px solid #ccc;}

 四.通用兄弟选择器（Ｅ 〜 Ｆ）

        E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择所有Ｅ元素后面的Ｆ元素。

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;} 

五.群组选择器（selector1,selector2,...,selectorN） 

        将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开

.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

六.E[attr]：

        只使用属性名，但没有确定任何属性值； 

.demo a[id] {background: blue; color:yellow;font-weight:bold;}

         你也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中

.demo a[href][title] {background: yellow; color:green;}

七. Ｅ[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>

八.E[attr^="value"] 

        选择attr属性值以“value”开头的所有元素

.demo a[href^="http://"]{background:orange;color:green;}

.demo a[href^="mailto:"]{background:green;color:orange;}

九.UI元素状态伪类 

        :enabled  :disabled  :checked

        主要是针对于HTML中的Form元素操作

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

input[type]:checked{width：15px; height:15px;}

十.CSS3的:nth选择器 

1、:first-child

2、:last-child

3、:nth-child

4、:nth-last-child(n)

5、:only-child

 十一.CSS3的:nth选择器

1、:nth-of-type()                 :nth-child()

2、:nth-last-of-type()            :nth-last-child()

3、:first-of-type和:last-of-type      :first-child  :last-child

4、:only-of-type                 :only-child

5、:empty     p:empty {display: none;}

十二.否定选择器 :not() 

        表示否定，除这个元素以外的

input:not([type="submit"]) {border: 1px solid red;}