8.1.2 CSS3选择器 —— 结构性伪类

1.1 E:nth-child(n):表示E父元素的第n个子节点

  p:nth-child(odd){ background: red }  /* 匹配奇数行 */

  p:nth-child(even){ background: red }  /* 匹配偶数行 */

  p:nth-child(2n){ background: red }   /* 自定义行数 */

1.2 E:nth-last-child(n):表示E父元素的第n个子节点,从后向前计算

2.1 E:nth-of-type(n):表示E父元素中的第n个子节点,且类型为E

2.2 E:nth-last-of-type(n):表示E父元素中的第n个子节点,且类型为E,从后向前计算

3. E:empty表示E元素中没有子节点。注意:子节点包含文本节点

4.1 E:first-child:表示E元素中的第一个子节点

4.2 E:last-child:表示E元素中的最后一个子节点

4.3 E:first-of-type:表示E父元素中的第一个子节点且节点类型是E的

4.4 E:last-of-type:表示E父元素中的最后一个子节点且节点类型是E的

5.1 E:only-child:表示E元素中只有一个子节点。注意

5.2 E:only-of-type:表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点

兼容:IE9+、FF3.5+、Opera9.6+、safari3.1+、chrome 1.0x+

:first-child == :nth-child(1)

:last-child == :nth-last-child(1)

:first-of-type == nth-of-type(1)

:last-of-type == nth-last-of-type(1)

问:E:nth-child(2)和E:nth-of-type(2)区别?

p:nth-child(2):找p标签父级下的第二个子元素,并且这个元素还得是p标签

p:nth-of-type(2):找p标签父级下的第二个p元素

时间: 2024-10-12 01:33:50

8.1.2 CSS3选择器 —— 结构性伪类的相关文章

CSS3每日一练之选择器-结构性伪类选择器

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title> <style type="text/css"> *{margin:0; padding:0;} #list{font-family:"Micro

HTML5--(2)属性选择器+结构性伪类+伪类

一.属性选择器 [att] 匹配所有具有att属性的 [att=val] 匹配所有att属性等于"val"的 [att~=val] 匹配所有att属性包含"val"或者等于"val"的(val必须是一个完整词) [att|=val] 匹配所有att属性仅仅只等于以val-' 开头的或等于"val"(比如说zh-cn) [att*=val] 匹配所有att属性 包含'val'的字母 (val可以是字母) 类似模糊查询 [att^

css3选择器和伪类

元素选择子: * 任何元素 E 与E标签结合的任何元素 E F E的所有派生标签中,有F标签的元素 E > F 或者 E/F E的所有直接的拥有F标签的子类 E + F 所有具有F标签的元素,紧靠的前一个元素有E标签 E ~ F 所有具有F标签的元素,前一个兄弟元素有E标签 属性选择子: @和引号是可选项.例如,div[@foo='bar']也是一个合法的属性选择子. E[foo] 有一个属性:"foo" E[foo=bar] 有一个等于"bar"的属性&qu

Atitit.隔行换色 &#160;变色 css3 结构性伪类选择器

Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原理就是利用结构伪类选择器 .list_div tr:nth-of-type(odd){background:#fff;} /* 奇数行 */ /*-------------------------------*/ .list_div tr:nth-of-type(even){ background:

CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":"1. 根元素选择器 只作用于html等底部标签.很少用 .. :root 2. 子元素选择器 子元素全选还要更细致 ul>li:first-child{ } 增加伪类first-child 第一个 ul>li:last-child{ } 增加伪类last-child 最后一个 ul>li

CSS3 结构性伪类选择器(2)

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

css3 巧用结构性伪类选择器

最近在国外的一个网站上看到的一个关于结构性伪类选择器的用法,觉得十分实用,就自己尝试了一下,并把它给记录下来: 这是最基本的样式: 1 <style type="text/css"> 2 li{ 3 list-style-type: none; 4 float: left; 5 width: 60px; 6 height: 60px; 7 background-color: #979698; 8 margin-left: 10px; 9 text-align: center

CSS3之伪元素选择器和伪类选择器

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. a:link|a:visited|a:hover|a:active 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的. 由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得

CSS3的状态伪类选择器

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3的状态伪类选择器</title> 6 <style type="text/css"> 7 :enabled{ 8 background-color: blue; 9 }; 10 :disabled{