CSS选择器的使用

1.标签选择器

作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性 ​

格式: ​

标签名称{ ​

属性:值; ​

} ​

注意点: ​ 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签 ​

2.标签选择器无论标签藏得多深都能选中 ​

3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)

2.id选择器

作用: 根据指定的id名称找到对应的标签, 然后设置属性 ​

格式: ​

#id名称{ ​

属性:值; ​

} ​

注意点: ​

1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id ​

2.在同一个界面中id的名称是不可以重复的 ​

3.在编写id选择器时一定要在id名称前面加上# ​

4.id的名称是有一定的规范的 ​

        4.1 id的名称只能由字母/数字/下划线，a-z 0-9 _ ​

        4.2 id名称不能以数字开头 ​

        4.3 id名称不能是HTML标签的名称，不能是a h1 img input ... ​

        4.4.一般我们不会使用id ,因为id是留给js使用的

3.类选择器

作用: 根据指定的类名称找到对应的标签, 然后设置属性 ​

格式: ​

.类名{ ​

属性:值; ​

}

注意点: ​

1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名

2.在同一个界面中class的名称是可以重复的 ​

3.在编写class选择器时一定要在class名称前面加上. ​

4.类名的命名规范和id名称的命名规范一样

5.类名就是专门用来给CSS设置样式的 ​

6.在HTML中每个标签可以同时绑定多个类名 ​ 格式: ​ <标签名称 class="类名1 类名2 ...">

格式: ​ <标签名称 class="类名1 类名2 ..."> ​

<!-- 正确写法 -->
<p class="p1 p2">
<!-- 错误写法 -->
<p class="p1" class="p2">

4.后代选择器

作用: 找到指定标签的所有特定的后代标签, 设置属性 ​

格式: ​

标签名称1 标签名称2{ ​

属性:值; ​

} ​

先找到所有名称叫做"标签名称1"的标签, 然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签, 然后在设置属性 ​ 例如：div p{}

注意点: ​ 1.后代选择器必须用空格隔开 ​

2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代 ​

3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器 ​

4.后代选择器可以通过空格一直延续下去

5.子元素选择器

作用: 找到指定标签中所有特定的直接子元素, 然后设置属性 ​

格式: ​

标签名称1>标签名称2{ ​

属性:值; ​

}

注意点: ​

1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 ​

2.子元素选择器之间需要用>符号连接, 并且不能有空格 ​

3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器 ​

4.子元素选择器可以通过>符号一直延续下去

6. 兄弟选择器

1.相邻兄弟选择器 CSS2 ​ 作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性 ​

格式: ​ 选择器1+选择器2{ ​

属性:值;

​ } ​

注意点: ​

1.相邻兄弟选择器必须通过+连接 ​

2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2.通用兄弟选择器 CSS3 ​

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性 ​

格式: ​ 选择器1~选择器2{ ​

属性:值; ​

}

注意点: ​ 1.通用兄弟选择器必须用~连接 ​

2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

7.序选择器（结构伪类选择器）

CSS3中新增的选择器最具代表性的就是序选择器 ​

1.同级别中的第几个 ​

:first-child 选中同级别中的第一个标签 ​

:last-child 选中同级别中的最后一个标签 ​

:nth-child(n) 选中同级别中的第n个标签 ​

:nth-child(odd) 选中同级别中的所有奇数 ​

:nth-child(even) 选中同级别中的所有偶数 ​

:nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

例如(3n+1)分别对应1,4,7..... ​ :nth-last-child(n) 选中同级别中的倒数第n个标签 ​ :only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效 ​ 注意点: 不区分类型 ​ ​

2.同级别同类型中的第几个 ​

:first-of-type 选中同级别中同类型的第一个标签 ​

:last-of-type 选中同级别中同类型的最后一个标签 ​

:nth-of-type(n) 选中同级别中同类型的第n个标签 ​

:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签 ​

:only-of-type 选中父元素的特定类型的唯一子元素

8.伪元素选择器

使用伪元素来表示元素中的一些特殊的位置 ​

::after ​ 表示元素的最后边的部分 ​ 一般需要结合content这个样式一起使用， ​ 通过content可以向after的位置添加一些内容

::before ​ 表示元素最前边的部分 ​ 一般需要结合content这个样式一起使用， ​ 通过content可以向before的位置添加一些内容 ​

::first-letter ​ 为第一个字符来设置一个样式 ​

::first-line ​ 为第一行设置一个样式

9、通配符选择器

作用: 给当前界面上所有的标签设置属性

​ 格式: ​

*{ ​       

属性:值; ​     

} ​

注意点: ​ 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上 的标签比较多, 那么性能就会比较差。