【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

时间: 2024-08-26 23:36:36

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

伪类选择符

更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色: a:hover{color:red;} 上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红.这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效. 关于伪选择符: 关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了(其实伪类选择符还有很多,尤其是 c

子选择符 、相邻选择符 、 兄弟选择符 、 伪类选择符

子选择符: E>F 选择所有作为E元素的子元素F <style> div>p{ color: red; } </style> <div> <h3>我是标题1</h3> <p>我第1个是p标签</p> <p>我第2个是p标签</p> <p>我第3个是p标签</p> <small>我是小标题</small> </div> 显示效果:

#8.9.16总结# 关系选择符和伪类选择符

1.关系选择符 示例: E F 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>关系选择符</title> 6 <style type="text/css"> 7 .item+li{ 8 background-color: #F00; 9 } 10 &l

CSS伪类选择符归纳

伪类选择符归纳 伪类选择符比较多,不加以归类很难记清楚记全:我们可以先把他分为两类 和元素本身转态有关,类似于链接点击前,点击后 和元素在DOM结构中所处的结构有关,类似于第n个元素,或者奇数行. 一.和元素本身转态有关 :link,:visited,:hover,:active :link指的是超链接在访问前的状态 :visited指的是超链接在访问后的转态 :hover指的是鼠标悬停在元素上的状态 :active指的是鼠标点击元素不放时的转态 这几个伪类的书写有一定的顺序,:link和:vi

CSS选择符-----伪类选择符

Element:hover E:hover { sRules }  设置元素在其鼠标悬停时的样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1 { font-size: 16px; } a, div { display: block; ma

CSS Pseudo-Element Selectors伪对象选择符

一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效. 为了支持IE8,许多目前许多情况还是使用单个冒号,显示效果一样 Selectors选择符 CSS Version版本 Description简介 E:first-letter/E::first-letter CSS1/CSS3 设置对象内的第一个字符的样式. E:first-line

#8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att|="val"] 伪对象选择符  E:first-letter/E::first-letter 设置对象内的第一个字符的样式. <p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青.远足之类的.长期坐

宽高自适应,高度塌陷,伪对象选择符

宽高自适应 网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是pc自适应. 自适应的优点: 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备.不同窗口和不同分辨率下显示. 宽度自适应 元素宽度设置为100%.(块元素宽度默认为100%) 或者不设置宽度(width);(宽度是父元素的宽度) 高度自适应 1)自适应元素高度:height:auto;或者不设置;(是子元素撑开父元素的高度) 2)元素高度自适应窗口高度 设置方法

CSS伪对象选择符整理

1.E::selection 2.E::placeholder 1. E::selection 设置对象被选择时的样式. 需要注意的是,::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性). 兼容性: <div class="_selection"> <p>1. Selecting master branch will publish your site from the ma