伪类选择器

最新推荐文章于 2024-04-14 14:25:59 发布
最新推荐文章于 2024-04-14 14:25:59 发布
阅读量137 收藏 1
点赞数
文章标签： 前端 css 笔记 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52874247/article/details/132189898
版权

目录

一、概念及作用

二、分类

三、动态伪类

四、结构伪类

五、否定伪类

六、UI伪类

​七、目标伪类

 八、语言伪类（了解即可）

一、概念及作用

1、概念

像类，但不是类，是元素的一种特殊状态

2、作用

选中特殊状态的元素

二、分类

1、动态伪类

2、结构伪类

3、否定伪类

4、UI伪类

5、目标伪类

6、语言伪类

三、动态伪类

1、类型

（1）:link  超链接未被访问的状态

（2）:visited  超链接访问过的状态  

（3）:hover  鼠标悬停在元素上的状态

（4）:active  元素激活的状态

（5）:focus  获取焦点的元素

注意：

link、visited、hover、active四个有严格的先后顺序；

表单类元素才能使用 :focus伪类

2、举例

（1）代码

        /* 选中的是没有访问过的a元素 */
        a:link {
            color: aqua;
        }
        /* 选中的是访问过的a元素 */
        a:visited {
            color: hsl(323, 100%, 50%);
        }
        /* 选中的是鼠标悬浮状态的a元素 */
        a:hover {
            color: cornflowerblue;
        }
        /* 选中的是激活状态的a元素 */
        a:active {
            color: darkgray;
        }
        input:focus {
            color: #7a0ae9;
            background-color: cornsilk;
        }
        select:focus {
            color: coral;
            background-color: #00a6ff;
        }
<a href="https://www.jd.com">京东</a>
<a href="https://www.bilibili.com">哔站</a>
<br>
<input type="text">
<select>
    <option value="one">1</option>
    <option value="two">2</option>
</select>

（2）运行效果

运行效果视频

四、结构伪类

1、代码

