CSS Selectors 伪类选择符

最新推荐文章于 2024-09-03 11:11:53 发布
最新推荐文章于 2024-09-03 11:11:53 发布
阅读量113 收藏
点赞数
分类专栏： CSS 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/W_SJ_SY/article/details/120626652
版权
本文介绍了CSS伪类选择符的应用，如鼠标悬停效果(cursor:wait)、链接颜色变化与访问状态标识，以及取消下划线和双线链接样式。通过实例演示了如何使用`:hover`,`:active`和`:visited`来增强用户体验和链接样式管理。
摘要由CSDN通过智能技术生成

p:hover 鼠标滑过; cursor : 光标; pointer : 手型; crosshair : 十字交叉线; wait : 沙漏等待;
link : 链接; hover : 鼠标滑过; active : 点击,活动效果; visited : 访问过的效果;
链接取消下划线效果 : text-decoration:none;
链接上下两根线 : text-decoration:underline overline;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>伪类选择符</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- p:hover 鼠标滑过字体变色
        cursor 光标;  pointer 手型;  crosshair 十字交叉线
        wait 沙漏等待状态;
        link 链接的颜色; hover 鼠标滑过; active 点击、活动效果
        visited 访问过的效果
        连接取消下划线效果 text-decoration: none
        链接上下两根线 text-decoration: underline overline;
    -->
    <style>
        /*控制样式效果,如下是控制所有链接默认效果*/
        p:hover {
            /*cursor: pointer;*/
            /*cursor: crosshair;*/
            cursor: wait;
            color: #027902;
        }

        div.box:hover {
            cursor: pointer;
            color: red;
        }

        p:not(:first-child) {
            background-color: #10f574;
        }

        /*链接的颜色使用*/
        a:link {
            color: yellow;
        }

        /*鼠标经过效果*/
        a:hover {
            color: red;
        }

        /*点击,活动效果*/
        a:active {
            color: green;
        }

        /*访问过的*/
        a:visited {
            color: gray;
        }

        /*连接取消下划线效果 text-decoration: none*/
        /*定义链接样式效果,样式类名为mylink,控制标签a标签
        如果那个链接标签使用此样式,则在标签上加 class=mylink*/
        a.mylink:link, a.mylink:visited, a.mylink:active {
            color: green;
            text-decoration: none;
        }

        a.mylink:hover {
            color: blue;
            /*链接上下两根线*/
            text-decoration: underline overline;
        }
    </style>
