类选择器、伪类选择器、伪元素选择器学习总结 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中看到样式。


<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="utf-8">

        <style>


        div::before {

              content: "刘昊然";

              background-color: pink;

              border: 1px solid red;

              width: 100px;

              height: 100px;

              display: block;

          }

        div::after {

              content: "你们的";

              display: block;

              width: 50px;

              height: 50px;

              border: 1px solid skyblue;

          }
        </style>

      </head>

      <body>

            <div>是</div>

            <p></p>

      </body>

</html>

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

综上可以看出：

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

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

最后编辑于：2019.12.16 17:14:11