【00】伪类选择符-魔芋的理解

【00】魔芋的理解

nth-child(n)这样的带n的，n从1开始。

n可以是表达式：n*3，n+3

可以是特殊字符串“odd”,"even"

【02】empty

匹配没有任何子元素（包括text节点）的元素E。

注意：如果开始标签和结束标签间有空格或是换行，都是属于有元素的。（魔芋：所以不实用）

【04】not(s)

匹配不含有s选择符的元素E。

【05】first-child

E:first-child

E:first-child { sRules }

用法比较奇怪：

1，是父元素的第一个子元素。

2，用在子元素上。

ul li:first-child {} //选择的是li。

3，li必须是所有兄弟节点中的第一个元素。

那么,li前面有个p兄弟节点，就会失效。

【06】last-child

同first-child。不过，是最后一个。

【07】first-of-type

E:first-of-type { sRules }

【】同类型中，选择第一个。

【】用在子元素上。

【】也就是说，被选元素可以不是父元素的第一个子元素。

用法：li:first-of-type {}

【08】last-of-type

同first-of-type

【09】nth-child(n)

【】用在子元素上，并且，它的n是按照父元素的所有子元素来排序的。

p:nth-child(2); 那么，它的父元素的所有子元素。排序为第3个的元素必须是p，才有效（从1开始计数。）

常见用法：

li:nth-child(2n) {} ;//偶数的li

【10】nth-last-child(n)

【11】nth-of-type(n)

匹配同类型中的第n个同级兄弟元素E。

要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是html，即E可以是html的子元素，也就是说E可以是body

该选择符总是能命中父元素的第n个为E的子元素，不论第n个子元素是否为E

【12】nth-last-of-type(n)

【13】only-child

E:only-child { sRules }

只有一个子元素的元素。

比如说p .只有文本节点作为子元素。

【】用在子元素上

【】它的父元素只有一个子元素。

【14】only-of-type

【】用在子元素上

【】它的父元素只有一个子元素。

【】并且的它的类型为指定类型。

转载于:https://www.cnblogs.com/moyuling/p/9032910.html

【00】伪类选择符-魔芋的理解相关推荐

jQuery Tips(5)----关于伪类选择符
jQuery选择器的强大不仅在于选择器支持基本的css选择符,还支持很多CSS的伪类选择符,甚至可以自定义选择符,下面让我们来看看一些伪类选择符 :nth-child的用法 nth-child是一个c ...
Css伪类选择器之常见形式、动态伪类篇
伪类选择器伪选择器包括伪类和伪对象选择器,伪选择器以冒号(:)作为前缀标识符.冒号前可以添加选择器,限定伪类应用的范围,冒号后为伪类和伪对象名,冒号前后没有空格,否则将错认为类选择器: 单纯式,E: ...
[你必须知道的css系列]第一回：丰富的利器：CSS选择符之通配符、类选择符、包含选择符、ID选择符...
一般没有系统的学习过,只是在网上看一些片断教程的人.见到最多的可能也就是: 元素选择符(例如:body .a .li ) ID选择符(例如:#head.#body.#foot) 类选择符(例如:.re ...
CSS伪对象选择符整理
1.E::selection 2.E::placeholder 1. E::selection 设置对象被选择时的样式. 需要注意的是,::selection只能定义被选择时的background-c ...
伪类选择器之hover
1.表示鼠标移入时候发生的状态改变(选择器:hover{}) 2.使用: (1)改变自己------当前自己的选择器:hover{} (2)通过父级改变子级------父级选择器:hover 子级选择 ...
css通配选择符用什么表示,css3选择符使用个人理解。
C#获取本地IP地址[常用代码段] 获得当前机器的IP代码,假设本地主机为单网卡 string strHostName = Dns.GetHostName(); //得到本机的主机名 IPHostEn ...
CSS快速学习2：选择符权重和字体类属性
选择符的权重: CSS中用四位数字表示权重. 类型选择符的权重为0001 class选择符的权重为0010 id选择符的权重为0100 子选择符的权重为0000 属性选择符的权重为0010 伪类选择符 ...
html:(29):伪选择符和分组选择符
伪类选择符更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色: a:hover{co ...
jq 点击导航添加背景_jq入门（2）css选择符
今天继续分享jq入门基础. css选择符 jQuery支持CSS规范1到规范3中的几乎所有选择符,具体内容可以参考W3C网站.这种对CSS选择符的支持,使得开发者在增强自己的网站时,不必为哪种浏览器不 ...

【00】伪类选择符-魔芋的理解

【00】伪类选择符-魔芋的理解相关推荐

最新文章

热门文章