一.四大基本选择器
1.id 选择器
根据指定的id名称找到对应的标签, 然后设置属性
#id名称{
属性:值;
}
/*在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的*/
2.类选择器
根据指定的类名称找到对应的标签, 然后设置属性
.类名{
属性:值;
}
/*
注意点:
1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在HTML中每个标签可以同时绑定多个类名
格式:
<标签名称 class="类名1 类名2 ...">
*/
3.标签选择器
根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
标签名称 {
属性: 值;
}
4.通配符选择器
给当前界面上所有的标签设置属性
* {
属性: 值;
}
注意点: 由于通配符选择器是设置界面上所有的标签的属性,
所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多,
那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器;
二.关系选择器
1.后代选择器
找到指定标签的所有特定的后代标签, 设置属性，用空格连接；
标签名称1 标签名称2 {
属性: 值;
}
/*
先找到所有名称叫做"标签名称1"的标签,
然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签,给他加样式
注意点:
1.空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称,还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去 如：div ul li p
*/
2.子元素选择器
找到指定标签中所有特定的直接子元素, 然后设置属性；
- 先找到所有名称叫做"标签名称1"的标签,
- 然后在这个标签中查找所有
直接子元素名称叫做"标签名称2"的元素
标签名称1>标签名称2{
属性:值;
}
/*
注意点:
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
*/
后代选择器和子元素选择器之间的异同
> <!--
> 1.后代选择器和子元素选择器之间的区别?
> 1.1
> 后代选择器使用空格作为连接符号
> 子元素选择器使用>作为连接符号
> 1.2
> 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中
> 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
>
> 2.后代选择器和子元素选择器之间的共同点
> 2.1
> 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
> 2.2
> 后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
> 选择器1>选择器2>选择器3>选择器4{}
>
> 3.在企业开发中如何选择
> 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
> 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
3.交集选择器
给所有选择器选中的标签中, 相交的那部分标签设置属性
选择器1选择器2 {
属性: 值;
}
注意点:
- 1.选择器和选择器之间
没有任何的连接符; - 2.选择器可以使用标签名称 / id名称/class名称 ;
- 3.交集选择器仅仅作为了解, 企业开发中用的并不多;
4.并集选择器
给所有选择器选中的标签设置属性; 注意点:
- 1.并集选择器必须使用, 来连接 ;
- 2.选择器可以使用标签名称 / id名称/class名称;
选择器1,选择器2 {
属性: 值;
}
5.兄弟选择器
5.1.相邻兄弟选择器css2
给指定选择器后面紧跟的那个选择器选中的标签设置属性;
h1 + p {
}
/*
紧跟h1后面的p标签
注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
*/
5.2.通用兄弟选择器 CSS3
给指定选择器后面的所有选择器选中的所有标签设置属性
h1~p {
}
/*
h1后面的所有p
*/
注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中;
6.序选择器
6.1 同级别的第几个
:first-child 选中同级别中的第一个标签 p:first-child选中同级别中第一个p标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数
:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的标签
注意点: 不区分类型
6.2.同级别中同类型的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签
三.属性选择器
根据指定的属性名称找到对应的标签, 然后设置属性
p[id]
/*找到p标签中有id属性的*/
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
1.属性的取值是以什么开头的
[attribute^=value] CSS3
2.属性的取值是以什么结尾的
[attribute$=value] CSS3
3.属性的取值是否包含某个特定的值得
[attribute*=value] CSS3
