7.27知识点总结

一、css属性选择器：

1.E[attr] (选择某个有属性的元素)

例：a[href]{color:red;}

2.E[attr="value"]（选择某个有属性的元素，并可进一步缩小范围，只选择有特定属性值的元素）

例： a[href="www.baidu.com"]{color:red;}

3.E[attr^="value"]（指定了属性，并指定了属性值，属性值以value开头）

例：a[title^="text"]{color:red;}  /  div[class^="text"]{background:red;}

                                       class属性值命名以 text 开头的所有 div 的背景颜色

4.E[attr$="value"]（指定了属性，并指定了属性值，属性值以value结尾）

例：a[title$="text"]{color:red;}  /  div[class$="text"]{background:red;}

                                        class属性值命名以 text 结尾的所有 div 的背景颜色

5. E[attr~="value"]         

例：[title~=book]{background：red；}（给title属性中含有单词book的元素设置样式）

二、结构伪类选择器

1.      p:first-child 

   为每个父元素下的首个p元素设置样式（前提是首个元素是p元素，不是的话不改变样式）

2.      p:last-child

 p元素父元素下的最后一个p元素的样式（前提是最后一个元素是p元素，不是的话不改变样式）

3.     p:nth-child(n) 

设置p元素父元素下第n个子元素的变化（前提是第n个元素是p元素，不是的话不改变样式）

4.     p:nth-last-child(n) 

p元素父元素下从最后一个元素开始从下至上，第n个元素的变化（前提是第n个元素是p元素，不是的话不改变样式）

5.     p:only-child{}     

设置p元素父元素下唯一子元素（即该p元素）的样式

6.     p:first-of-type{}     

 设置p元素父元素下的第一个p元素的样式

7.     p:last-of-type{}     

 设置p元素父元素下，从下至上，第一个p元素的样式

8.     p:nth-of-type(n){}   

 设置p元素其父元素下的第n个p元素的样式

9.     p:nth-last-of-type(n){} 

设置p元素其父元素下,从下至上，第n个p元素的样式

10.    p:only-of-type{}       

设置p元素父元素下的唯一一个子元素p的样式

11.     p:empty{}         

设置内容为空时元素p的样式

13.     :root{}         

设置html文档根元素的样式

三、css伪类选择器

1.UI状态伪类选择器：

                                    input[type="text"]:enabled{}（可用状态下的样式）

                                    input[type="text"]:disabled{} （禁用状态下的样式）

                                    input[type="text"]:checked{}   (选中状态下的样式)

2.否定伪类选择器：   

                                    :not(p) 

                                    设置除p标签外所有元素的样式（前提是p元素已经设置了颜色等样式）

3.目标伪类选择器：   

                                   :target     

                                   该元素的id当做页面中的超链接来使用