/* 选中的是div的第一个儿子p元素 —— 结构1 */
/* div>p:first-child {
     color: #ff9f7f;
} */
/* 选中的是div的第一个儿子p元素 —— 结构2 */
/* div>p:first-child {
     color: #ff9f7f;
} */
/* 选中的是div的第一个儿子p元素 —— 结构3 */
/* div>p:first-child {
     color: #ff9f7f;
} */
/* 选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 —— 结构4 */
/* div p:first-child {
     color: #ff9f7f;
} */
/* 选中的是div的后代p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 —— 结构5 */
/* div p:first-child {
     color: #ff9f7f;
} */
/* 选中的是p元素，且p的父级是谁无所谓，但p必须是其父亲的第一个儿子 —— 结构6 */
/* p:first-child {
     color: #ff9f7f;
} */
/* 选中的是div的最后一个儿子p元素 —— 结构7 */
/* div>p:last-child {
     color: #ff9f7f;
} */
/* 选中的是div的第n个儿子p元素 —— 结构8 */
/* div>p:nth-child(3){
     color: #ff9f7f;
} */
/* 选中的是div的偶数个儿子p元素 —— 结构9 */
/* div>p:nth-child(2n){
     color: #ff9f7f;
} */
/* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算的） —— 结构10 */
/* div>p:first-of-type{
     color: #ff9f7f;
} */
/* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算的） —— 结构11 */
/* div>p:last-of-type{
     color: #ff9f7f;
} */
/* 选中的是div的倒数第n个儿子p元素（按照所有同类型兄弟计算的） —— 结构12 */
/* div>p:nth-of-type(3){
     color: #ff9f7f;
} */
/* 选中的是div的第n个儿子p元素（按照所有兄弟计算的） —— 结构13 */
/* div>p:nth-last-child(3){
     color: #ff9f7f;
} */
/* 选中的是div的倒数第n个儿子p元素（按照所有同类型兄弟计算的） —— 结构14 */
/* div>p:nth-last-of-type(3){
     color: #ff9f7f;
} */
/* 选中的是没有兄弟的span元素 —— 结构15 */
/* span:only-child {
     color: #ff9f7f;
} */
/* 选中的是没有同类型兄弟的span元素 —— 结构16 */
/* span:only-of-type {
     color: #ff9f7f;
} */
/* 选中的是html根元素 */
/* :root {
     background-color: #99d21e;
} */
/* 选中的是没有内容的div元素 */
div:empty {
     width: 100px;
     height: 100px;
     background-color: #4deded;
}
    <!-- 结构1 -->
    <!-- <div>
        <p>张三：93分</p>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
    </div>    -->
    <!-- 结构2 -->
    <!-- <div>
        <span>张三：93分</span>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
    </div> -->
    <!-- 结构3 -->
    <!-- <div>
        <marquee>
            <p>张三：93分</p>
        </marquee>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
    </div>  -->
    <!-- 结构4 -->
    <!-- <div>
        <marquee>
            <p>张三：93分</p>
        </marquee>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
    </div>  -->
    <!-- 结构5 -->
    <!-- <p>测试1</p>
    <div>
        <p>测试2</p>
        <marquee>
            <p>测试3</p>
            <p>张三：93分</p>
        </marquee>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
    </div> -->
    <!-- 结构6 -->
    <!-- <p>测试1</p>
    <div>
        <p>测试2</p>
        <marquee>
            <p>测试3</p>
            <p>张三：93分</p>
        </marquee>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
    </div> -->
    <!-- 结构7 -->
    <!-- <div>
        <p>张三：93分</p>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
        <p>孙七：74分</p>
    </div>    -->
    <!-- 结构8 -->
    <!-- <div>
        <p>张三：93分</p>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
        <p>孙七：74分</p>
    </div>   -->
    <!-- 结构9 -->
    <!-- <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
    </div> -->
    <!-- 结构10 -->
    <!-- <div>
        <span>测试</span>
        <p>张三：93分</p>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
        <p>孙七：74分</p>
    </div>   -->
    <!-- 结构11 -->
    <!-- <div>
        <span>测试</span>
        <p>张三：93分</p>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
        <p>孙七：74分</p>
        <span>测试</span>
    </div>  -->
    <!-- 结构12 -->
    <!-- <div>
        <span>测试1</span>
        <p>张三：93分</p>
        <span>测试2</span>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
        <p>孙七：74分</p>
        <span>测试3</span>
    </div>  -->
    <!-- 结构13 -->
    <!-- <div>
        <span>测试1</span>
        <p>张三：93分</p>
        <span>测试2</span>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
        <p>孙七：74分</p>
        <span>测试3</span>
    </div>  -->
    <!-- 结构14 -->
    <!-- <div>
        <span>测试1</span>
        <p>张三：93分</p>
        <span>测试2</span>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
        <p>孙七：74分</p>
        <span>测试3</span>
    </div>  -->
    <!-- 结构15 -->
    <!-- <div>
        <span>测试1</span>
    </div>
    <div>
        <span>测试2</span>
        <p>张三：93分</p>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
        <p>孙七：74分</p>
        <span>测试3</span>
    </div>     -->
    <!-- 结构16 -->
    <!-- <div>
        <span>测试1</span>
    </div>
    <div>
        <span>测试2</span>
        <p>张三：93分</p>
        <p>李四：88分</p>
        <p>王五：80分</p>
        <p>赵六：76分</p>
        <p>孙七：74分</p>
    </div>     -->
    <!-- 结构17 -->
    <div></div>

关于n的值：

（1）0或不写：什么都选不中——几乎不用

（2）n：选中所有子元素——几乎不用

（3）1~正无穷的整数：选中对应序号的子元素

（4）2n或even：选中序号为偶数的子元素

（5）2n+1或odd：选中序号为奇数的子元素

