CSS选择器详解二

最新推荐文章于 2023-06-30 17:24:14 发布
最新推荐文章于 2023-06-30 17:24:14 发布
阅读量631 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaokangmiclong/article/details/52667907
版权
本文详细介绍了CSS的各种伪类选择器，包括E:link、E:visited、E:active、E:hover、E:focus等，以及伪元素选择器如E:first-line、E:first-letter、E:before和E:after。此外，还涵盖了反伪类选择器E:not(s)以及与子元素相关的选择器，如E:first-child、E:last-child和E:nth-of-type(n)等。
摘要由CSDN通过智能技术生成

CSS的伪类选择器:

E:link ;//匹配所有未被点击的链接
E:visited ;//匹配所有已被点击的链接
E:active ;//匹配鼠标已经其上按下、还没有释放的E元素
E:hover ;//匹配鼠标悬停其上的E元素
E:focus ;//匹配获得当前焦点的E元素

E:enabled ;//匹配表单中激活的元素

E:disabled ;//匹配表单中禁用的元素
E:checked

最低0.47元/天 解锁文章
xiaokangmiclong
关注
专栏目录
css中nth-child()与nth-of-type()区别
Aifangmy的博客
06-16 3万+
nth-child() dom.nth-child(n) 表示选中dom的父级元素中的第n个dom元素，若匹配，则选中，否则，不选中。 上面例子可以看出： p:nth-child(1) ：拿出p元素的父级元素div中的第一个子元素，对比是p元素，选中。 p:nth-child(2) ：拿出p元素的父级元素div中的第二个子元素，对比是p元素，不是p元素，是span，则不选中。 p:nth-child(3) ：拿出p元素的父级元素div中的第三个子元素，对比是p元素，选中。 span:nth-child
css3中nth-child()的用法
m0_52518047的博客
04-23 1万+
nth-child（n）是css3中的一种选择器，它的作用是匹配属于其父元素的第n个元素，不论元素的类型。重点是“不论元素的类型这句话”，好多人容易误解这句话。 现在提出一个需求，如下图所示，将第二行和第三行的字体颜色改为红色和蓝色 <div class="father1"> <p>1234</p> <p>12345</p> <p>12345</p> </div> css代码实现：很容易
【CSS】nth:children以及浏览器内核webkit使用（滚动条样式修改）
嗨，朋友你好！我是前端领域的工作者
06-30 3613
【CSS】nth:children以及浏览器内核webkit使用（滚动条样式修改）
css有关nth-child与nth-of-type的区别
huo_le的博客
01-10 199
html> html> head lang="en"> meta charset="UTF-8"> title>title> script src="jquery-3.2.1.min.js">script> style> div{ border: solid 1px blue; } span{
:nth-child()选择器用法
weixin_51109349的博客
11-12 8656
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 . . :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。 公式 (an + b)。 描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。 1. :nth-child(2) 获取到第二个标签 2.:nth-child(2n) 选取偶数标签，等同于:nth-child(even) 3.:nth-ch
十种CSS选择器详解介绍
最新发布
01-31
### 十种CSS选择器详解介绍 #### 一、通用选择器 - **定义**: 通用选择器使用星号 `*` 来表示，能够匹配HTML文档中的每一个元素。 - **示例**: ```css * { margin: 0; padding: 0; } ``` - **用途**: 常用于...
CSS属性选择器详解.pdf
02-28
CSS属性选择器详解 CSS中的属性选择器是一种强大的选择器，允许开发者根据HTML元素的属性值来选择元素。今天，我们将深入探讨CSS属性选择器的详细解释。 什么是CSS属性选择器？ --------------------- CSS属性...
CSS选择器种类、优先级与匹配原理详解
09-25
CSS选择器从基本类型上可以分为三类：标签名选择器、类选择器和ID选择器。 标签名选择器是直接使用HTML标签名作为选择器。比如，`p` 就是一个标签名选择器，它会选择页面中所有的`<p>`元素，并对它们应用相应的样式...
css3 伪元素和伪类选择器详解
01-19
伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种，`如a:link|a:visited|a:hover|a:active`  提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是...
详解CSS中的选择器优先级顺序
09-24
了解并熟练运用CSS选择器优先级顺序，可以帮助开发者更精确地控制元素的样式，避免不必要的样式冲突，从而提高代码的可读性和维护性。在实际开发中，尽量减少对 `!important` 的依赖，因为它会使代码难以管理和调试...
css 第二个孩子选择器,详解CSS3选择器:nth-child和:nth-of-type之间的差异
weixin_42601134的博客
08-04 1万+
先看一个简单的实例，首先是HTML部分：我是第1个p标签我是第2个p标签 然后两个选择器相对应的CSS代码如下：p:nth-child(2) { color: red; }p:nth-of-type(2) { color: red; }上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色：尽管上面两个demo的最后效果一致，但是两个选择器之间存在差异是必然的。对于:nt...
CSS3 :nth-child(n)使用注意
热门推荐
IT技术宅-北方的刀郎
02-07 4万+
:nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素； p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素 注意：n是从1开始的 如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p; 不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素
CSS踩坑---nth-child()选择器
Stefan1的博客
07-23 998
先贴上一个小技巧，在html页面中写好css后，在F2调试器里面如图： 用选择器1选中2元素，然后会在4里面看到对应的样式，这个样式不是我自己写的，我也不知道，我怀疑是系统生成的，我2这里使用的 text-align: right; 将其靠右，但是距离右边还是太大，而 margin-XXX 属性已经不能再往右了，然后在F12里面将4的属性复制粘贴在了我的代码里面，稍加修改然后效果达到了，我是后端被迫做前端，有的地方说的不严谨，但是效果确实是达到了，也不知道还有没有更好的办法。 这里主要是用...
CSS3 - :nth-child()选择前几个元素
idomyway的博客
06-27 3万+
/* 选择第n个，n位数字 */ :nth-child(n) 选择列表中的偶数标签 :nth-child(2n) 选择列表中的奇数标签 :nth-child(2n-1) 选择前几个元素 /*【负方向范围】选择第1个到第6个 */ :nth-child(-n+6){} 从第几个开始选择 /*【正方向范围】选择从第6个开始的，直到最后 */ :nth-child(n+6){} 两者结合使...
css中的 nth-child(1) 不存在
友人C君的博客
04-15 4286
<div> <p>这是一个p</p> <a>这是一个a</a> <a>这是又一个a</a> </div> a:nth-child(2)的意思是：先拿出a元素的父元素（即div）中的第2个子元素，再看看是不是a，正好是，所以就选中了“<a>这是一个a</a>”； 同理，...
nth-child的正确理解
susanzxl的专栏
05-12 1979
看下面一个例子：                                                         1. 依次填入句中横线上的词语，恰当的一组是（      ）:在语文学习中，字要____________地写，话要____________地说，课文要____________地读，练习要_______
详解CSS中:nth-child的用法
xkl的博客
05-20 767
:nth-child(2)选取第几个标签，“2可以是你想要的数字”.demo01 li:nth-child(2){background:#090}:nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同.demo01 li:nth-child(n+4){background:#090}:nth-child(-n+4)选取小于等于4标签demo01 li:nth-child(-n+4)
详解CSS3中:nth-child的用法
z983002710的博客
06-30 1万+
详解CSS3中:nth-child的用法
Selenium CSS选择器详解与实践应用
本文将详细介绍Selenium库中CSS选择器（CSS Selector）的定位机制，这是一种在Web自动化测试和网页爬虫中广泛使用的功能，用于精确地找到页面上的特定元素。CSS选择器根据元素的标签名、类名、ID、属性、关系等多种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值