标签选择器
- 作用：找到界面中的所有标签，然后修改其属性
- 格式：
标签名称{
属性：
}
- 注意点：
- 1️⃣所有标签都会更改，并不能更改某一个
- 2️⃣无论标签位置，都可以被选择到
- 3️⃣所有HTML标签都能作为标签选择器
- 缺陷：所有标签都会被更改，特例标签只能用id选择器或类选择器
id选择器
- 作用：根据id名称，找到对应标签，设置其内容
- 格式：
#id名称{
属性：
}
- 注意点：
- 1️⃣同一界面中id不能重复
- 2️⃣所有HTML标签都有id属性
- 3️⃣一定要加#
- 4️⃣id命名规范：
- ①只能是字母、数字、下划线
- ②不能以数字开头
- ③名称不能与HTML标签同名
- ④id是留给js使用的，不要乱用---推荐类选择器
类选择器
- 作用：根据类名称，找到对应标签，设置其内容
- 格式：
.类名称{
属性：
}
<标签名称 class="类名1 类名2 类名3 ........">
- 注意点：
- 1️⃣同一界面中class能重复，
- 2️⃣所有HTML标签都有class属性
- 3️⃣一定要加.
- 4️⃣class命名规范：
- ①只能是字母、数字、下划线
- ②不能以数字开头
- ③名称不能与HTML标签同名
- 5️⃣类名是给某一个特定的标签设置样式的 --- id给js使用，clas给css使用
- 6️⃣一个标签类名可以有多个class
id和class的区别
- id：相当于人的身份证，不可重复
- class：相当于人的名称，可重复
- 一个html标签只可以有一个id，但可以有多个class
- id是以#开头
- class是以.开头
- id给js使用,除非特殊情况,否则不要使用id设置样式
- class可以排除一些冗余代码
后代选择器（可以找到嵌套较深的标签）
- 作用:找到指定标签的所有后代(儿子 孙子被嵌套等标签)标签,设置属性
- 注意点
- 1️⃣后代选择器必须用空格隔开
- 2️⃣后代不仅仅是儿子还有孙子和重孙
- 3️⃣可以和纯id和纯类或纯标签一起使用--效果是一样的
- 4️⃣可以多次使用后代---嵌套较深时
子元素选择器
- 作用：找到指定标签中所有特点的直接子元素，然后设置属性
- 标签1>标签2{ 属性：值 }
- 注意点：
- 1️⃣只会查找儿子，不会查找孙子等
- 2️⃣以>连接，前后不能有空格
- 3️⃣标签可以用id、class、类选择器
- 4️⃣可以多次使用---嵌套较深时
后代选择器和子元素选择器异同
- 区别
- 1️⃣后代使用空格；子元素使用>
- 2️⃣后代会选择指定标签的所有后代（儿子孙子重孙等）；子元素只会选中指定标签的指定后代（只会选定儿子）
- 共同点
- 1️⃣后代和子元素都可以使用id、class、标签名称作为选择器
- 2️⃣后代和子元素可以通过连接符号一直延续
- 选择器1>选择器2>选择器3>选择器4>选择器5
- 如何选择
- 若想选定所有标签则用后代；若只想选定某个特定标签则用子元素
交集选择器
- 作用：给所有选择器选中的标签中，相交的部分设置属性
- 注意点
- 1️⃣选择器和选择器之间没有连接符号
- 2️⃣选择器可以是id、class、类标签---随意配合使用
并集选择器
- 作用：给所有选择器选中的标签并集部分设置属性
- 注意点
- 1️⃣选择器和选择器之间逗号连接符号
- 2️⃣选择器可以是id、class、类标签---随意配合使用
兄弟选择器
- 作用：只能选中同级关系的标签
- 1.相邻兄弟选择器CSS2
- 指定标签后面紧跟的标签，隔开的无法选中
- 必须通过加号连接
- 2.通用兄弟选择器CSS3
- 指定标签后面的指定的所有选择器选中（无论有没有被隔开都可以被选中）的所有标签设置属性
- 必须通过~连接
- 注意点
- 1️⃣选择器和选择器之间加号+连接符号
- 2️⃣选择器可以是id、class、类标签---随意配合使用
序选择器（个数选择器CSS3）--不需要id class
- CSS3新增选择器，最具代表性的是序选择器
- 1.同级别的第几个
- first-child -- 同级别的第一个标签
- 注意点：不会自动区分类型是否一致
- last-child -- 同级别的最后一个标签
- 注意点：不会自动区分类型是否一致
- nth-child（n） --- 同级别第n个
- 注意点：不会自动区分类型是否一致
- only-child -- 只拥有一个子元素的标签--无论类型
- 注意点：不会自动区分类型是否一致
- first-child -- 同级别的第一个标签
- 2.同类型的第几个
- first-of-type -- 同级别中同类型的第一个
- last-of-type -- 同级别中同类型的最后一个
- nth-of-type（n） -- 同级别中同类型的第n个
- nth-last-of-type（n） -- 同级别中同类型的倒数第n个
- only-of-type -- 同级别中只拥有唯一类型的标签
- 3.选择所有的奇数或偶数标签
- nth-child（odd） --- 同级别所有奇数标签
- nth-child（even） --- 同级别所有奇数标签
- nth-of-type（odd） --- 同级别中同类型所有奇数标签
- nth-of-type（even） --- 同级别中同类型所有奇数标签
- nth-child（xn+y） --- 同级别所有自定义标签
- 用户自定义格式 x和y
- n从0开始到指定标签中总个数n
属性选择器
- 作用：根据指定的属性名称找到对应的标签，设置其属性
- [attribute]
- p[id] -- 所有p标签，并设置有id属性的p标签
- [attribute=value]
- 找到指定属性，并且属性的取值=value的标签，设置其属性
- p[class=abc] -- 所有p标签，并且class值为abc的p标签
- 最主要的用途：设置表单的type
- 1.属性是以什么开头的
- [attribute|=value] CSS2
- [attribute `=value] CSS3
- 区别：CSS2只能找到有字符隔开的，并不能找到粘合包含在一起的；CSS3只要以value开头的都可以找到
- 2.属性的取值是以什么结尾
- [attribute $=value] CSS3
- 3.属性的取值是否包含某个特定的值
- [attribute ~=value] CSS2
- [attribute *=value] CSS3
- 注意：CSS3中只要包含value，无论如何隔开或者哪个位置都可以被选中；CSS2中只能找到value被空格隔开的
- 注意掌握CSS3新出的
通配符选择器
- 作用：给当前界面上所有的标签设置属性
- 以星号开头*
- 注意点：若当前界面上标签很多的时候，通配符选择器性能会很差，慎用
网友评论