（6）-n+3：选中的是前3个（公式中n从0开始计算）

五、否定伪类

1、作用

排除满足括号中条件的元素

2、格式

:not(选择器) 

3、举例

/* 选中的是div的儿子p元素，但是排除类名为fail的元素 */
/* div>p:not(.fail){
       color: red;
} */
/* 选中的是div的儿子p元素，但是排除title属性值以“加油”开头的 */
/* div>p:not([title^="加油"]){
       color: red;
} */
/* 选中的是div的儿子p元素，但是排除第一个儿子p元素 */
div>p:not(:first-child){
    color: red;
}
<div>
    <p>张三：93分</p>
    <p>李四：88分</p>
    <p>王五：80分</p>
    <p class="fail" title="加油，赵六">赵六：56分</p>
    <p class="fail" title="加油，孙七">孙七：54分</p>
</div>

六、UI伪类

1、代码

/* 选中的是勾选的复选框或单选按钮 */
/* 复选框和单选框的背景色是受到限制的 */
input:checked {
    width: 100px;
    height: 100px;
}
/* 选中的是被禁用的input元素 */
input:disabled {
    background-color: #f0f068;
}
/* 选中的是可用的input元素，去掉:enabled效果一样 */
input:enabled {
    background-color: #db7474;
}
<input type="checkbox">
<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="text">
<input type="text" disabled>

2、效果

七、目标伪类

1、格式

:target   选中锚点指向的元素

2、举例

（1）代码

div {
    background-color: #e79292;
    width: 400px;
    height: 50px;
}
div:target{
    background-color: #9ddc14;
}
    <a href="#one">去看1</a>
    <a href="#two">去看2</a>
    <a href="#three">去看3</a>
    <a href="#four">去看4</a>
    <a href="#five">去看5</a>
    <a href="#six">去看6</a>
    <div id="one">1</div>
    <br>
    <div id="two">2</div>
    <br> 
    <div id="three">3</div>
    <br> 
    <div id="four">4</div>
    <br> 
    <div id="five">5</div>
    <br> 
    <div id="six">6</div>
    <br>

（2）效果（点击去看4,4的颜色改变）

 八、语言伪类（了解即可）

1、格式

:lang()   根据指定的语言选择元素（本质是看lang属性的值）

2、举例

（1）代码

div:lang(en) {
    color: aqua;
}
/* div:lang(zh-CN) {
    color: burlywood;
} */
:lang(zh-CN) {
    color: #5059ff;
}
    <div>您好</div>
    <div lang="en">html</div>
    <p>前端</p>
    <span>css</span>

（2）运行效果

 

