伪类的使用

比眉伴天荒 2022-05-20 05:07 226阅读 0赞

### 巧用css3伪类(尽可能地使用伪元素) ###

> 优点:  
> 1.不会增加js的dom负担  
> 2.不会增加浏览器对html的解析,加快浏览器加载html  
> 3.对seo很有帮助

注意：img、input 不能有伪类

1.  表单:focus 事件的使用
    
        .input:focus + div{ display:block }
2.  :invalid 配合h5正则表单验证

input[type="email"]:invalid + div{ color:red; }

3. :checked 样式显示

input[type="checkbox"]:checked + div { color:green; }

4. :hover 常见的二级菜单、tip框(下面代码展示tip框实现)

<style> span[data-title]{ position: relative; } span[data-title]:hover:after{ position: absolute; content:attr(data-title); top:150%; left: 50%; transform: translate(-50%); white-space: nowrap; } </style>
    <h1>hello,i'm qiphon . i'm from <span data-title="China">CN</span>.</h1>

1.  :checked (很少见的使用) counter 主要是和伪类同时使用

<style> .choose{ counter-reset: fruit 0; /*标识计数器count从1开始*/ /* counter-reset: count1 0 count3 0 count4 0 ;声明了三个计数器，count1，count2，count3*/ } .choose input:checked{ counter-increment: fruit 2; /*表明每次递增 2*/ } .counter::before{ content:counter(fruit) } </style>
    <div class="choose">
        <label for="">
            <input type="checkbox" >香蕉
        </label>
        <label for="">
            <input type="checkbox" >苹果
        </label>
    </div>
    <p>
        你选择了<span class="counter"></span>种水果
    </p>

##其它伪类

a:link \{color: \#FF0000\} /\* 未访问的链接 \*/  
a:visited \{color: \#00FF00\} /\* 已访问的链接 \*/  
a:hover \{color: \#FF00FF\} /\* 鼠标移动到链接上 \*/  
a:active \{color: \#0000FF\} /\* 选定的链接 \*/

“\`

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 css伪类的使用

CSS 伪类用于向某些选择器添加特殊的效果。 :active 点按，向被激活的元素添加样式 :focus 焦点输入，向拥有键盘输入焦点的元素添加样式 :li

灰太狼/ 2023年07月03日 03:18/ 0 赞/ 20 阅读

相关伪类伪元素 css3_伪类| CSS

伪类伪元素 css3 These classes are basically used to add special effects to some selectors o

迈不过友情╰/ 2023年03月05日 10:59/ 0 赞/ 32 阅读

相关 css3伪类和伪元素基本使用

一、介绍 css3为了区分伪类和伪元素，伪元素采用双冒号写法。常见伪类——:hover,:link,:active,:target,:not(),:focus。常

àì夳堔傛蜴生んèń/ 2023年02月24日 13:25/ 0 赞/ 35 阅读

相关 CSS的伪类和伪元素

定义伪类: CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

电玩女神/ 2023年01月08日 14:29/ 0 赞/ 176 阅读

相关伪类与伪元素的区别

W3C关于伪类伪元素的定义伪类：用于向某些选择器添加特殊的效果。伪元素：将特殊的效果添加到某些选择器上。明确两点： 1 都

太过爱你忘了你带给我的痛/ 2022年05月22日 03:05/ 0 赞/ 285 阅读

相关伪类的使用

巧用css3伪类(尽可能地使用伪元素) > 优点: > 1.不会增加js的dom负担 > 2.不会增加浏览器对html的解析,加快浏览器加载html > 3.

比眉伴天荒/ 2022年05月20日 05:07/ 0 赞/ 227 阅读

相关伪类

伪类将鼠标移入设置了伪类的元素，可以使它发生改变 ![在这里插入图片描述][20190222223051925.png] ![在这里插入图片描述][201902

梦里梦外;/ 2022年03月17日 09:58/ 0 赞/ 263 阅读

相关伪元素与伪类的使用

伪元素伪类听名字可能就会产生迷惑，其实从名称上我们也可以获取一些信息，伪元素——顾名思义是一个元素，伪类——与类class有关系，不是一个元素！在CSS1和CSS2中对伪类

傷城~/ 2021年09月20日 15:32/ 0 赞/ 454 阅读

相关 a标签伪类的使用

a标签的伪类伪类的作用 :link => 向未被访问的链接添加样式。 :visited => :visited 向已被访问的链接添加样式。

布满荆棘的人生/ 2021年09月16日 21:54/ 0 赞/ 355 阅读

相关伪元素（伪对象）和伪类的区别?

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，

淡淡的烟草味﹌/ 2021年09月16日 18:40/ 0 赞/ 513 阅读