关于伪类选择器的介绍

已于 2022-11-21 20:20:58 修改
阅读量273 收藏
点赞数
文章标签： css 前端 html
于 2022-11-21 20:19:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51769213/article/details/127971530
版权 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度热搜</title>
    <style>
        p {
            font-size: 30px;
        }

        #d1 {
            color: red;
            font-size: 25px;
        }

        #d2 {
            color: orange;
            font-size: 25px;
        }

        #d3 {
            font-size: 25px;
            color: gray;
        }

        #s1 {
            font-size: 25px;

        }

        a:hover {
            color: rgb(225, 16, 16);
        }

        a {
            text-decoration: none;
            color: #000;
        }
    </style>
</head>

 一 、伪类（不存在的类，特殊的类）

          定义：不真实存在的类，是一种特殊的类，它表示的元素的一种状态，不是固定某一个

常见的伪类选择器

              语法使用‘:’开头

              :first-child   第一个元素

              :last-child    最后一个元素

              :nth-child()   选中第几个元素

                特殊值：

                  2n或even    偶数

                  2n+1或odd   奇数

以上这些伪类都是根据所有的子元素进行排序

  :first-of-type 第一个元素

  :last-of-type  最后一个元素

 :nth-of-type()   选中第几个元素

功能跟上面相似，不同的是，这是在同类型的子元素中去选择

二、:not() 否定伪类

将符合条件的元素从选择器中去除  

三、a元素的伪类

1、:link  没有访问过的状态

2、:visited 访问过的状态

3、:hover  鼠标移入的状态

4、:active  鼠标点击后的状态

     注意：

       1、:link和:visited 是a标签独有的伪类

       2、由于隐私问题，:link和:visited只能设置字体颜色

       3、:hover和:active  针对所有的元素

四、伪类选择器

1、::first-letter  第一个字母

2、::first-line  第一行

3、::selection  选中的内容

4、::before  在元素的最前面，必须要配合content样式名使用

5、::after  在元素的最后面 必须要配合content样式名使用

五、样式的继承

            定义：给父元素或者祖先元素设置有关样式，它会继承到子元素或后代元素上，

            优势：一般情况下，样式的继承是对我们开发是有利，不需要额外调整

            注意：不是所有的样式都能继承，一般情况布局上样式

六、选择器的权重

      样式冲突：给同一个元素设置相同的样式名，不一样的样式值，最终哪个样式有效果，

       是看选择器的权重，谁的权重高，就有效果

         选择器的权重

           内联样式                         

           id选择器                

           class选择器/属性选择器     

           元素选择器                 

           通配选择器                 

           继承样式     

由上到下权重依次降低           

        注意：

          1、如果选择器的权重一样，那么谁靠下，就谁生效

          2、要让所有选择器的权重相加，最终谁大听谁的

          3、所有的选择器权重相加，最高也不会超过上一等级的权重,如再多的类选择器权重相加，也不会超过id选择器权重

          4、在并集选择器（群组选择器）当中，选择器权重是各算各的,最终谁大听谁的

          5、!important  是最高的权重   但慎用

              一般情况下，可以测试使用,测试是否是选择器权重的问题

七、display的使用

display   实现元素之间的相互转换

        可选值：

           block  将元素转成块元素

           inline  将元素转成行内元素

           inline-block 将元素转成行内块元素

           none      隐藏元素

