类选择器、伪类选择器、伪元素选择器学习总结 Day1

先来看一下如标题三个选择器的写法：

.one类选择器 :hover伪类选择器 ::伪元素选择器

类选择器是一个点，伪类选择器是两个点，伪元素选择器是三个点。

接下来我们分别做一个介绍：

一、类选择器

类选择器最大的优势是可以给 元素对象 定义单独或相同的样式。

.类名 { 属性1: 属性值1; 属性2: 属性值2;}

小技巧：
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名css选择器。
3.不要用纯数字、中文等命名，尽量使用英文字母来表示。

二、伪类选择器

伪类选择器是用于向某些选择器添加特殊的效果。

比如给链接添加特殊效果；比如可以选择第1个、第n个元素。

链接伪类选择器

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接

注意：以上顺序尽量不要颠倒，按照 lvha 的顺序。
love hate 爱上了讨厌 记忆法 或者 lv 包包非常 hao。

结构（位置）伪类选择器

:first-child 选取属于其父元素的首个子元素的指定选择器
:last-child 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第n个字元素，不论元素的类型
:nth-last-child(n) 选择器匹配属于其元素的第n个字元素的每个元素，不论元素类型，从最后一个子元素开始计数。n可以是数字、关键词或公式

li:first-child { /* 选择第一个孩子 */

color: blue;

}

li:last-child { /* 选择最后一个孩子 */

color: purple;

}

li:nth-child(4) { /* 选择第4个孩子 */

color: red;

}

目标伪类选择器

:target 目标伪类选择器：选择器可用于选取当前活动的目标元素。

:target {

color: purple;

font-size: 14px;

}

三、伪元素选择器(::brfore和::after)

之所以被称为伪元素是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素是一样的，可以对其使用诸如页面元素一样的css样式，表面看上去貌似是页面的某些元素展现出来的效果，实际上是css样式展现的行为，因此被称为伪元素。

伪元素在body的结构是无法审查的，只能在css中看到样式。

    

        

        

      

      

            
是

            


      

注意：
1.伪元素::before和::after添加的内容默认是inline元素，即行内元素；
2.伪元素的content属性是其的内容；设置::before和::after时必须设置其content属性，否则伪元素就不起作用。

综上可以看出：

类选择、伪类选择器就是选取对象，做效果使用的。

伪元素选择器 本质上是 插入一个元素（标签or盒子） 只不过是行内元素（ span a ）形式的盒子，若要给伪元素宽和高的话，得把其转化为快元素dispaly:block。