CSS选择器的介绍和使用.pdf

1、CSS 选择器的介绍和使用选择器的介绍和使用 CSS 选择器是什么？ CSS 选择器可以用于我们需要添加的样式的标签。想要在 HTMLl 页面中的元素实现一对 一，一对多或者多对一的控制，就得要使用 css 选择器，css 选择器进控制着 HTML 页面中 的元素。 如下图是选择器的格式： 在 前面的部分就是“选择器”，选择器决定了 中的在 HTML 网页中要使用的元素属 性。 选择器一般是我们需要改变样式的 HTML 元素，比如，等。 选择器格式中的每一条声明语句都是由“属性名:属性值”组成的，属性名和属性值之 间要用冒号“：”隔开，每一条声明语句的最后还要以英文的分号“;”结束。 我们知道

2、了 CSS 选择器是什么， CSS 选择器的种类是有很多的， 下面我们再来看一看 CSS 选择器的类型有哪些? CSS 选择器的类型有哪些？ 1、ID 选择器 2、Class 选择器（类选择器） 3、标签选择器（TAG 选择器） 4、群组选择器（分组选择器） 5、通配选择器 6、层次选择器 7、属性选择器 8、伪类选择器 常用的 CSS 选择器是 ID 选择器、Class 选择器、群组选择器、层次选择器、伪类选择器. 下面我们分别对以上的这些 CSS 选择器来说一说是如何使用的？ （1）ID 选择器：选择器： #elemwidth:100px; height:100px “#”:是 id 选择

3、符前缀，”elem”:是 id 名称 Div+id 属性的快捷键：div#elem+tab 键 注： id 选择器的规范： 在一个页面中，id 是唯一值（类似于我们的身份证号）； 命名规范，字母_-数字（命名的第一位不能是数字）； 除了常规写法外，命名方式还有：驼峰式、下划线式、短线式。 常规写法：leftsidebar 短线式写法：left-side-bar（W3C 推荐的写法） 驼峰式写法：leftSidebar 下划线式写法：left_side_bar 还有人喜欢这样写：left-side_bar 效果图： （2）Class 选择器：选择器： class 选择器也叫类选择器。 .redc

4、olor:red; 注： class 选择器是可以复用的。跟 id 选择器有很大区别，复用代码非常强。（在网页中 使用的频率非常强。） 可以添加多个 class 样式。跟 id 的区别：id 只能写一个，class 可以写多个，通过空格 隔开。 多个样式的时候，样式的优先级根据 CSS 决定，而不是 class 属性中的顺序。简单的 来说，看 CSS 中的顺序，并不是看 class 属性的顺序。 比如： .boxborder:2px black solid; color:blue; 标签+类的写法：div.elem 效果图： （3）标签选择器：标签选择器： 标签选择器也叫 TAG 选择器。 d

5、iv 注： 标签选择器是不常使用的。 使用的场景： 去掉默认样式：ullist-style:none; 层次选择器：atext-decoration:none; 效果图： （4）群组选择器：群组选择器： 群组选择器也叫分组选择器。 div,p,h1color:red; 效果图： （5）通配选择器：通配选择器： * （*就是所有标签的意思） 使用场景： 有时候需要去掉所有标签的默认样式。 效果图： （6）层次选择器：层次选择器： 后代：后代：M N 找 M 下的所有 N 父子：父子：MN 找 M 下的子标签 N 兄弟：兄弟：MN 找 M 标签下面的所有 N 标签 相邻：相邻：M+N 找 M 标签

6、下相邻的 N 标签 无论用、+都是找下面的兄弟，上面的兄弟是不会有任何作用的 效果图： （7）属性选择器：属性选择器： div class=”box” background:red; aaaa bbbb 选择器及说明：选择器及说明： Mattr:M 元素选择指定为元素选择指定为 attr 属性的集合属性的集合 Mattr=value:M 元素选择指定为元素选择指定为 attr 属性和属性和 value 的集合的集合 Mattr*=value:M 元素选择指定为元素选择指定为 attr 属性并且包含值为属性并且包含值为 value 的集合的集合 Mattr=value:M 元素选择指定为元素选择

7、指定为 attr 属性并且起始值为属性并且起始值为 value 的集合的集合 Mattr$=value:M 元素选择指定为元素选择指定为 attr 属性并且结束值为属性并且结束值为 value 的集合的集合 Mattr1attr2:M 元素选择满足多个属性的集合元素选择满足多个属性的集合 效果图： （8）伪类选择器：伪类选择器： CSS 伪类用于向某些元素添加特殊的效果伪类用于向某些元素添加特殊的效果。通常用于初始样式添加不上的情况通常用于初始样式添加不上的情况，这是就这是就 用伪类来添加效果。用伪类来添加效果。 以下这四个伪类主要是针对 a 标签的： :link访问前的选择器（只能添加给 a

8、 标签） :visited访问过后的选择器（只能添加给 a 标签） :hover鼠标移入时的选择器（所有标签都能够添加） :active鼠标按下时的选择器（所有标签都能够添加） 注： a 标签 如果这四个伪类都添加的话，那么它是有顺序的：L V H A。 link、visited 只能加给 a 标签；hover、active 所有标签都能够添加。 （Link 添加给 a 标签运行之后就被激活了，浏览器还有缓存，当访问后就不显示效果 了，那这时的效果显示就会是默认的蓝色。） 一般网站都只会设置 a color:red; a:hover color:blue; 效果图： 除了以上的四个伪类选择器还

9、有其他伪类选择器， 接下来我们一起来看看其他伪类选择器是 什么？ 其他伪类选择器：其他伪类选择器： :befor :after (特点：不用单独在创建一个标签，就可以给文本添加样式) 效果图： 当标签能够获取焦点的时候，会触发：focus input:focus background:red; 效果图： 结构性伪类选择器：结构性伪类选择器： :nth-of-type()、:nth-child() :first-of-type()、 :first-child() :last-of-type()、:last-child() :only-of-type()、:only-child() ()中可以添加的值：number(第几个，从 1 开始) | n(表示一个 0 到无穷大的数) 效果图： li border:1pxredsolid; li:nth-of-type(3) border:1pxredsolid; /通过此写法来实现隔两种颜色互相交替 li:nth-of-type(2n)background:red; li:nth-of-type(2n+1)background:blue; li:first-of-type background:red; li:last-of-type background:blue; li:only-of-type background:red;