</head>
<body>
<a class="mylink" href="https://www.cadillac.com.cn/">凯迪拉克</a>
<p>Lorem ipsum dolor.</p>
<p>Commodi, cumque sed!</p>
<p>Consectetur, eaque, nulla?</p>
<hr>
<div class="box">雪中悍刀行</div>
<hr>
<a href="c5shuxing.html">属性</a>
</body>
</html>
卋舉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端小练——CSS如何做十字图样
m0_45293340的博客
07-18 1591
CSS如何做十字图样
CSS伪类选择器
Junran_Tan的博客
10-29 159
伪类选择器 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。 为了和我们刚才学的类选择器相区别， 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 链接伪类选择器 :link /* 未访问的链接 */ :visited /* 已访问的链接 */ :hover /* 鼠标移动到链接上 */ :active /* 选定的链接 */ a { /* a是标签选择器 所有的链接
CSS选择器 Selectors(伪对象选择符)
极客神殿
06-16 823
伪对象选择符 选择符 版本 描述 E:first-letter/E::first-letter CSS1/3 设置对象内的第一个字符的样式。 E:first-line/E::first-line CSS1/3 设置对象内的第一行的样式。 E:before/E::before CSS2/3 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用 ...
CSS之伪类
王二狗
09-25 281
1.UI伪类，会在HTML元素处于某个状态时，为该元素应用CSS样式。注意：有些伪类可以用于任何元素，而不仅仅是a元素。 *链接伪类： Link：链接在哪里等着用户点击 Visited：用户在此前点击过这个链接 Hover：鼠标正悬停的链接上 Active：链接正在被点击（鼠标在元素上按下，还没有释放） 需要按照这里列出的顺序使用它们，当然也不一定非要把所有的4个状态都写出来。要发挥这
CSS常用伪类选择器详解
qq_43293207的博客
03-24 1万+
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
div中间十字线
weixin_42388503的博客
06-29 2208
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;title&gt;1&lt;/title&gt;       &lt;style&gt;        *{            padding: 0;            marg
CSS复合选择器使用介绍
09-25
CSS复合选择器是指一组由两个或两个以上的简单选择器通过特定的组合符连接而成的选择器，它能够选择更加具体和精确的元素。在实际开发中，复合选择器的使用能够帮助开发者更有效地控制页面的样式表现。下面我们来...
html什么是标准选择器,让你懂得css3四 类选择器命名规范
05-19
3. 伪类选择器（Pseudo-class Selectors）：包括链接伪类、动态伪类、用户界面伪类、结构性伪类等。 4. 伪元素选择器（Pseudo-element Selectors）：包括::before、::after、::first-line、::first-letter等。 ...
伪类(:)和伪元素(::)的区别
尊哥的博客
04-10 3356
伪类和伪元素都是CSS1和CSS2中的概念，CSS1和CSS2中对伪类的伪元素的区别比较模糊，CSS3才对这两个概念做了相对较清晰的概念，下面看看css2和css3中对这两个概念的定义： 伪类 - pseudo classes CSS2中对伪类的定义： CSS 伪类用于向某些选择器添加特殊的效果。 单单看定义看不懂在讲什么。 CSS3对伪类的定义： The pseudo-class conc...
CSS选择符总结
分享技术，共建开放平台
10-22 734
我们知道CSS是由选择符和属性/值列表构成的，选择符的重要性自然不言而喻。 作为前端开发者选择符想必不是问题，然而前几天面试还真问到了~和+是干吗用的！ 长时间不用的选择符自然就会忘了，来总结一下吧！ 万维网联盟在 HTML 4.0 之外提出层叠样式表（CSS），使用CSS完成样式与内容的分离。层叠样式表（Cascading Style Sheets，CSS）， 又称串样式列表、层次结构
CSS巧妙实现分隔线的几种方法
热门推荐
纸上得来终觉浅，绝知此事要躬行
05-20 4万+
单个标签实现分隔线： 点此查看实例展示 html:小小分隔线 单标签实现 css: .demo_line_01{ padding: 0 20px 0; margin: 20px 0; line-height: 1px; border-left: 200px solid #ddd; border-right: 200px solid #dd
CssSelector之selenium元素定位
LAMO
06-21 4431
CssSelector是我最喜欢的元素定位方法，Selenium官网的Document里极力推荐使用CSS locator，而不是XPath来定位元素，原因是CSS locator比XPath locator速度快，特别是在IE下面（IE没有自己的XPath 解析器(Parser)）他比xpath更高效更准确更易编写，美中不足是根据页面文字时略有缺陷没有xpath直接。因为前端开发人员就是用CSS...
【第 235 期】这些 CSS 伪类，你可能还不知道，可以用起来了！
粉丝们务必加入微信粉丝群
06-03 834
css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。这篇文章...
CSS 伪类选择器和伪元素选择器的区别 样式权重
蒲公英芽的博客
03-03 4394
伪类和伪元素的区别 类，用户定义的类名，这个类是具体的，看得见的，如div.div0，选择具有类div0的div元素。 伪类，用于向某些选择器添加特殊的效果。用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上，如a标签的:hover，表单元素的:disabled。 元素，如div、p、h1等，是实实在在存在的元素。 伪元素，是html中不存在的元素，仅在css中用来渲染的，伪元素创建了一...
CSS行元素的截断样式box-decoration-break属性，有点儿意思！
最新发布
流绪@微梦
09-03 545
在CSS中，行元素默认情况下，行内元素不会独占一行，而是在一行内根据其内容的大小进行排列。行内元素的宽度和高度由其内容决定，不能直接设置宽度和高度。行内元素不能包含块级元素，只能包含其他行内元素或文本。行内元素可以设置水平方向的边距（margin）和内边距（padding），但不会影响到其他元素的布局。常用行内元素：a、span、i、em、strong、img等。
css radius
时间不说谎
09-03 634
在 css 中，radius 属性用于设置元素角落的圆角半径，以创建更美观的现代化外观。属性值包含绝对长度或百分比，或继承父元素的半径。指定一个值会影响所有四个角，指定两个值会分别影响左上角和右下角、右上角和左下角的半径。Radius 是 CSS 中的一个属性，它允许开发者对元素的角落进行圆角处理。它为元素创建圆角边框，使元素看起来更加美观和现代。radius 属性在所有现代浏览器中都得到广泛支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。
css spacing设置间距
时间不说谎
09-03 299
将在每个单词之间增加30像素的间距。这个属性可以增加或减少字与字之间的空白，并且允许负值，即减少字与字之间的间距。将在每个字母之间增加10像素的间距。这个属性会影响一个单词中每个字母之间的间距，使得单词中的字母之间也有空白。属性用于设置单词之间的间距。它只影响英文单词之间的间距，对中文无效。属性用于设置字母之间的间距，适用于中文和英文。
全面解析：CSS选择符用法与实例教程
伪类选择符如`:link`, `:visited`, `:hover`, `:active`, `:focus`, `:first-child`等，用于在元素的不同状态或位置时应用样式。例如，`:hover`用于元素被鼠标悬停时的样式。示例： ```css a:hover { text-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值