CSS中的伪类、伪元素、子元素的伪类和否定伪类

---

前言

伪类、伪元素和子元素的伪类都有一个伪字，可能用的时候还好，一让说就会记混，所以来分别说一下这三个。最后顺带再说一下否定伪类。

---

一、伪类

1.什么是伪类？

理论：

伪类，它不是真正类（在css中的类是class）。
而伪类专门用来表示元素的一种特殊的状态
比如：访问过的超链接 普通的超链接 获取焦点的文本框

---

2.为什么要用伪类？

理论：

是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
因为在页面中无法正常描述，比如一个按钮，正常的时候是灰色背景，鼠标悬浮的时候是蓝色背景，这种情况你在页面中无法描述

---

3.常用的给链接定义样式

理论：

有4个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态
例如：
（1）未访问过的的链接 a:link

（2）访问过的链接 a:visited

（3）鼠标经过的链接 a:hover

（4）正在点击的链接 a:active

注意：因为a链接在浏览器中具有默认样式，所以我们实际工作中需要给链接单独指定样式
示例：

a{
    color:gray; /* 默认链接颜色设置为灰色 */
}
a:hover{
    color:red;  /* 鼠标经过变成红色 */
}

---

4.其他

1.获取焦点

a:focus
示例：

input:focus{
    background-color:green;
}

---

2. 选中的元素

a::selection
注意：火狐浏览器有兼容
浏览器前缀前面的文章有写，有兴趣的话可以点链接看一下。link
注意：前缀并非所有都是需要的，但通常你加上这些前缀不会有任何害处。
只要记住一条，把不带前缀的版本放到最后一行
示例：

p::-moz-selection{
     background-color:pink;
 }
p::selection{
     background-color:pink;
 }

---

二、伪元素

理论：

和伪类很像，元素就是标签 ，使用伪元素来表示元素中的一些特殊的位置。

1.为元素的第一个字符设置一个特殊的样式

示例：

p:first-letter{
    color:red;
}

---

2.为元素的第一行设置一个背景颜色

示例：

p:first-line{
    background-color:green;
}

注意：改变浏览器窗口大小，仍然是第一行，和文字内容的多少无关。

---

3.为元素和文字之间的空隙处的位置 插入一段内容

（1）一般before 都需要结合content样式一起用， 通过content 可以向位置添加一些内容
示例：

p:before{
    content:"我会出现在整个段落的最前面 ";
    color: red;
}

（2）为元素和文字之间的空隙处的位置 后面插入一段内容，与before同理也需要结合content使用。
示例：

p:after{
     content:"我会出现在整个段落的最后面";
     color: green;
}

---

三、子元素的伪类

理论：

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

1. :first-child 选择第一个子元素

示例：

 p:first-child{
     background: pink;
 }

---

2. :last-child 选择最后一个子元素

示例：

 p:last-child{
	 background: pink;	    	
}

---

3. :nth-child ()选择指定位置的子元素

注意：该选择器后边可以指定一个参数，指定要选中第几个子元素
示例：

p:nth-child(1){
     color: yellowgreen;
 }
p:nth-child(even){  /* 偶数 */
     color: palevioletred;
 }	
 p:nth-child(odd){  /* 奇数 */
     color: blueviolet;
 }

---

4. :nth-last-child（）从后往前选择指定位置的子元素

注意：该选择器后边可以指定一个参数，指定要选中第几个子元素
示例：

p:nth-last-child(1){
     color: yellowgreen;
 }

---

5. :first-of-type选中指定类型的第一个子元素

示例：

p:first-type-of{
     color: yellowgreen;
 }

---

6. :last-of-type选中指定类型的最后一个子元素

示例：

 p:nth-of-type{
     color: yellowgreen;
 }

---

7. :nth-of-type（）选中指定类型指定位置的子元素

示例：

p:nth-type-of(1){
     color: yellowgreen;
}

---

8. :nth-last-of-type（）从后往前选中指定类型指定位置的子元素

示例：

p:nth-last-of-type(1){
     color: yellowgreen;
}

注意：

(1) child 是在所有子元素中排列

(2) type 是在当前元素中排列
以上两种选择子元素的方式 nth-后面的数字可以是关键字或者表达式。
例如：2n-1，5n等。这种表达式
:only-child 唯一的子元素；独生子
:only-of-type 父元素中指定类型里唯一的子元素
:empty 空的子元素

四、否定伪类

理论：

可以从选中的元素中剔除某些元素。
:not(选择器)
示例：

p:not(.text){
    color:red;
}

---

以上就是我对今天这四种简单的理解与应用。

写在最后

✨$慢慢变好，我是，你也是。$

👍 $您的点赞是我前进的动力！$

⭐️ $您的收藏是我努力的方向！$

✏️ $您的评论是我进步的源泉！$