Html中CSS选择器的使用

Html中CSS选择器的使用

一、标签选择器

功能：根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性。
基本使用格式:
标签名称{
属性:值;
}
解释：给所有叫标签名称的标签设置属性。
示例：
p{
color:red;
}
解释：给所有p标签设置属性。
注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…)

二、id选择器

功能：根据指定的id名称找到对应的标签, 然后设置属性。
基本使用格式：
#id名称{
属性:值;
}
解释：给指定id名称的标签设置属性。
示例：
#p1{
color:red;
}
解释：给id名称叫p1的标签设置属性。
注意点:
1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id。
2.在同一个界面中id的名称是不可以重复的。
3.在编写id选择器时一定要在id名称前面加上“#”。
4.id的名称是有一定的规范的，即id名称只能由字母/数字/下划线组成，不能以数字开头，不能使用html标签的名称。
5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的。

三、类选择器

功能: 根据指定的类名称找到对应的标签, 然后设置属性。
基本使用格式:
.class名{
属性:值;
}
解释：给所有叫指定class名称的标签设置属性。
示例：
.c1{
color:red;
}
解释：给所有class名称叫c1的标签设置属性。
注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名。
2.在同一个界面中class的名称是可以重复的，即多个标签设置同一个类名称。
3.在编写class选择器时一定要在class名称前面加上“.”。
4.类名的命名规范和id名称的命名规范一样。
5.类名就是专门用来给CSS设置样式的。
6.在HTML中每个标签可以同时绑定多个类名，即一个标签可以有多个类名。
格式：<标签名称 class=“类名1 类名2 …”>
错误的写法：

四、id选择器与类名选择器之间的区别

1、id相当于人的身份证不可以重复，class相当于人的名称可以重复。
2、一个HTML标签只能绑定一个id名称，一个HTML标签可以绑定多个class名称。
3、id选择器是以“#”开头，class选择器是以“.”开头。
4、id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式。
5、可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可。

五、后代选择器

功能: 找到指定标签的所有特定的后代标签, 设置属性。
基本使用格式:
选择器1 选择器2{
属性:值;
}
解释：先找到所有名称叫做“选择器1”的标签, 然后给“选择器1”标签下面的所有名称叫做"选择器2"的标签设置属性。
示例：
div p{
color:read;
}
解释：先找到div标签，然后给div标签中所有p标签设置属性，
注意点:
1.后代选择器的标签/id名称/class名称之间必须是用空格隔开，不能使用其他字符。
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代。
3.后代选择器不仅仅可以使用标签名称, 还可以使用id名称、class名称。
4.后代选择器可以通过空格将查找一直延续下去，直到没有后代为止。

六、子元素选择器

功能: 找到指定标签中所有特定的直接子元素, 然后设置属性。
格式:
选择器1>选择器2{
属性:值;
}
解释：先找到所有名称叫做“选择器1”的标签, 然后给“选择器1”标签下所有直接子元素名称叫做"选择器2"的标签设置属性。
示例：
div>p{
color:read;
}
解释：先找到div标签，然后给div标签中下一级标签中的p标签设置属性。
注意点:
1.子元素选择器只会查找儿子中特定的标签, 不会查找其他被子元素或者更后面元素嵌套的特定标签。
2.子元素选择器各个标签/id名称/class名称之间必须使用>符号连接, 并且不能有空格。
3.子元素选择器不仅仅可以使用标签名称连接, 还可以使用id名称/class名称连接。
4.子元素选择器可以通过>将查找一直延续下去，直到没有后代为止。

七、后代选择器与子元素选择器之间的相同点和区别

7.1、相同点

1、后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器。
2、后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去，例如：选择器1>选择器2>选择器3>选择器4{}。

7.2、区别

1、后代选择器使用空格作为连接符号，子元素选择器使用>作为连接符号。
2、后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签。
3、如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器，如果只想选中指定标签中的所有特定儿子标签,那么就使用子元    素选择器。

八、交集选择器

