html伪类选择器

最新推荐文章于 2025-06-12 11:23:36 发布
最新推荐文章于 2025-06-12 11:23:36 发布
阅读量2.3k 收藏 4
点赞数
CC 4.0 BY-SA版权
分类专栏： javaWeb基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/androidforme/article/details/51144712
这篇博客介绍了如何使用CSS中的伪类选择器来美化HTML表格。通过`tr:hover`伪类选择器，当鼠标悬停在表格行上时，背景颜色会变为蓝色，实现了交互式的视觉效果。示例中展示了一个包含姓名、成绩和人品的表格，当鼠标移动到每一行时，对应的行会高亮显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<style type="text/css">
/*
 伪类选择器：伪类选择器就是对元素处于某种状态下进行样式的。
 
 
 注意： 
  1. a:hover 必须被置于 a:link 和 a:visited 之后

2. a:active 必须被置于 a:hover 之后


*/



a:link{color:#F00} /* 没有被点击过---红色 */

a:visited{color:#0F0} /*  已经被访问过的样式---绿色 */ 

a:hover{color:#00F;} /* 鼠标经过的状态---蓝 */


a:active{color:#FF0;}


</style>


应用 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css" >


table{
background-color:#CCC;
border-collapse:collapse;
border:3px;
}

tr:hover{
background-color:#06F;
}
</style>






<body>
<table border="1px" width="400px" height="300px" align="center" >
    <tr>
            <th>姓名</th>
                <th>成绩</th>
                <th>人品</th>
            </tr>
            
            
            <tr>
            <td>张三</td>
                <td>98</td>
                <td>差</td>
            </tr>
           
           
            <tr>
            <td>李四</td>
                <td>50</td>
                <td>极好</td>
            </tr>
            
            
            <tr>
            <td>综合测评</td>
                <td colspan="2">不错</td>
            </tr>
        
        
    </table>




</body>
</html>

HTML伪类选择器
qq_45769329的博客
10-26 1803
1.链接伪类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* 1.给未访问的链接选出来设置样式 a:link */ a:link { color: blue; text-.
CSS-HTML5伪类选择器
deartors的博客
10-30 979
E:disabled匹配所有用户界面（form表单）中处于不可用状态的E元素。E:enabled匹配所有用户界面（form表单）中处于可用状态的E元素。E:checked匹配所有用户界面（form表单）中处于选中状态的E元素。E：target选择匹配元素E的所有元素，且匹配元素被相关URL指向。E:selection匹配E元素中被用户选中或处于高亮部分。E:visited：链接伪类选择器，已被访问过的超链接。E:link ：链接伪类选择器，未被访问过的超链接。例如匹配某个元素的第一个子元素。
掌握CSS伪类选择器：提升网页交互的必备技巧
最新发布
2301_81137804的博客
06-12 433
伪类选择器是CSS的灵魂之一，它们能让我们基于用户行为、元素状态或文档结构创建动态样式，无需额外JavaScript即可实现丰富的交互效果。
HTML— 伪类选择器
qq_41420688的博客
04-18 3031
伪类选择器： 当前鼠标对标签的状态 1）link状态：鼠标没有访问过的状态 2）hover状态：鼠标经过的状态 3）active状态：鼠标激活状态（鼠标点击了，但是没有松开的状态） 4）visited状态：鼠标已经访问过的状态（鼠标点击且松开的状态） 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 a:active 必须被...
结构伪类选择器（总结）
12-22
结构伪类选择器是CSS中的一个重要概念，它们允许开发者基于元素在HTML文档结构中的位置来应用样式。这些选择器使得我们可以更加精确地控制页面布局，而无需改变HTML结构。下面将详细阐述每一种结构伪类选择器的作用...
提升你的CSS技能：深入理解伪类选择器和伪元素选择器
09-29
伪类选择器用于选择DOM元素在特定状态下的样式，例如用户行为或元素状态所定义的样式，常见的伪类选择器包括动态伪类选择器（如:hover、:active、:focus、:visited）和UI元素状态伪类选择器（如:enabled、:disabled...
HTML5新增的Css选择器、伪类介绍
09-28
HTML5在CSS选择器和伪类方面引入了一系列增强，这些新特性使得网页样式设计更为灵活且强大。以下是对这些新特性的详细介绍： 1. **属性选择器**： - `^=` (开始匹配)：这个选择器应用于name属性以特定字符串开头的...
TestWeb-伪类选择器
09-28
CSS的伪类选择器可以分为几类：动态伪类、UI元素状态伪类、语言伪类、结构伪类和否定伪类。动态伪类如:hover、:active和:focus，这些选择器基于用户的交互行为定义样式。UI元素状态伪类如:enabled、:disabled和:...
HTML——伪类选择器
m0_72231179的博客
07-16 487
关于 HTML—伪类选择器 最常见就是链接标签的伪类选择器 a:link {}，a:visited {}， a:hover {}， a:active {}
html之伪类选择器
qq_41555580的博客
05-12 285
a:link{ } 注意：visited伪类只能改变字体的颜色，因为涉及到用户的隐私 a:visited{ } 1 a:hover{ } a:active{ } 注意1：hover和active不仅仅可以给a标签使用 注意2：IE6浏览器是十分垃圾的，它不支持除a标签之外的元素使用hover和active ...
HTML中详述四类伪类选择器
m0_46383618的博客
07-15 559
伪类选择器 伪类选择器：CSS 伪类用于向某些选择器添加特殊的效果，语法结构如下： 选择器:伪类 { declaration1; declaration2; … } 伪类共有四种：:link，:vistied，:hover和:active。 ：link 作用：向未被访问的链接添加样式。 <a href="https://weibo.com/" target="_blank">链接</a> <style> a:lin...
HTML结构伪类选择器：
zlflyhhh的博客
01-11 424
HTML结构伪类选择器： 查找单个标签： 选择器 含义 E:first-child {} 第一个子元素且是E标签n E:last-child {} 最后一个子元素且是E标签 E:nth-child(n) {} 第n个子元素且是E标签 E:nth-last-chlid(n) {} 倒数第n个子元素且是E标签 查找多个标签： n的注意点：n为：0，1，2，3，4，5，6… 通过n可以组成常见的公式： 功能 公式 偶数 2n，even 奇数 2n+1，2
HTML5网页设计样式-伪类和伪元素选择器
m0_66168318的博客
04-01 917
伪类选择器 由来：为了描述一些现有CSS无法描述的东西。 与类选择器的区别：类别选择器可以根据需要随意命名，伪类选择器是利用CSS已经定义好的伪类为某些选择器设置特殊效果。 为了和以前选择器使用区别，我们加上一个“伪”字，成为伪类，伪元素。 常见的伪类选择器如下，常与<a>标记搭配使用： :link 应用于未被访问过的链接，仅限于<a>标记 :visited 应用于已经被访问过的链接，仅限于<a>标记 ...
html5伪类选择器,css有哪些伪类选择器？
weixin_39632524的博客
06-03 375
伪类选择器(简称：伪类)通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。CSS伪类是用来添加一些选择器的特殊效果。css有哪些伪类选择器？伪类选择器是CSS五种选择器当中应用最灵活的一种，其包含六个分类。接下来，我将对这六个分类，逐一介绍。1、动态伪类选择器不同的状态，使用不同的样式。E:linkE:visitedE:activeE:hoverE:fo...
html 伪类选择器
09-06
HTML伪类选择器是用于选择HTML元素的特定状态或行为的选择器。它们以冒号（:）开头，并添加到选择器的末尾。 以下是一些常用的HTML伪类选择器： 1. :hover - 当鼠标悬停在元素上时应用样式。 2. :active - 当元素被激活（例如被点击）时应用样式。 3. :focus - 当元素获得焦点时应用样式，例如在输入框中输入时。 4. :visited - 选择已访问过的链接。 5. :first-child - 选择作为其父元素的第一个子元素的元素。 6. :last-child - 选择作为其父元素的最后一个子元素的元素。 7. :nth-child(n) - 选择作为其父元素的第n个子元素的元素，其中n可以是数字、关键字（如even和odd）或表达式（如2n+1）。 8. :nth-of-type(n) - 选择作为其父元素的同类型元素中的第n个元素，其中n可以是数字、关键字或表达式。 这只是一些常见的HTML伪类选择器，还有许多其他选择器可用于根据特定条件选择元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值