伪类的使用

比眉伴天荒 2022-05-20 05:07 205阅读 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 条评论，205人围观）

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

相关阅读

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

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

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

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

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

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

相关 CSS的伪类和伪元素

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

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

相关伪类与伪元素的区别

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

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

相关伪类的使用

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

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

相关伪类

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

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

相关伪类与伪元素

一、伪类伪类包含两种：状态伪类（UI 伪类）和结构性伪类。 (1)状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素

野性酷女/ 2022年03月02日 04:08/ 0 赞/ 367 阅读

相关伪元素与伪类的使用

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

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

相关 a标签伪类的使用

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

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

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

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

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