MoCh丨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
伪元素选择器
qq_24484291的博客
07-25 3606
伪元素选择器
伪类选择器&伪元素选择器
m0_48036518的博客
11-21 390
伪类选择器，伪元素选择器，继承，选择器的权重，display
CSS 选择器分栏——伪元素与伪类选择器
浅陌繁星的博客
11-29 1485
伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。。伪元素是一个附加在选择器末的关键词，允许你对被选择元素的特定部分修改样式。
【CSS 知识总结】第四篇 - CSS 选择器-伪类和伪元素
BraveWangDev
03-20 2183
CSS 的三大特征；CSS 选择器的优先级；CSS 优先级的计算规则；CSS 选择器的权重；CSS 选择器面试题；本篇，介绍 CSS 选择器：伪类和伪元素；伪类用于定义元素的特殊状态；同一元素，根据不同状态，显示不同样式，样式随状态（用户行为）变化而变化；与普通 CSS 类相比较，伪类选择器只有处于 dom 树无法描述的状态下，才能为元素添加样式；所以被称作伪类；CSS 伪元素用于设置元素指定部分的样式；；
CSS常用伪类选择器详解
qq_43293207的博客
03-24 1万+
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
CSS3 选择器 伪类选择器介绍
09-25
前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类...
伪类选择器的使用和语法
09-19
摘要：本文将详细介绍伪类选择器的使用和语法，包括伪类选择器的作用、语法、案例演示和注意事项等。 一、伪类选择器的作用 伪类选择器是一种特殊的选择器，可以选中某些元素，并且可以实现一些特殊的效果。例如，...
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
结构伪类选择器（总结）
12-22
什么是结构伪类选择器？ 结构伪类选择器是针对HTML的结构进行分类的选择器，特征就是位置 分为三大类 一类 e:first-child e:last-child e:only-child e:nth-child(n/even/odd)隔行换色，列表换色 e:nth-last-child ...
四种css 伪类选择器
09-25
伪类，用于给元素的片段添加样式，这如何理解呢？比如你要让一个段落的第一行的文字加粗，那么这个选择器是不二之选
伪元素选择器和伪类选择器
qq_54083224的博客
10-18 725
伪类选择器是用来向某些选择器来添加效果。不修改DOM内容，通过一些特定的选择器根据特定的状态、特定条件来修改元素的样式。伪元素选择器是一个附加在选择器末尾的关键词，通过伪元素不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。
:link,:visited,:focus,:hover,:active详解
weixin_34152820的博客
09-01 642
CSS 又名 层叠样式表，所谓层叠，就是后面的样式会覆盖前面的样式，所以在样式表中，各样式排列的顺序很有讲究。 :link与:visited在样式文件中的顺序可以随便放置。 而focus， hover，active这几个，如果你设置的顺序不同，会直接影响样式的显示效果，下面会详细解释。 :focus->:hover->:active 有些人可能会困惑，...
选择某类的最后一个元素——CSS3伪类选择器走过的坑
MFWSCQ的博客
07-01 1万+
css3选择器
【第四篇】CSS选择器之伪类选择器
Ethan's Blog
07-17 2865
介绍CSS中伪类选择器，包括:first-child,:first-of-type等子类伪类选择器，:focus,:hover等UI伪类选择器。
css中什么是伪类选择器？伪类选择器的简要介绍
lin123_00的博客
05-18 2640
本章给大家带来css中什么是伪类选择器？伪类选择器的简要介绍。让大家可以了解在css中伪类选择器的作用，css伪类选择器有哪些分类等知识。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手的小白一些建议：BV1Zf4y117ji 「HTML+CSS」实现妙笔千山播放器制作（思路讲.
理解伪类选择器与伪元素选择器
BLUEHEART
03-06 2094
1. 两个选择器的异同： 伪类选择器是用来向某些选择器来添加效果。不修改DOM内容，通过一些特定的选择器根据特定的状态、特定条件来修改元素的杨氏。比如：悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。 伪元素选择器是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪
:link、:hover、:active和:visited的区别
热门推荐
上官海翰
05-11 3万+
版权声明：本文出自孤星卟哭的博客，原创文章，转载请注明出处。 https://blog.csdn.net/zcy92949/article/details/79914973 前言 直到如今，前端一直都是我的弱项，想要总结自己前端都学了什么，可是真的想写的时候，却发现自己会的真的是好少。既然如此，就随性一点，想到哪里记到哪里吧。 首先，这四个选择器叫伪类选择器，一般用在a标签中的样式，如果...
css中的伪类选择器有哪些
李青不吃螺蛳粉的博客
03-26 1万+
1 伪类选择器 ① 动态伪类选择器（5个） :link 选择地址没有被访问过的超链接元素 :visited 选择地址被访问过的超链接元素 :hover 选择鼠标悬停在上面的元素。 :active 选择鼠标在上面并且按键按下不松手的元素 :focus 选择获取焦点的元素。 ② 目标伪类选择器（1个） :target 选择当前锚点指向的元素。 ③ 语言伪类选择器 (1个，了解) lang() 根据语言选择元素（lang 属性的值） ④ UI元素伪类选择器（3个） :enabled 选择可以使用
伪类选择器的用途
dairenwu的博客
09-22 2341
伪类选择器的用途 1.做鼠标移入、移出效果切换 a:hover { background-color: #e01222; color: #fff; }2.画三角形.triangle:before{ content:""; display:block;
html伪类选择器代码
最新发布
11-13
1. :hover 伪类选择器用于鼠标悬停在元素上时的样式变化： ```css a:hover { color: red; } ``` 2. :active 伪类选择器用于元素被激活（例如被点击）时的样式变化： ```css button:active { background-color: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值