功能：给所有选择器选中的标签中, 相交的那部分标签设置属性。
基本使用格式:
选择器1选择器2{
属性: 值;
}
解释：给选择器1中所有名称叫选择器2的标签设置属性。
示例：
p.p1{
/设置字体显示红色/
color: red;
}
解释：给p标签中所有class名称叫p1的p标签设置属性。
注意点:
1.选择器和选择器之间没有任何的连接符号。
2.选择器可以使用标签名称/id名称/class名称。
3.交集选择器仅仅作为了解, 企业开发中用的并不多。
4.交集选择器可以一直延续下去，直到没有交集为止。

九、并集选择器

功能: 给所有选择器选中的标签设置属性。
基本使用格式:
选择器1,选择器2{
属性:值;
}
解释：同时给所有名称叫选择器1和选择器2的标签设置属性。
示例：
h1,p{
color: red;
}
解释：同时给h1标签和p标签设置属性。
注意点:
1.并集选择器必须使用“,”来连接。
2.并集选择器可以使用标签名称/id名称/class名称。
3.并集选择器可以一直并下去，直到所有选择器都使用完。

十、相邻兄弟选择器

功能: 给指定选择器后面紧跟的那个选择器选中的标签设置属性。
格式:
选择器1+选择器2{
属性:值;
}
解释：给所有选择器1后面紧跟着的一个选择器2设置属性。
示例：
h1+p{
color: red;
}
解释：给所有h1标签后面紧跟着的一个p标签设置属性
注意点:
1.相邻兄弟选择器必须通过“+”连接。
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签。
3.相邻兄弟选择器只能设置一个“选择器1”标签后面的“选择器2”标签。
4.相邻兄弟选择器可以使用标签名称/id名称/class名称。

十一、通用兄弟选择器

功能: 给指定选择器后面的所有选择器选中的所有标签设置属性。
基本使用格式:
选择器1~选择器2{
属性:值;
}
解释：给所有选择器1标签后面的所有同级选择器2标签设置属性。
示例：
h1~p{
color: red;
}
解释：给所有h1标签后面的所有同级p标签设置属性。
注意点:
1.通用兄弟选择器必须用~连接。
2.通用兄弟选择器选中的是选择器1后面选择器2的所有标签, 无论有没有被隔开都可以选中。
3.选择器1与选择器2的标签必须同级才能设置属性。
4.通用兄弟选择器可以使用标签名称/id名称/class名称。

十二、序选择器

功能：选择某一层级标签中的第i个标签设置属性。
应用场景：当不想使用id名称或者class名称选择需要设置属性的标签时，可以通过序选择器指定标签设置属性。

12.1、:first-child

功能：选中同级别中的第一个标签。
基本使用格式：
标签名称:first-child {
属性: 值;
}
解释：给选择的层级中第一个标签设置属性，当第一个标签为指定标签时属性设置成功。
示例：
p:first-child{
color: red;
}
解释：给指定层级中第一个标签设置属性，当第一个标签为p标签时属性设置成功。
注意点：
1.first-child选择的是指定层级的第一个标签，当第一个标签不是first-child前面指定的标签时属性设置无效。

12.2、:last-child

功能：选中同级别中的最后一个标签。
基本使用格式：
标签名称:last-child {
属性: 值;
}
解释：给选择的层级中最后一个标签设置属性，当最后一个标签为指定标签时属性设置成功。
示例：
p:last-child{
color: red;
}
解释：给指定层级中最后一个标签设置属性，当最后一个标签为p标签时设置属性成功。
注意点：
1.last-child选择的是指定层级的最后一个标签，当最后一个标签不是first-child前面指定的标签时属性设置无效。

12.3、:nth-child(n)

功能：选中同级别中的第n个标签。
基本使用格式：
标签名称:nth-child(n) {
属性: 值;
}
解释：给选择的层级中第n个标签设置属性，当第n个标签为指定标签时属性设置成功。
示例：
p:nth-child(3){
color: red;
}
解释：给指定层级中第3个标签设置属性，当第3个标签为p标签时设置属性成功。
注意点：
1.nth-child(3)选择的是指定层级的第n个标签，当第n个标签不是nth-child(n)前面指定的标签时属性设置无效。

12.4、:nth-last-child(n)

