CSS3 结构性伪类选择器—nth-child(n)

2024-10-21

CSS3 结构性伪类选择器（2）

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

Atitit.隔行换色变色 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:

CSS3 结构性伪类选择器（1）

1.CSS3 结构性伪类选择器—root :root选择器就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. “:root”选择器等同于<html>元素,简单点说: :root{background:orange} html {background:orange;} 示例演示: 通过“:root”选择器设置背景颜色 HTML代码: <div>:root选择器的演示</div> CSS代码: :root { background:or

css3 结构性伪类选择器

伪类选择器类型说明备注 E:first-line 伪元素选择器选择匹配E元素内的第一行文本 E:first-letter 伪元素选择器选择匹配E元素内的第一个字符 E:before 伪元素选择器在某个元素之前插入一些内容 E:after 伪元素选择器在某个元素之后插入一些内容清除浮动经常用结构选择器选择器说明备注 E:root 选择匹配E所在文档的根元素.在(X)HTML文档中,根元素就是html元素,此时该选择器与html类型选择器匹配的内容相同. E:nth-chi

css3结构性伪类选择器

h5与c3权威指南笔记--css3结构性伪类选择器root，not，empty，target

root:将样式绑定到根元素(html中的根元素是<html></html>) 举个栗子 :root{ background-color: yellow; } body{ background-color: lightgray; } .div1{ width: 200px; height: 200px; background-color: black; margin: 0 auto; } </style> </head> <body> <d

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

【CSS3】---结构性伪类选择器—nth-child(n)+nth-last-child(n)

结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素.其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1.-n+5)和关键词(odd.even),但参数n的起始值始终是1,而不是0.也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素. 经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时,其中n是从0开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素.如下表所

【CSS3】---结构性伪类选择器-first-child+last-child

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

【CSS3】---结构性伪类选择器-root+not+empty+target

结构性伪类选择器—root :root选择器,从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素.在HTML文档中,根元素始终是<html>. 示例演示: 通过“:root”选择器设置背景颜色 HTML代码: <div>:root选择器的演示</div> CSS代码: :root { background:orange; } 演示结果: “:root”选择器等同于<html>元素,简单点说: :root{background:o

css3 巧用结构性伪类选择器

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

谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉到生僻的 CSS 属性,赶紧去补习一下吧. 不断更新,不断更新,不断更新,重要的事情说三遍. 谈谈一些有趣的CSS题目(一)-- 左边竖条的实现方法谈谈一些有趣的CSS题目(二)-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少谈谈一些有趣

CSS3 结构伪类选择器详解

1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型.否则无效 p:nth-child(1){color:red} <div> <p>这是红色的<p> </div> <div> <h1>这是第一个子元素但不是P类型,不是红色</h1> < p>这是黑色的注意对比

H5与CS3权威下.19 选择器（2）结构性伪类选择器

1.CSS中的伪类选择器及伪元素 (1)与自定义的class类选择器不同,伪类选择器是CSS中已经定义好的选择器. eg:a:link{color:#ff0000;} (2)伪元素的使用方法: 选择器:伪元素{属性:值} 选择器.类名:伪元素{属性:值} 2.css中常用的伪元素选择器 (1)first-line:向某元素中的第一行文字使用样式. eg: <p>伪元素选择器 <br>类选择器</p> p:first-line{background: pink;} (2)

CSS3 :nth-child()伪类选择器

CSS3 :nth-child()伪类选择器 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹.虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”. 语法: :nth-child(an+b)

(转)CSS3:nth-child()伪类选择器，奇偶数行自定义样式first-child

原文地址 Table表格奇偶数行定义样式: CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹.虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”. 语法: :nth-child(an+b) 为什

CSS3:nth-child()伪类选择器，Table表格奇偶数行定义样式

转自爱设计原文链接http://www.dangshopex.com/jishufenxiang/WEBkaifajishu/8653.html CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上“标准”.CSS3标准已提出数年,但是目前能实现她的浏览器并不多,虽然部分浏览器能实现部分规范,但这又有什么用呢?面对更多的兼容性问题,CSSer们只有望洋轻叹.虽然如此,但有前瞻性的我们,又怎能停步不前呢?今天我们就来“前瞻”一

css3 - 语言伪类选择器

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>语言伪类选择器</title> <style type="text/css"> :lang(en) { quotes: '"' '"'; } :lang(en) q { background: red

css3 伪元素和伪类选择器详解

转自脚本之家:http://www.jb51.net/css/213779.html 无论是伪类还是伪元素,都属于CSS选择器的范畴.所以它们的定义可以在CSS标准的选择器章节找到.分别是 CSS2.1 Selectors 和 CSS Selector Level 3,两者都已经是推荐标准. 伪类选择器:CSS中已经定义好的选择器,不能随便取名常用的伪类选择器是使用在a元素上的几种,`如a:link|a:visited|a:hover|a:active` 提示:在 CSS 定义中,a:hove

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

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

CSS3 结构性伪类选择器—nth-child(n)

热门专题