css选择器知识点

1、选择器：
*选择器（selector），会告诉浏览器：网页 上的哪些元素需要设置什么样的样式。
*比如：p这个选择器就表示选择页面中的所 有的p元素，在选择器之后所设置的样式会 应用到所有的p元素上
元素选择器：
*元素选择器（标签选择器），可以根据标 签的名字来从页面中选取指定的元素。
*语法： 标签名 { }
*比如p则会选中页面中的所有p标签，h1会 选中页面中的所有h1标签。

2、类选择器：
类选择器，可以根据元素的class属性值选取元素。
语法：
.className{}
比如.hello会选中页面所有class属性为hello的元素。

3、ID选择器
ID选择器，可以根据元素的id属性值选取元素。
语法：地{}
比如：#box会选中页面中的id属性值为box的元素，和class属性的不同，id属性是不能重复的。

4、复合选择器
复合选择器，可以同时使用多个选择器，这样可以先择同时满足多个选择器的元素。
语法：选择器，选择器{}
例如：div.box1会选中页面中具有box1这个class的div元素。

5、群组选择器：
群组选择器，可以同时使用多个选择器，多个选择器将同时应用指定的样式。
语法：选择器1，选择器2，选择器3{}
比如p，hello，#box会同时选中页面中p元素，class为hello的元素，id为box的元素。

6、通用选择器：*{}
[图片上传失败...(image-66683d-1533641783154)]

7、标签之间的关系：
祖先元素：直接或间接包含后代元素的元素。
后代元素：直接或间接被祖先元素包括的元素。
父亲元素：直接包含子元素的元素。
子元素：直接被父元素包含的元素。

8、兄弟元素：拥有相同父元素的元素。

9、后代选择器：后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。
语法：祖先元素，后代元素，后代元素{}
比如:p strong会选中页面中的所有中的p元素内的strong元素。

10、给链接定义样式：
正常连接：a:link
访问过的链接：a:visited
鼠标还过的链接：a:hover
鼠标点击的链接：a:active
其他：
获取焦点：fcous
指定元素前：before
指定元素后：after
远中的元素::selection

11、给段落定义样式：
首字母：first-letter
首行：first-line

12、自选择器：父选择器>子选择器
其他的子元素选择器
：first-child 选择第一个子标签
：last-child选择做后一个子标签
：not-child选择指定的子元素
：first-of-type
:last-of-type
:nth-of-type这三者对应不同的指定类型的子元素

13、兄弟选择器：兄弟元素+兄弟元素{}查找后面一个兄弟元素
查找后面的所有兄弟元素. 兄弟元素~兄弟元素{}
否定伪元素：not(选择器){}
比如p:not(.hello)表示选择所有的p元素但 是class为hello的除外。

*选择器（selector），会告诉浏览器：网页 上的哪些元素需要设置什么样的样式。
*比如：p这个选择器就表示选择页面中的所 有的p元素，在选择器之后所设置的样式会 应用到所有的p元素上
元素选择器：
*元素选择器（标签选择器），可以根据标 签的名字来从页面中选取指定的元素。
*语法： 标签名 { }
比如p则会选中页面中的所有p标签，h1会 选中页面中的所有h1标签。
2、类选择器：
类选择器，可以根据元素的class属性值选取元素。
语法：
.className{}
比如.hello会选中页面所有class属性为hello的元素。
3、ID选择器
ID选择器，可以根据元素的id属性值选取元素。
语法：地{}
比如：#box会选中页面中的id属性值为box的元素，和class属性的不同，id属性是不能重复的。
4、复合选择器
复合选择器，可以同时使用多个选择器，这样可以先择同时满足多个选择器的元素。
语法：选择器，选择器{}
例如：div.box1会选中页面中具有box1这个class的div元素。
5、群组选择器：
群组选择器，可以同时使用多个选择器，多个选择器将同时应用指定的样式。
语法：选择器1，选择器2，选择器3{}
比如p，hello，#box会同时选中页面中p元素，class为hello的元素，id为box的元素。
6、通用选择器：{}
[图片上传失败...(image-66683d-1533641783154)]
7、标签之间的关系：
祖先元素：直接或间接包含后代元素的元素。
后代元素：直接或间接被祖先元素包括的元素。
父亲元素：直接包含子元素的元素。
子元素：直接被父元素包含的元素。
8、兄弟元素：拥有相同父元素的元素。
9、后代选择器：后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。
语法：祖先元素，后代元素，后代元素{}
比如:p strong会选中页面中的所有中的p元素内的strong元素。
10、给链接定义样式：
正常连接：a:link
访问过的链接：a:visited
鼠标还过的链接：a:hover
鼠标点击的链接：a:active
其他：
获取焦点：fcous
指定元素前：before
指定元素后：after
远中的元素::selection
11、给段落定义样式：
首字母：first-letter
首行：first-line
12、自选择器：父选择器>子选择器
其他的子元素选择器
：first-child 选择第一个子标签
：last-child选择做后一个子标签
：not-child选择指定的子元素
：first-of-type
:last-of-type
:nth-of-type这三者对应不同的指定类型的子元素
13、兄弟选择器：兄弟元素+兄弟元素{}查找后面一个兄弟元素
查找后面的所有兄弟元素. 兄弟元素~兄弟元素{}
否定伪元素：not(选择器){}
比如p:not(.hello)表示选择所有的p元素但 是class为hello的除外。