功能：选中同级别中的倒数第n个标签。
基本使用格式：
标签名称:nth-last-child(n) {
属性: 值;
}
解释：给选择的层级中倒数第n个标签设置属性，当倒数第n个标签为指定标签时属性设置成功。
示例：
p:nth-last-child(3){
color: red;
}
解释：给指定层级中倒数第3个标签设置属性，当倒数第3个标签为p标签时设置属性成功。
注意点：
1.nth-last-child(3)选择的是指定层级的倒数第n个标签，当倒数第n个标签不是nth-last-child(n)前面指定的标签时属性设置无效。

12.5、:only-child

功能：选中父元素中唯一的标签
基本使用格式：
标签名称:only-child {
属性: 值;
}
解释：给父标签在选择的层级中，然后父标签中的标签设置属性，当父标签中的标签只有一个标签，并且标签为指定标签时属性设置成功。
示例：
p:only-child{
color: red;
}
解释：给父标签在选择的层级中，然后父标签中的标签设置属性，当父标签中的标签只有一个标签，并且标签为p标签时属性设置成功。
注意点：
1.only-child选择的是父标签在指定层级中的指定标签，当指定标签不存在父标签或者标签不唯一时属性设置无效。

12.6、:first-of-type

功能：选中同级别中同类型的第一个标签
基本使用格式：
标签名称:first-of-type {
属性: 值;
}
解释：给选择的层级中选择first-of-type前面指定标签的第一个标签设置属性，当指定标签不存在时属性设置失败。
示例：
p:first-of-type{
color: red;
}
解释：给指定层级中选择第一个p标签设置属性，当p标签不存在时属性设置失败。
注意点：
1.如果指定层级中不存在first-of-type前指定的标签时属性会设置失败。

12.7、:last-of-type

功能：选中同级别中同类型的最后一个标签
基本使用格式：
标签名称:last-of-type {
属性: 值;
}
解释：给选择的层级中选择last-of-type前面指定标签的最后一个标签设置属性，当指定标签不存在时属性设置失败。
示例：
p:last-of-type{
color: red;
}
解释：给指定层级中选择最后一个p标签设置属性，当p标签不存在时属性设置失败。
注意点：
1.如果指定层级中不存在last-of-type前指定的标签时属性会设置失败。

12.8、:nth-of-type(n)

功能：选中同级别中同类型的第n个标签。
基本使用格式：
标签名称:nth-of-type(n) {
属性: 值;
}
解释：给选择的层级中选择nth-of-type前面指定标签的第n个标签设置属性，当指定标签不存在时属性设置失败。
示例：
p:nth-of-type(3){
color: red;
}
解释：给指定层级中选择第3个p标签设置属性，当第三个p标签不存在时属性设置失败。
注意点：
1.如果指定层级中不存在nth-of-type前指定的标签的第n个标签时属性会设置失败。

12.9、:nth-last-of-type(n)

功能：选中同级别中同类型的倒数第n个标签。
基本使用格式：
标签名称:nth-last-of-type(n) {
属性: 值;
}
解释：给选择的层级中选择nth-last-of-type前面指定标签的倒数第n个标签设置属性，当指定标签不存在时属性设置失败。
示例：
p:nth-last-of-type(3){
color: red;
}
解释：给指定层级中选择倒数第3个p标签设置属性，当倒数第三个p标签不存在时属性设置失败。
注意点：
1.如果指定层级中不存在nth-of-type前指定的标签的倒数第n个标签时属性会设置失败。

12.10、:only-of-type

功能：选中父元素中唯一类型的某个标签。
基本使用格式：
标签名称:only-of-type {
属性: 值;
}
解释：父元素在选择的层级中，子元素是only-of-type前面指定标签类型的标签设置属性，当指定标签不唯一时属性设置失败。
示例：
p:nth-of-type(3){
color: red;
}
解释：父元素指定层级中，给父元素中的p标签设置属性，当p标签不唯一时属性设置失败。
注意点：
1.父元素中可以同时存在多种类型的元素，但是指定类型的标签数量必须只有一个。

十三、属性选择器

功能：根据指定的属性名称找到对应的标签, 然后设置属性

13.1、[属性名称]

