CSS选择器

CSS选择器

CSS选择器的作用

基础选择器

 

1、标签选择器

源代码

 

 

标签选择器(元素选择器)是指用HTML标签名称作为选择器，按名称的分类，为页面中某一类标签指定统一的CSS样式

作用

标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签和所有的<span>标签

优点

能够快速为页面中同类型的标签统一设置样式

缺点

不能设计差异化，只能选择全部的当前标签

2、类选择器

源代码

   

 

 

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

选择器在HTML中以class属性表示，在CSS中，类选择器以一个点 ” . ” 号表示

注意

1. 类选择器使用 ”.” (英文点号)进行标识、后面紧跟类名(类名自定义的、我们自己命名)
2. 可以理解为给这个标签起了个名字来表示
3. 长名称或词组可以使用中横线来为选择器命名
4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示
5. 命名要有意义，尽量使别人一眼就知道这个类名的目的
6. 命名规范

3、id选择器

源代码

   

 

 

Id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器，CSS中id选择器以 ” # ” 来定义

Id属性只能在每个HTML文档出现一次。

id选择器与类选择器的区别

1. 类选择器(class)好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
2. Id选择器好比人的身份证号码，全是中国唯一的，不得重复
3. Id选择器和类选择器最大的不同在使用次数上
4. 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

4、通配符选择器

源代码

   

 

 

通配符选择器使用 ” * ” 定义，它表示选取页面中所有元素(标签)

通配符选择器不需要调用，自动给所有的元素使用样式

特殊情况才使用

复合选择器

复合选择器由两个或多个基础选择器，通过不同的方式组合而成的，有以下几种

  

1. 后代选择器

源代码

 

 

后代选择器又称为包含选择器，可以选择父元素里面子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

元素1 元素2 {样式声明} 

1、元素1和 元素2中间用空格隔开

2、元素1是父级，元素2是子级，最终选择的是元素2

3、元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

4、元素1和 元素2可以是任意基础选择器

1. 子元素选择器

源代码

 

 

 

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

元素1>元素2 {样式声明}

1. 元素1和 元素2中间用 大于号 隔开
2. 元素1是父级，元素2是子级，最终选择的是元素2
3. 元素2必须是亲儿子，其孙子，重孙之类都不归他管，你也可以叫他亲儿子选择器

1. 并集选择器

源代码

 

 

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明

并集选择器是各选择器通过英文逗号( , )链接而成，任何形式的选择器都可以作为并集选择器的一部分

元素1, 元素2 {样式声明}

1、元素1和 元素2中间用逗号隔开

2、逗号可以理解为 和 的意思

3、并集选择器通常用于集体声明

 

伪类选择器

1. 链接伪类选择器

源代码

 

 

a:link                       选择所有未被访问的链接

a:visited                    选择所有已被访问的链接

a:hover                     选择鼠标指针位于其上的链接

a:active                     选择活动链接 (鼠标按下未弹起的链接)

链接伪类选择器注意事项

1. 为了确保生效，按照LVHA的顺序声明:link — :visited — :hover — :active
2. 因为a链接在浏览器中具有默认样式，所以在实际工作中都需要给链接单独指定样式

1. 结构伪类选择器

源代码

 

 

 

E:first-child                                匹配父元素中的第一个子元素E

E:last-child                                匹配父元素中的最后一个E元素

E:nth-child(n)                              匹配父元素中的第n个子元素E

E:first-of-type                                指定类型E的第一个

E:last-of-type                                指定类型E的最后一个

E:nth-of-type(n)                              指定类型E的第n个

1. n可以是数字，关键字和公式
2. n如果是数字，就是选择第n个子元素，里面数字从1开始…
3. n可以是关键字：even偶数，odd奇数
4. n可以是公式：常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)

 

区别：

1. nth-child对父元素里面的所有孩子顺序选择(序号是固定的)先找到第n个孩子，然后看看是否和E匹配
2. nth-of-type对父元素里面指定子元素进行顺序选择，先去匹配E，然后再根据E找第n个孩子

1. 伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构

源代码

 

 

 

::before                                在元素内部的前面插入内容

::after                                  在元素内部的后面插入内容

注意：

1. before和after创建一个元素，但是属于行内元素
2. 新创建的这个元素在文档树是找不到的，所以我们称为伪元素
3. 语法：父元素::before{}
4. before和after必须有content属性
5. 伪元素选择器和标签选择器一样，权重为1

focus伪类选择器

源代码

 

 

 

用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说