标签选择器
- 格式：
标签名称{
属性:值;
} - 作用：
- 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
- 注意：
- 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
- 标签选择器无论标签藏得多深都能选中
- 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)
id选择器
- 格式：
#id名称{
属性:值;
} - 作用：
- 根据指定的id名称找到对应的标签, 然后设置属性
- 例子：
#identity1{
color: red;
}
<p id="identity1">我是文字</p> - 注意：
- 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
- 在同一个界面中id的名称是不可以重复的
- 在编写id选择器时一定要在id名称前面加上#
- id的名称是有一定的规范的
- id的名称只能由字母/数字/下划线 a-z 0-9 _
- id名称不能以数字开头
- id名称不能是HTML标签的名称,不能是a h1 img input ...
- 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
类选择器
- 格式：
.类名{
属性:值;
} - 作用：
- 根据指定的类名称找到对应的标签, 然后设置属性
- 注意：
- 每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
- 在同一个界面中class的名称是可以重复的
- 在编写class选择器时一定要在class名称前面加上.
- 类名的命名规范和id名称的命名规范一样
- 类名就是专门用来给CSS设置样式的
- 在HTML中每个标签可以同时绑定多个类名
- 格式:
<标签名称 class="类名1 类名2 ..."> - 错误的写法:
<p class="para1" class="para2">
- 格式:
id选择器和类选择器
- 两者区别：
- id相当于人的身份证不可以重复
class相当于人的名称可以重复 - 一个HTML标签只能绑定一个id名称
一个HTML标签可以绑定多个class名称 - id选择器是以#开头
class选择器是以.开头 - 在企业开发中到底用id选择器还是用class选择器?
- id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式
后代选择器
- 格式：
标签名称1 标签名称2{
属性:值;
} - 作用：
- 找到指定标签的所有特定的后代标签, 设置属性
- 解析：
- 先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性
- 注意：
- 后代选择器必须用空格隔开
- 后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
- 后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器（比如类选择器）
- 后代选择器可以通过空格一直延续下去
子元素选择器（直系后代选择器）
- 格式：
标签名称1>标签名称2{
属性:值;
} - 作用：
- 找到指定标签中所有特定的直接子元素, 然后设置属性
- 解析：
- 先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
- 注意：
- 子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
- 子元素选择器之间需要用>符号连接, 并且不能有空格
- 子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
- 子元素选择器可以通过>符号一直延续下去
后代选择器和子元素选择器
- 两者区别
- 1.后代选择器使用空格作为连接符号
2.子元素选择器使用>作为连接符号 - 1.后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
2.子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签 - 共同点：
- 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
- 后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
- 在企业开发中如何选择?
- 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
交集选择器
- 格式：
选择器1选择器2{
属性: 值;
} - 作用：
- 给所有选择器选中的标签中, 相交的那部分标签设置属性
- 注意：
- 选择器和选择器之间没有任何的连接符号
- 不仅仅可以使用标签名称, 还可以使用其它选择器，id选择器/class选择器
- 交集选择器仅仅作为了解, 企业开发中用的并不多
并集选择器
- 格式：
选择器1,选择器2{
属性:值;
} - 作用：
- 给所有选择器选中的标签设置属性
- 例如：
.ht,.para{
color: red;
}
h1，p{
color:red;
}
<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p> - 注意：
- 并集选择器必须使用,来连接
- 不仅仅可以使用标签名称, 还可以使用其它选择器，id选择器/class选择器
兄弟选择器
相邻兄弟选择器
- 格式：
选择器1+选择器2{
属性:值;
} - 作用：
- 给指定选择器后面紧跟的那个选择器选中的标签设置属性
- 注意：
- 相邻兄弟选择器必须通过+连接
- 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
通用兄弟选择器
- 格式：
选择器1~选择器2{
属性:值;
} - 作用：
- 给指定选择器后面的所有选择器选中的所有标签设置属性
- 注意：
- 通用兄弟选择器必须用~连接
- 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
