css3伪类、伪元素选择器---nth-child()和nth-of-type()选择器的区别

最新推荐文章于 2022-08-19 17:01:41 发布
最新推荐文章于 2022-08-19 17:01:41 发布
阅读量223 收藏
点赞数
原文链接：http://www.cnblogs.com/jingxinqiaodaima/p/6252711.html
版权

 

p:nth-child(2)要满足两个条件，1：选择的是p元素的父元素的第二个子元素
 2：选择的第二个子元素必须是p元素，如果不满足，则将不显示

 

 

p:nth-of-type(2)选择父元素下的第二个p元素

转载于:https://www.cnblogs.com/jingxinqiaodaima/p/6252711.html

林尧彬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅析什么是伪类和伪元素？伪类和伪元素的区别解析
qq_47443027的博客
08-02 9131
1、伪类种类伪类作用对象是整个元素尽管这些条件不是基于DOM的，但结果每一个都是作用于一个完整的元素，比如整个链接，段落，div等等。2、伪元素种类伪元素作用于元素的一部分：一个段落的第一行或者第一个字母}伪元素其实相当于伪造了一个元素，例如 before，first-letter 达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；而伪类没有伪造元素，例如 first-child 只是给子元素添加样式而已。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但。...
CSS3中nth-of-type与nth-child区别分析详解，nth-of-type和nth-child对比区别，CSS3强大选择器nth-of-type，nth-child
MFWSCQ的博客
07-01 4361
CSS3出来那么久了，很多新特性都已经得到了主流浏览器的很好支持，相信很多人都在项目中使用过nth-of-type(n)以及nth-child(n)这两个选择器，这两个选择器功能很像，甚至在很多情况下使用的作用是相同的，但又有差异，容易给人造成困扰，我之前也是困扰了一段时间，查了忘，忘了查，浪费了很多时间。这里做一个测试以及梳理，以便查询参考记忆。 elt:nth-child(n)：所干的事情分...
伪元素与伪类
Yous的博客
07-03 7648
伪类比较好理解。以上完全看不懂~先看一遍伪元素演示： body中： css部分： 效果图： 同理； 其它还包括：伪元素 用来设置指定元素中内容第一个字符的样式，通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是，伪元素 仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。伪元素 用来设置指定元素中内容第一行的样式，与 类似，伪元素 也仅可以用于块级元素，行内元素想要使用该伪元素，则需要先将其转换为块级元素。伪元素 用来设置对象被选中时的样
伪类和伪元素的区别及使用场景
qq_66390045的博客
03-22 3871
1. 伪类和伪元素的区别 1.1 作用不同 伪类是一种状态，可以看看做是选择器。比如鼠标经过 伪类 :hover , 比如 结构伪类 li:nth-child， 一个冒号。 伪元素 是 元素， 简单来说，就是用css 模拟出来了一个盒子。 1.2 权重不相同 伪类 是 10 （类、属性选择器 [type=submit]） 伪元素 是 1 (标签选择器 ) 1.3 使用场景不同 比如:鼠标经过盒子，盒子里面的样式会有变化，则...
伪类与伪元素的区别
qq_45272642的博客
10-16 2033
一、什么是伪类和伪元素 提到“伪”字，你想到了什么？“假的”，“汪精卫伪政府”，“不存在的”······ 伪类：用于已有元素处于某种状态时（滑动、点击等）为其添加对应的样式，这个状态是根据用户行为而动态变化的。我的理解就是：本身不存在，只有在特定的情况（滑动、点击）下才会被触发的状态，可以用css去修饰这个状态下的对象。例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它只有处于DOM树无法描述的状态下才能为元素添加样式，所以称为
CSS3结构性伪类选择器九种写法
01-19
一、X:nth-child(n) ...demo的用法是最简单的，X:nth-child()更强大的用处在于奇偶匹配，明河不展开讲，有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X
css3 伪元素和伪类选择器详解
01-19
伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种，`如a:link|a:...CSS中有如下四种伪元素选择器：· first-line:为某个元素的第一行文字使用样式；· first-letter:为某个元
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
12-02
对此，我把CSS3标准中nth-child()用法大致介绍下： CSS3伪类选择器：nth-child() 简单的归纳下nth-child()的几种用法。 第一：nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...
HTML5新增的Css选择器、伪类介绍
01-21
选择器 p[name^=“my”]{font-size:14px} 选择器 ^= 讲规则应用到所有 name属性以“my”开头的元素标签 p[name$=“my”]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性以“my”结尾的元素标签 p[name*=“my...
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
11-21
结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...
伪类和伪元素的区别是什么？
imagine_tion的博客
10-07 9453
一、两者的定义 1.伪类（pseudo-class）是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类。 2.伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些**文本实际不在文档树中**。 二、区别 1.伪类是通过在**元素选择器上加入伪类**改变元素状态。 2.伪元素通过**对元素的操
伪元素和伪类的区别总结
x1037490413的博客
09-11 7713
其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。 伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。 伪元素选择符 伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。 伪类选择符 再看看W3C中对于二者应用的描述： 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 其实根本意思就是就是对那些不能通过class、id等选择元素的补充 举个栗子： 如果我
伪类和伪元素的区别
WebDestiny的博客
09-16 575
伪类和伪元素的区别： 1、伪类的操作对象是文档树中已有的元素，用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。 2、伪元素则创建了一个文档数外的元素...
伪类和伪元素区别有哪些？
sdasadasds的博客
08-19 2495
2、使用方法不同：css3规范中要求使用双冒号（::）表示伪元素，以此来区分伪类和伪元素，比如::before和::after等伪元素使用双冒号（::），:hover和:active伪类使用单冒号（:）目前来看有一部分浏览器为了达到一个更好的兼容性的问题，我们的双冒号也可以写成单冒号；1、概念不同：伪类：用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的；伪元素：用于创建一些不在DOM树中的元素，并为其添加样式；相同点：都是属于选择器中的一种，能实现对于页面元素的修饰。
对于nth-of-type(n)的理解
corn78的博客
11-24 9759
定义和用法： :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. n 可以是数字、关键词或公式。 一、nth-of-type(n) (当n为数字时） 先看下代码，在代码中具体讲解。 这里我们在一个类名为father的盒子中写了五个p标签，样式表中用到了我们的nth-of-type伪类，这个样式也不难看懂。我们把这个选择器拆分开来理解，首先.father...
全网最详细的nth-child和:nth-of-type的区别(特别是nth-of-type)
JokerSoulClub的博客
02-24 6155
:nth-child和:nth-of-type都是找对应元素父元素内子元素(仅包含当前父元素子元素不包含子元素的子元素),然后区别在于:nth-child是找出包含对应元素父元素内所有的子元素然后再去找到对应位置的元素后再去匹配选择器,nth-of-type是找出包含对应元素父元素内的子元素,然后根据样式选择器找到的元素的tag,把父元素内子元素所有对应tag种类分别取出排列后,分别比对对应的位置然后匹配选择器 结合以下样例 <!DOCTYPE html> <html> <he
伪类和伪元素的区别（详解）
初心 - 杨瑞超个人博客
08-15 1631
欢迎加入qq群(IT-程序猿-技术交流群)：757345416 定义 伪类：用于向某些选择器添加特殊的效果 伪元素：用于将特殊的效果添加到某些选择器 伪类 例： a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00F...
CSS3新增属性——新增选择器（属性选择器、结构伪类选择器、伪元素选择器）
m0_53619602的博客
06-06 1199
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 效果图E[att="val"] 效果图： E[att^="val"] 效果图： E[att$="val"] 效果图： E[att*="val“] 效果图： 结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 E:firs...
css伪类选择器:nth-child讲解
最新发布
10-16
好的，关于 `:nth-child` 伪类选择器，它可以选择某个元素的父元素下的第 n 个子元素，无论它是什么类型的元素。其中 n 可以是一个具体的数字，也可以是一个公式，如 `2n+1` 表示选择所有奇数位置的子元素。 举个例子，如果我们想选择某个 ul 元素下的第三个 li 元素，可以这样写： ```css ul li:nth-child(3) { /* 样式 */ } ``` 如果我们想选择某个 div 元素下的所有奇数位置的 p 元素，可以这样写： ```css div p:nth-child(2n+1) { /* 样式 */ } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值