常见的伪类选择器

最新推荐文章于 2021-03-26 00:08:56 发布
原创 最新推荐文章于 2021-03-26 00:08:56 发布 · 276 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了CSS中的伪类如:link, :visited, :hover, :active等，以及选择器如:nth-of-type(n), :not(s), :first-child, :last-child, :only-child和:checked的应用。解析了它们如何提升网页样式的设计灵活性。

/* 这里表示div的第几个元素n是什么数字 还可以是2n这个n表示2的倍数 */
        div:nth-of-type(n){
            
        }

:link                      未访问

:visited   　　　　已访问

:hover                   鼠标悬停

:active                  鼠标按下

:not(s)                  匹配不含s选择器的元素

:frist-child            父元素的第一个元素

:last-child            父元素的最后一个元素

:only-child            父元素的唯一一个元素

:checked              选中 :checked+伪元素

CSS选择器：基本选择器、复合选择器、伪类选择器、伪元素选择器
pan_junbiao的博客
07-11 3424
CSS选择器包含：基本选择器、复合选择器、伪类选择器、伪元素选择器。基本选择器包括：元素选择器、类选择器、ID 选择器、属性选择器。最常见的 CSS 选择器是元素选择器。换句话说，HTML文档的元素就是最基本的选择器。例如设置 HTML 样式，选择器通常是某个 HTML 元素，如 p、h1、a 等，甚至可以是 HTML 本身。在 HTML 中，各种各样的属性可以给元素添加很多附件信息，并且可以通过 JavaScript 控制这些附加属性的内如何状态。在使用 CSS 的时候，也可以使用这些附加属性来指定元素。
nth-child的坑 - 不管元素的类型
l13640698113的博客
10-09 681
nth-child的坑 :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素. :nth-child(n) / nth-last-child选择器匹配属于其父元素的第 n 个子元素 / 倒数开始数第n个元素，不论元素的类型。 <style> li:nth-last-child(2) { color: red; } li:nth-of-type(2) { colo
CSS常用的伪类选择器
HarryHY的博客
09-27 1457
动态的伪类选择器 :link——没有点击时 a:link{ color: #0000ff; } :active——点击的那一刹那的 a:active{ color: #ff0000; } :visited——已经点击过的 a:visited{ ...
常用的伪类选择器
请 端正你的态度的博客
08-10 3703
链接伪类选择器 主要有以下几类： a:link 未访问链接时属性 a:visited 访问后的属性 a:hover 鼠标放上去时的属性 a:active 点击后的属性 代码示例： a:link {color: red} a:visited; {color: yellow} a:hover {color: blue} a:active {color: orange} <a href="#"> 这是一个a标签 </a> 结构伪类选择器 :first-child
CSS - 常用的伪类选择器简单介绍与基本使用
都随它大小便吧
02-28 9115
CSS 伪类选择器用于选择元素的特定状态或位置，以便对其应用样式。以下是一些常见的伪类选择器及其作用。
css中的伪类选择器有哪些
李青不吃螺蛳粉的博客
03-26 1万+
1 伪类选择器 ① 动态伪类选择器（5个） :link 选择地址没有被访问过的超链接元素 :visited 选择地址被访问过的超链接元素 :hover 选择鼠标悬停在上面的元素。 :active 选择鼠标在上面并且按键按下不松手的元素 :focus 选择获取焦点的元素。 ② 目标伪类选择器（1个） :target 选择当前锚点指向的元素。 ③ 语言伪类选择器 (1个，了解) lang() 根据语言选择元素（lang 属性的值） ④ UI元素伪类选择器（3个） :enabled 选择可以使用
提升你的CSS技能：深入理解伪类选择器和伪元素选择器
最新发布
09-29
伪类选择器用于选择DOM元素在特定状态下的样式，例如用户行为或元素状态所定义的样式，常见的伪类选择器包括动态伪类选择器（如:hover、:active、:focus、:visited）和UI元素状态伪类选择器（如:enabled、:disabled...
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
web-demo-伪类选择器
09-28
在当前的计算机科学和网页设计领域，伪类选择器是CSS（层叠样式表）中一个非常重要的概念。它用于定义元素的特殊状态，比如链接的不同状态、元素的鼠标悬停状态等等。伪类选择器可以使开发者通过简单的方式增强用户...
四种css 伪类选择器
09-25
CSS伪类选择器是CSS中一种特殊的选择器，它们用来定义元素的特殊状态，如元素被访问过的状态、鼠标悬停的状态、内容的特定部分等等。它们允许开发者在没有额外的类或ID的情况下，为元素的某个状态定义样式，从而增强...
一些常见的伪类选择器
weixin_44570988的博客
03-31 1万+
一、向被激活的元素添加样式。 伪类选择器 :active 使用此伪类选择器可点击转换样式，可改变所数的类的宽度，高度，颜色等等、、、 <style>标签内容 .weileiyi{ ...
css常用伪类选择器
leng0920的博客
06-19 499
//选择除了第一个以外的子其他元素 .footer_list li:not(:first-child){ border-right: 1px solid #EEEEEE; } //选择除了最后一个以外的其他子元素 .footer_list li:not(:last-child){ border-right: 1px solid #EEEEEE; } /...
CSS3结构性常用伪类选择器
NineTeen
11-06 1099
1.X:first-child 匹配子集的第一个元素，IE7就可以支持。 li:first-child{ background: red; } 2.X:last-child 与firs-child刚好相反，匹配子集的最后一个元素，IE8不支持 li:last-child{ background: blue;
伪类选择器
xiahang1121的博客
05-05 437
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> /*点击之前 */ a:link{color: red;} /*点击之后 */ a:visited{color:...
CSS选择器详解（伪类）
热门推荐
祝小余不定时更新
11-28 1万+
CSS选择器详解 之 伪类伪类对大小写不敏感结构伪类选择器结构伪类是CSS3新增的类型选择器，利用DOM树实现元素过滤，通过文档结构的相互关系来匹配元素，可以减少class和id属性的定义，使文档变得更加简洁。:root选择元素所在文档的根元素。在(X)HTML文档中，根元素始终是html元素。:not（）否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。 e
CSS伪类选择器使用实例
Mentina的小屋
03-14 2945
    今天的小技巧主要是搞明白了CSS3新增的伪类选择器，并和之前的伪类选择器做比较~~~    每一次看伪类选择器的介绍总有一种语文没学好的感觉，so只能上实例理解了~    这次主要学习了 :first-of-type/:last-of-type/:only-of-type/:nth-child(n)//============================================...
深入理解CSS3选择器：伪类选择器详解
"本文将详细介绍CSS3的选择器中的伪类选择器，包括常见的伪类选择器用法以及CSS3新增的`:nth-child`选择器的使用。" 在CSS3中，伪类选择器是一个非常重要的概念，它们允许我们对元素在特定状态或位置时应用特定的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值