css3结构伪类选择器使用小例子

最新推荐文章于 2024-07-11 18:05:14 发布
最新推荐文章于 2024-07-11 18:05:14 发布
阅读量1.8k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 学习 文章标签： css3 前端 css 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sinjiufai/article/details/120939926

结构伪类选择器

结构伪类选择器
first-child
nth-child(n) 里面可以是数字 可以是even(偶数) odd(奇数） 也可以是式子如 -n+5 表示前五个
last-child

用法与上面基本一样 但是 nth-of-type会先去查看前面指定的元素 再去看目标是排在第几个
nth-of-type(
最低0.47元/天 解锁文章

200万优质内容无限畅学
伪类选择器小实例
zzlwei的博客
06-09 627
伪类选择器的分类 链接伪类选择器： E:link E:visited 用户行为选择器： E:hover E:active E:focus 语言伪类选择器：E:lang(fr) 否定伪类选择器：E:not(s) 结构性伪类选择器： E:root E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type E:nth-of-type
css3层级选择器、属性选择器、伪类选择器（结构和目标）
YY的博客
09-22 878
css3层级选择器、属性选择器、伪类选择器（结构和目标）
谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器
weixin_34393428的博客
11-15 151
开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。 解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。 不断更新，不断更新，不断更新，重要的事情说三遍。 谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法 谈谈一些有趣的CSS题目（二）-...
CSS 结构伪类选择器案例
AOOOOO李
01-20 468
结构伪类选择器 /*ul 的 第一个元素*/ ul li :first-child{ background: black; } /*ul的最后一个元素*/ ul li:last-child{ background: red; } /* 选中 p1 :定位到父级元素 选择当前的第一个元素 选择当前p元素的父类,选取父类元素的第一个元素,并且是当前元素才生效 顺序 */ p:nth-child(1){
【前端学习-02】CSS3属性选择器/结构伪类选择器/伪元素选择器/案例
QNANWang的博客
04-20 309
CSS3属性选择器 CSS3伪类选择器-01 CSS3伪类选择器-02 css3结构伪类选择器-03 CSS伪元素选择器-04 伪元素选择器：两个冒号 ：：before 伪元素：一个冒号：before 行内元素无大小-解决：display：block 案例：伪元素字体图标 结果显示 ...
伪类选择器示例
qq_39787515的博客
10-27 214
<head> <meta charset="UTF-8"> <title>伪类选择器示例</title> <style> /*链接未被点击，呈现的颜色*/ a:link{ color: red; } /*链接被点击过，呈现的颜色...
两种CSS3伪类选择器详细介绍
09-25
其次，CSS3的:nth选择器提供了一组更加丰富和灵活的选择方式，涵盖了多种结构相关的伪类选择器。这些:nth选择器让开发者可以精确定位元素集合中的特定位置的元素，根据位置进行样式的定义。它们包括以下几种： 1. :...
CSS选择器：基本选择器、复合选择器、伪类选择器、伪元素选择器
pan_junbiao的博客
07-11 3203
CSS选择器包含：基本选择器、复合选择器、伪类选择器、伪元素选择器。基本选择器包括：元素选择器、类选择器、ID 选择器、属性选择器。最常见的 CSS 选择器是元素选择器。换句话说，HTML文档的元素就是最基本的选择器。例如设置 HTML 样式，选择器通常是某个 HTML 元素，如 p、h1、a 等，甚至可以是 HTML 本身。在 HTML 中，各种各样的属性可以给元素添加很多附件信息，并且可以通过 JavaScript 控制这些附加属性的内如何状态。在使用 CSS 的时候，也可以使用这些附加属性来指定元素。
css伪类伪元素域高级选择器的介绍
09-25
### CSS伪类、伪元素与高级选择器详解 #### 一、CSS伪类与伪元素概述 CSS（层叠样式表）是一种用于控制网页样式和布局的语言，它提供了丰富的选择器来帮助开发者更加灵活地控制页面元素。其中，**伪类**和**伪元素...
CSS基础(part20)--CSS3结构伪类选择器
小山羊的学习日志
09-06 318
学习笔记，仅供参考，有错必究 参考自：pink老师教案 结构伪类选择器 属性列表： nth-child(n) 参数详解： 注意：本质上就是选中第几个子元素 n可以是数字、关键字、公式 n如果是数字，就是选中第几个 常见的关键字有 even 偶数、odd 奇数 如果是第0个元素，或者超出了元素的个数会被忽略 nth-child 和 nt-of-type 的区别： nth-child 选择父元素里面的第几个子元素，不管是何种类型 nt-of-type 选择指定类型的元
结构性伪类选择器
qq_36354609的博客
08-31 354
DOCTYPE html> html lang="en"> head> title>结构性伪类选择器title> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1"> style> a:hover { color: red; } /* fi
结构伪类选择器
m0_62181310的博客
04-04 5907
6.选择父元素里边奇数项的子元素 :nth-child(2n+1) 2n+1或者2n-1或者odd。5.选择父元素里边偶数项的子元素 :nth-child(2n) 2n或者even。7.:nth-child(-n+i) 选择父元素里前i项子元素。11.选择父元素里边按照不同类型的第n个子元素。2.选择父元素里边的最后1个子元素。1.选择父元素里边的第1个子元素。选择父元素里边的最后1个子元素。3.选择父元素里边第n个子元素。选择父元素里边的第1个子元素。选择父元素里边第n个子元素。...
【Web前端开发基础】CSS的结构伪类选择器、伪元素、浮动
m0_62611367的博客
01-22 1279
介绍CSS的结构伪类选择器，伪元素、浮动元素、清除浮动的目的以及清除浮动的方法
css3学习 之 css选择器(结构性伪类选择器)
xyjikl
07-06 1327
同上篇：先说明下本机浏览器吧：opera 10 firefox 4.0 chrome 由于是公司机器xp的。。所以ie版本为 ie8  另外有一个ietest  所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，它的使用方法如下所示。 选择器:伪元素{属性:值} 伪元素选择器也可以与类配合使用，使用方法如下所示。  选择
结构伪类选择器（总结）
weixin_43806532的博客
03-03 756
什么是伪类选择器？ 波浪选择器连接符~ 作用：两个css选择器通过波浪线连接起来，但只作用于后一个css选择器，并且必须出现前一个选择器才符合结构，它们必须是同级的，拥有共同的父节点 1 2 ![此时只有第二个div字体颜色变成了粉红色](https://img-blog.csdnimg.cn/20200227152737117.png) ...
CSS学习（二）-结构伪类选择器、属性选择器
bwshqh的博客
02-28 1632
一、理论： 1.结构伪类选择器： a.E:first-child:选择第一个子元素 b.E:last-child:选择最后一个子元素 c.E:root:选择匹配元素E所在文档的根元素 d.E F:nth-child(n):选择E的第n个子元素 e.E F:nth-last-child(n)：选择元素E的倒数第n个子元素 f.E:nth-of-type(n)：选择父元素内具有指定类型的
结构伪类选择器的使用
周百万的博客
02-23 558
1、 E:first-child 匹配父元素中的第一个子元素E 这里的：ul li:first-child 指的是匹配父元素（ul）中的第一个子元素li。 2、 E：last-child 匹配父元素中的第一个子元素E 例： 这里的：ul li:last-child 指的是匹配父元素（ul）中的最后一个子元素li。 3、ul li:nth-child(2) 匹配父元素中的第二个子元素E（这里的“2”可按需求自行改动）。 这里的：ul l...
CSS中的十二种结构伪类选择器
一碗周
08-29 5495
Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端????????‍????，如果我写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第二十七篇-《CSS中的十二种结构伪类选择器》 编写不易转载请获得允许 写在前面 本篇文章我们将来学习CSS中的结构伪类选择器，该类选择器包含的内容如下表所示： 伪类选择器 作用 selector:first-child 用来定位一组兄弟元素中的第一个元素 selector:last-child 用来
css伪类选择器
最新发布
04-01
### CSS伪类选择器的用法 CSS伪类选择器是一种特殊的选择器，能够针对某些特定状态下的HTML元素应用样式。它的基本语法结构为 `selector:pseudo-class { property: value; }`[^1]。 #### 基本概念 伪类选择器主要用于描述元素的状态或位置关系。通过这些选择器可以增强页面的交互性和视觉效果[^2]。常见的伪类选择器及其功能如下： - **`:hover`**: 当用户将鼠标悬停在指定元素上时触发该状态。 ```css a:hover { color: blue; } ``` - **`:active`**: 当元素被激活（通常指点击按钮或链接时）时生效。 ```css button:active { background-color: red; } ``` - **`:focus`**: 当某个表单控件获得焦点时适用此状态。 ```css input:focus { border: 2px solid green; } ``` - **`:visited`**: 针对已被访问过的超链接设置样式。注意浏览器出于隐私保护可能限制部分属性修改[^3]。 ```css a:visited { color: purple; } ``` - **`:first-child` 和 `:last-child`**: 分别匹配作为父级容器的第一个子节点或者最后一个子节点的元素。 ```css li:first-child { font-weight: bold; } p:last-child { margin-bottom: 0; } ``` - **`:nth-child(n)` 及其他变体**: 更灵活地定位第n个同类型兄弟节点，其中参数支持整数、关键字(even/odd)以及表达式形式(an+b)[^4]。 ```css tr:nth-child(odd) { background-color: lightgray; } ``` 以上仅列举了一些基础却非常实用的例子来展示如何运用不同的伪类实现多样化的布局需求。实际开发过程中还可以探索更多高级特性满足复杂场景的要求。 #### 示例代码片段 下面提供一段综合性的例子演示多种常见伪类的实际操作方式： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Pseudo-Class Example</title> <style> /* 设置未访问链接颜色 */ a:link { text-decoration: none; } /* 修改已访问过链接的颜色 */ a:visited { color: teal; } /* 改变鼠标悬浮状态下链接的表现 */ a:hover { color: orange; text-decoration: underline; } /* 定义活动链接的行为 */ a:active { color: tomato; } </style> </head> <body> <h2>Example of Link States</h2> <p><a href="#">This is an example link.</a></p> <form action=""> <input type="text" placeholder="Enter your name..."> <button type="submit">Submit</button> </form> <ul> <li>Item One</li> <li>Item Two</li> <li>Item Three</li> </ul> <table border="1"> <tr><td>Data Cell A1</td><td>Data Cell B1</td></tr> <tr><td>Data Cell A2</td><td>Data Cell B2</td></tr> </table> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值