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、后代选择器和子元素选择器都可