id选择器
-
作用
-
根据指定的id名称找到对应的标签, 然后设置属性
-
格式
#id名称{
属性名称：值；
}
- 注意点:
- 每个HTML标签都可以设置id
- 在同一个界面中id的名称不可以重复
- 在编写id选择器时一定要在id名称前面加上#
- id的名称是有一定的规范的,id的名称只能由字母/数字/下划线(a-z 0-9 _),id名称不能以数字开头
- id名称不能是HTML标签的名称(不能是a h1 img input ...)
- 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id一般留给js使用的
类选择器
-
作用
-
根据指定的类名称找到对应的标签, 然后设置属性
-
格式
.类名称{
属性名称：值；
}
- 注意点:
- 每个HTML标签都可以设置类名
- 在同一个界面中class的名称是可以重复的
- 在编写class选择器时一定要在class名称前面加上点
- 类名的命名规范和id名称的命名规范一样
- 类名就是专门用来给CSS设置样式的
- 在HTML中每个标签可以同时绑定多个类名
格式:
<标签名称 class="类名1 类名2 ...">
标签选择器
-
作用
-
根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
-
格式
标签名称{
属性名称：值；
}
- 注意点:
- 标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
- 标签选择器无论标签藏得多深都能选中
后代选择器
-
作用
-
找到指定标签的所有特定的后代标签, 设置属性
-
格式
标签名称1 标签名称2{
属性:值;
}
-
先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后再设置属性
-
注意点:
-
后代选择器必须用空格隔开
-
后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
-
后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
-
后代选择器可以通过空格一直延续下去
子代选择器
-
作用
-
找到指定标签中所有特定的直接子元素, 然后设置属性
-
格式
标签名称1>标签名称2{
属性:值;
}
-
先找到所有名称叫做"标签名称1"的标签, 然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素
-
注意点:
-
子元素选择器之间需要用>符号连接, 并且不能有空格
-
子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
-
子代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
-
子元素选择器可以通过>符号一直延续下去
交集选择器
-
作用
-
给所有选择器选中的标签中, 相交的那部分标签设置属性
-
格式
标签名称1标签名称2{
属性:值;
}
- 注意点:
- 选择器和选择器之间没有任何的连接符号
- 选择器可以使用标签名称/id名称/class名称
- 交集选择器仅仅作为了解, 企业开发中用的并不多
并集选择器
-
作用
-
给所有选择器选中的标签设置属性
-
格式
标签名称1，标签名称2{
属性:值;
}
- 注意点:
- 并集选择器必须使用,来连接
- 选择器可以使用标签名称/id名称/class名称
兄弟选择器
相邻兄弟选择器 （CSS2）
-
作用
-
给指定标签后面紧跟的那个标签设置属性
-
格式
标签名称1+标签名称2{
属性:值;
}
- 注意点:
- 相邻兄弟选择器必须通过+连接
- 相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
通用兄弟选择器（CSS3）
- 作用
- 给指定选择器后面的所有选择器选中的所有标签设置属性
- 格式
标签名称1～标签名称2{
属性:值;
}
- 注意点:
- 通用兄弟选择器必须用~连接
- 通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
序选择器
-
作用
-
序选择器是CSS3中新增的选择器中最具代表性的，选中指定的任意标签然后设置属性
-
格式
-
同级别的第几个
- :first-child 选中同级别中的第一个标签
- :last-child 选中同级别中的最后一个标签
- :nth-child(n) 选中同级别中的第n个标签
- :nth-last-child(n) 选中同级别中的倒数第n个标签
- :only-child 选中父元素中唯一的标签
-
注意点
- 不区分类型
-
同级同类型的第几个
- :first-of-type 选中同级别中同类型的第一个标签
- :last-of-type 选中同级别中同类型的最后一个标签
- :nth-of-type(n) 选中同级别中同类型的第n个标签
- :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
- :only-of-type 选中父元素中唯一类型的某个标签
-
其他用法
- :nth-child(odd) 选中同级别中的所有奇数
- :nth-child(even) 选中同级别中的所有偶数
- :nth-child(xn+y)，x和y是用户自定义的, 而n是一个计数器, 从0开始递增
- :nth-of-type(odd) 选中同级别中同类型的所有奇数
- :nth-of-type(even) 选中同级别中同类型的所有偶数
- :nth-of-type(xn+y)，x和y是用户自定义的, 而n是一个计数器, 从0开始递增
属性选择器
-
作用
-
根据指定的属性名称找到对应的标签, 然后设置属性
-
格式
标签名称[attribute]{
属性:值;
}
- 根据指定的属性名称找到对应的标签, 然后设置属性
标签名称[attribute=value]{
属性:值;
}
- 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
- 最常见的应用场景, 就是用于区分input属性
- ```
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
-
属性的取值是以什么开头的
-
[attribute|=value] CSS2
-
[attribute^=value] CSS3
-
两者之间的区别,CSS2中的只能找到value开头,并且value是被-和其它内容隔开的，CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
-
属性的取值是以什么结束的
-
[attribute$=value] CSS3
-
属性的取值是否包含某个特定的值得
-
[attribute~=value] CSS2
-
[attribute*=value] CSS3
-
两者之间的区别,CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的，CSS3中的只要包含value就可以找到, 无论有没有被隔开
通配符选择器
- 作用
- 给当前界面上所有的标签设置属性
- 格式
*{
属性:值;
}
- 注意点:
- 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
网友评论