前端三剑客之CSS---伪类选择器和伪元素选择器

最新推荐文章于 2022-11-21 20:29:26 发布

Calarqiang

最新推荐文章于 2022-11-21 20:29:26 发布

阅读量492

点赞数 1

分类专栏：前端三剑客文章标签： css css3

本文链接：https://blog.csdn.net/Calarqiang/article/details/108108597

版权

前端三剑客专栏收录该内容

4 篇文章 0 订阅

订阅专栏

下面主要讲解css的伪类选择器和伪元素选择器的使用！

1. 伪类选择器

1.1 伪类的定义

由定义可知，伪类的伪即为虚伪、假的意思，它是一个不存在的特殊的类。它以:开头，区别于伪元素的::开头。

1.2 伪类的作用

用于描述一个元素的特殊状态，比如第一个元素、被点击的元素、鼠标移入的元素等。

1.3 伪类的语法---- nth-child和nth-of-type的区别和联系

联系

它们括号内的n的取值范围均是从0-n(n为正无穷)，注意：页面上的元素是从1开始的！
他们都可以选择父元素下对应的子元素。

区别：

1.3.1 nth-child(n)

ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
它表示所有后代元素的第n个元素，比如ul>li:nth-child(1)它表示ul的所有后代元素，并且只有li是ul的第一个元素，才能被选中。

1.3.2 nth-of-type(n)

ele:nth-of-type(n)是指父元素下第n个ele元素
它表示同类型的后代元素的第n个元素，比如ul>li:nth-of-type(1)它表示ul所有后代元素，并且是寻找所有li后代元素的第一个。

简单举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo</title>
</head>
<style>
  .demo li:nth-child(2) {
    color: red;
  }

  .demo li:nth-of-type(2) {
    color: green;
  }
</style>
<body>
<div>
  <ul class="demo">
    <p>zero</p>
    <li>one</li>
    <li>two</li>
  </ul>
</div>
</body>
</html>

结构为：第一个li中的one为红色，第二个li中的two为绿色。
分析：.demo li:nth-child(2) 表示选择demo后代元素中的第二个元素，并且该元素要是li类型，于是第一个li被选中！
.demo li:nth-of-type(2): 表示选择demo后代元素的第二个li元素，也就是第二个li元素！

扩展：如果去掉li，直接写成.demo :nth-child(2)和.demo :nth-of-type(2)会怎样？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo :nth-child(2){
            color:red;
        }
        .demo :nth-of-type(2){
            color:green;
        }
    </style>
</head>
<body>
    <ul class='demo'>
        <p>first p</p>
        <li>first li</li>
        <li>second li</li>
        <p>second p</p>
    </ul>
</body>
</html>

注意点：在.demo和后面的伪类选择器中必须加空格！！！必须加空格！！！必须加空格！！！因为这样就表示.demo的所有后代元素！此时的结果为如图：
在这里插入图片描述

解释：
.demo nth-child(2) 表示选择第二个元素，这个元素只是没有限定为什么类型的元素而已！
.demo nth-of-type(2) 表示选择第二个元素，具体元素是啥？就是.demo的所有后代元素，这里它有两种后代元素，分别是p元素和li元素，因此所有的p元素中的后代元素的第二个元素和所有li后代元素的第二个元素被选中。

1.4 伪类的特殊值

n n代表从0到正无穷
2n /even 表示选取偶数元素
2n+1 /odd 表示选取奇数元素
:first-child 表示选取后代元素的第一个元素
:last-child 表示选取后代元素的最后一个元素
:first-of-type 表示选取同类型后代元素的第一个元素。
:last-of-type 表示选取同类型后代元素的最后一个元素。

1.5 超链接的伪类

:link 正常的链接（未被访问的链接）
:visited 被访问过的链接
:hover 鼠标移入的元素/鼠标移入的链接
:active 鼠标长按不松的元素/鼠标移入的链接

疑问？为啥给访问过的超链接设置字体大小不起作用？

原因在于，隐私保护问题！如果字体大小起作用的话，那么用户的信息就会暴露，对用户不友好，但是它可以改变超链接的颜色，也仅仅只能改变超链接的颜色！

注意：

只有前两个伪类属于超链接，后两个伪类属于所有元素，不止是超链接所独有的！
给超链接同时设置这四个伪类的顺序必须保证l/v/h/a的顺序，不能颠倒，一旦颠倒，即不起作用。

1.6 否定伪类

语法：:not()
它的作用是排除某个特定的元素
例如：给所有ul中的li设置背景颜色，除了第二个元素
ul>li:not(:nth-of-type(2)){background-color:pink;}

1.7 伪类使用的注意点：

伪类中的n是从0开始的，而页面元素的索引是从1开始的。

2. 伪元素选择器

2.1 伪元素的定义

不存在的元素，它是一种特殊的页面元素，表示一个特殊的位置。

2.2 伪元素的作用

可以给第一个字母(::first-letter)、第一个段落(::first-line)、选中的元素(::selection)、在某个元素前面添加元素(::before)、在某个元素后面添加元素(::after)。
其中::before和::after使用最广泛！！！

2.3 伪元素的语法

以::开头，区别于伪类的:

2.4 伪元素的应用

首字下沉 (::first-letter)

<style>
p::first-letter{
color:blue;
font-size:30px;
                }
</style>


<p> Calarqiang is so cool!</P>

单个段落样式(::first-line) 在浏览器中如果一行放不下就会自动换行，当我们伸缩浏览器就可以看到效果。

<style>
p::first-line{
background-color:pink;
			 }
</style>
<p>Lorem xxxxxx 此处省略1000字</p>

添加特殊符号 (::before和::after)

<style>
p::before{
content:'[';
         }
 p::after{
content:']';
         }
</style>
<p> Calarqiang is a handsome man!</p>

选中元素变色（::selection）

<style>
p::selection{
background-color:yellowgreen;
			}
</style>
<p> Lorem xxx此处省略1000字</p>

2.5 伪元素的注意点

::before和::after必须结合content属性使用！
鼠标是不能选中通过伪元素添加的内容，比如上面的::before和::after生成的内容！

Calarqiang

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端三剑客之CSS---伪类选择器和伪元素选择器

下面主要讲解css的伪类选择器和伪元素选择器的使用！1. 伪类选择器1.1 伪类的定义由定义可知，伪类的伪即为虚伪、假的意思，它是一个不存在的特殊的类。它以:开头，区别于伪元素的::开头。1.2 伪类的作用用于描述一个元素的特殊状态，比如第一个元素、被点击的元素、鼠标移入的元素等。1.3 伪类的语法---- nth-child和nth-of-type的区别和联系联系它们括号内的n的取值范围均是从0-n(n为正无穷)，注意：页面上的元素是从1开始的！他们都可以选择父元素下.
复制链接

扫一扫