根据指定的属性名称找到对应的标签, 然后设置属性。
基本使用格式:
标签名称[属性名称]{
属性: 值;
}
解释：先找到指定类型的标签，然后根据属性名称找到特定的标签，最后给特定的标签设置属性。
示例：
p[id]{
color: red;
}
解释：先找到所有p标签，然后找到p标签中设置了id属性的p标签，最后给找到的p标签设置属性。

13.2、[属性名称=值(value)]

功能：找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性，最常见的应用场景, 就是用于区分input属性。
基本使用格式:
标签名称[属性名称=值]{
属性: 值;
}
解释：先找到指定类型的标签，然后根据属性名称和属性的值找到特定的标签，最后给特定的标签设置属性。
示例：
p[class=cc]{
color: blue;
}
解释：先找到所有的p标签，然后再找到class属性为cc的标签，最后给找到的标签设置属性。

13.3、[属性名称^=值(value)]

功能：找到有指定属性，并且属性的取值以value开头的标签，然后设置属性。
基本使用格式:
标签名称[属性名称^=值]{
属性: 值;
}
解释：先找到指定类型的标签，然后根据属性名称和属性值的开头找到特定的标签，最后给特定的标签设置属性。
示例：
p[class^=cc]{
color: blue;
}
解释：先找到所有的p标签，然后再找到具有class属性，并且class属性值开头为cc的标签，最后给找到的标签设置属性。

13.4、[属性名称$=值(value)]

功能：找到有指定属性，并且属性的取值以value结尾的标签，然后设置属性。
基本使用格式:
标签名称[属性名称$=值]属性:值;解释：先找到指定类型的标签，然后根据属性名称和属性值的结尾找到特定的标签，最后给特定的标签设置属性。示例：p[class$=cc]{
color: blue;
}
解释：先找到所有的p标签，然后再找到具有class属性，并且class属性值结尾为cc的标签，最后给找到的标签设置属性。

13.5、[属性名称*=值(value)]

功能：找到有找到属性，并且属性的取值包含value的标签，然后设置属性。
基本使用格式:
标签名称[属性名称*=值]{
属性: 值;
}
解释：先找到指定类型的标签，然后根据属性名称和属性值取值包含value的特定标签，最后给特定标签设置属性。
示例：
p[class*=cc]{
color: blue;
}
解释：先找到所有的p标签，然后再找到具有class属性，并且class属性值包含cc的标签，最后给找到的标签设置属性。

十四、通配符选择器

功能: 给当前界面上所有的标签设置属性。
基本使用格式:
*{
属性:值;
}
解释：给当前界面中所有的标签设置“{}”中的属性。
示例：
*{
color= red;
}
解释：给界面中所有标签的文字设置为红色。
注意点:
由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差,所以在企业开发中一般不会使用通配符选择器。

十五、伪元素选择器

功能：伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素。
基本使用格式:
在指定标签内容前面添加一个子元素：
标签名称::before{
content: 子元素; /用于设置需要添加的子元素/
属性名称:值; /用于给子元素设置属性/
}
给指定标签的内容后面添加一个子元素：
标签名称::after{
content: 子元素; /用于设置需要添加的子元素/
属性名称:值; /用于给子元素设置属性/
}

十六、伪类选择器

功能：用来修改标签不同状态的样式。a标签的状态分为从未被访问状态(link)、被访问过状态(visited)、悬停状态(hover)、长按状态(active)。
具体功能：
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式
基本使用格式：
标签名称:link{
属性名: 值;
}
标签名称:visited{
属性名: 值;
}
标签名称:hover{
属性名: 值;
}
标签名称:active{
属性名: 值;
}
注意事项：
1.伪类选择器可以单独出现也可以一起出现。
2.伪类选择器如果一起出现, 那么有严格的顺序要求。编写的顺序必须遵循link、visited、hover、active的顺序。
3.如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写,即直接在标签样式里面设置属性，而不写对应的伪标签选择器。
4.标签的伪类选择器最好写在标签选择器的后面。
5.标签盒子相关的属性都写在标签选择器中(显示模式/宽度/高度/padding/margin)，a标签文字/背景相关的都写在伪类选择器中。