小小小小小阿玲
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS常用伪类选择器详解
qq_43293207的博客
03-24 1万+
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
CSS - 常用的伪类选择器简单介绍与基本使用
都随它大小便吧
02-28 5851
CSS 伪类选择器用于选择元素的特定状态或位置，以便对其应用样式。以下是一些常见的伪类选择器及其作用。
CSS基础之伪类选择器（如果想知道CSS的伪类选择器知识点，那么只看这一篇就足够了！）
最新发布
秋刀鱼不做梦的编程日常
04-14 2423
CSS基础之伪类选择器（如果想知道CSS的伪类选择器知识点，那么只看这一篇就足够了！）
【从零开始学CSS | 第二篇】伪类选择器
fckbb的博客
07-13 2792
上一篇文章我们详细的为大家介绍了一些常见的选择器，这几篇我们将再次介绍CSS中的一个常见选择器——伪类选择器，他的种类繁多，希望各位可以对它有一个比较好的掌握程度。
CSS 选择器分栏——伪元素与伪类选择器
浅陌繁星的博客
11-29 1485
伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。。伪元素是一个附加在选择器末的关键词，允许你对被选择元素的特定部分修改样式。
【CSS 知识总结】第四篇 - CSS 选择器-伪类和伪元素
BraveWangDev
03-20 2183
CSS 的三大特征；CSS 选择器的优先级；CSS 优先级的计算规则；CSS 选择器的权重；CSS 选择器面试题；本篇，介绍 CSS 选择器：伪类和伪元素；伪类用于定义元素的特殊状态；同一元素，根据不同状态，显示不同样式，样式随状态（用户行为）变化而变化；与普通 CSS 类相比较，伪类选择器只有处于 dom 树无法描述的状态下，才能为元素添加样式；所以被称作伪类；CSS 伪元素用于设置元素指定部分的样式；；
结构伪类选择器（总结）
12-22
什么是结构伪类选择器？ 结构伪类选择器是针对HTML的结构进行分类的选择器，特征就是位置 分为三大类 一类 e:first-child e:last-child e:only-child e:nth-child(n/even/odd)隔行换色，列表换色 e:nth-last-child ...
伪类选择器的使用和语法
09-19
伪类选择器的使用和语法 摘要：本文将详细介绍伪类选择器的使用和语法，包括伪类选择器的作用、语法、案例演示和注意事项等。 一、伪类选择器的作用 伪类选择器是一种特殊的选择器，可以选中某些元素，并且可以...
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
11-21
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
四种css 伪类选择器
12-13
X:after  Example Source Code ：.clearfix:after {content: “”;...:after伪类与content结合使用，用于往元素类追加内容。:after伪类还有个妙用：用于产生阴影，点击这里查看。X:hover  Example S
伪类选择器的简单介绍
weixin_45824120的博客
11-24 3224
一、伪类选择器介绍 伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。 伪类的功能和一般的DOM中的元素样式相似，但和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。 二、伪类选择器的分类 伪类选...
4.8 否定伪类选择器
u010502101的博客
07-01 909
否定伪类选择器从一组元素中将符合要求的元素剔除出去。 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;style type=&quot;text/css&q
CSS进阶知识（伪类选择器，伪类等）
m0_61213423的博客
11-21 302
1、比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示，(并集选择器)分组选择器是单独计算的。样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果， 是看选择器的权重，谁的权重高，就有效果。3、选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器 量变达不到质变。定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定某一定。兼具块元素和行内元素的特点，即不会独占一行，可以设置宽高。通配符、子选择器、相邻选择器等。
提升你的CSS技能：深入理解伪类选择器和伪元素选择器！
云端源想的博客
04-02 1304
在CSS的世界里，有些选择器并不像它们的名字那样直接。今天，我们要探索的是两种特殊的选择器：伪类选择器和伪元素选择器。它们虽然名字相似，但功能和用途却大有不同。下面就让我们一起来了解一下它们是如何在我们的页面布局中扮演着不可或缺的角色的吧。
【实习第四天】css其他选择器
weixin_48000103的博客
11-21 144
【代码】【实习第四天】css其他选择器。
html否定伪类选择器,CSS 否定伪类是什么？
weixin_35297190的博客
06-04 474
CSS 否定伪类是:not(selector)，下面本篇文章给大家介绍一下否定伪类 :not(X)。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。:not(selector)是CSS中的一个否定伪类(选择器)，并且接受一个简单的选择器作为参数。本质上，可以使任一其他选择器(作为参数)。:not(选择器)匹配传递参数选择器未选择的元素。传递参数或许不包括增加的选择器或者伪元素选择器...
HTML初识4
chp12520的博客
11-21 133
定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定。
CSS结构伪类选择器之否定伪类:not()
joe0235的博客
12-05 3972
结构伪类选择器是针对 HTML 层级结构的伪类选择器。常用的结构化伪类选择器有：:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器、:nth-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器、:empty选择器、:target选择器。
html伪类选择器代码
11-13
1. :hover 伪类选择器用于鼠标悬停在元素上时的样式变化： ```css a:hover { color: red; } ``` 2. :active 伪类选择器用于元素被激活（例如被点击）时的样式变化： ```css button:active { background-color: ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值