伪类选择器 :nth-child(even) :nth-child(odd) :nth-of-type

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 伪类选择器

考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</section> <ul> <li>item 1</li> <li> <ul> <li>sub item 1</li> <li>sub item 2</li> <li>sub item…

1.类选择器在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定义好的选择器. 最常见的伪类选择器 a:link{ color: #ff6600 } /* 未被访问的链接 */ a:visited{ color: #87b291 } /* 已被访问的链接 */ a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */ a:active…

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分——伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择…

CSS3选择器（三）之伪类选择器

伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择器的使用方法. CSS的伪类语法和别的语法有点不一样,其主要有两种语法表达方式. 第一种写法 E:pseudo-class {property:value}/*其中E为元素;pseudo-class为伪类名称;property是css的属性;v…

CSS选择器之伪类选择器（元素）

:first-child 选择某个元素的第一个子元素(IE6不支持) :last-child 选择某个元素的最后一个子元素 :first-of-type [CSS3]选择一个上级元素下的第一个同类子元素 :last-of-type [CSS3]选择一个上级元素的最后一个同类子元素 :only-child [CSS3]选择的元素是它的父元素的唯一一个了元素(IE6-8不支持) :only-of-type [CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素(IE6-8不支持) :nth…

第91天：CSS3 属性选择器、伪类选择器和伪元素选择器

一.属性选择器其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: div[class=mydemo] 3.E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置: div[class*=mydemo] 4.E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置: div[class^=mydemo] 5…

CSS3新增的伪类选择器

伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器其他伪类选择器 1.结构性伪类选择器 Selector:root:匹配文档的根元素.在HTML文档中,根元素永远是<html.../>元素. Selector:first-child:匹配符合Selector选择器,且必须是其父元素的第一个子节点的元素. Selector:last-child:匹配符合Selector选择…

前端开发HTML&css入门——伪类选择器和一些特殊的选择器

伪类和伪元素有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited :hover :active 表示普通的链接(没访问过的链接) 表示访问过的链接浏览器是通过历史记录来判断一个链接是否访问过, *由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色表示鼠标移入的状态超链接被点击的状态 <!DOCTYPE html> <html&g…

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

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

巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){…

CSS3中的伪类选择器详解

类选择器和伪类选择器区别类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名. 伪类选择器以及伪元素我们把它放到这里 p.aaas{ text-align: left; color: red; } 它同样的会被选择最常见的伪类选择器未被访问的链接 a:link{ color: #ff6600 } /* 未被访问的链接 */ 我们来测试一下,我们给它添加一个超链接. 伪类选择器我们给这个伪类选择器,选定样式,第一种 a:link{ color: #000…

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>这是黑色的注意对比…

CSS伪类选择器

一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链接 a:hover {color: #FF00FF} 鼠标移动到链接上a:active {color: #0000FF} 选定的链接在<body></body>内<a href=”链接地址”>链接内容文字</a>伪类选择器还可以与css类选择器配合使用a.re…

E:in-range伪类选择器与E:out-of-range伪类选择器

E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),且实际输入值在该范围内时使用的样式.E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),但实际输入值在该范围之外时使用的样式.代码清单19-27为一个E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例.示例页面中包含一个数值输入控件(type属性值为number的input元素…

CSS动态伪类选择器温故-3

动态伪类选择器伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器(4)UI伪类选择器(5)结构伪类选择器(6)否定伪类选择器注:和其它CSS选择器的区别-伪类选择器都以冒号[:]开头思考问题?(1)CSS3伪类选择器有什么功能?(2)选定元素能带来什么便利? 1.1.动态伪类选择器语法动态伪类包含两种:(1)在链接中常看到的锚点伪类(2)为用户行为伪类 (3)锚…

CSS2伪类选择器要点

有四个选择器,分别是 hover:鼠标悬停 link:链接不能使用时 visited:链接被点击后 active:链接被点击时,如果鼠标不放,就会一直触发active属性 link在w3c中记录为链接未被点击时,实际上是当href属性不能使用时触发,列如<a href="#">南达科他级</a> 此时会激活link属性如果某一个标签需要同时使用上面的多个伪类选择器,要想全部激活是有顺序关系的 link visited hover active ,建议按…

css之伪类选择器:before :after(::before ::after)

一.总结: ::before是在标签内容前面添加内容, ::after是在标签内容后面添加内容 ::before ::after与:before :after的区别:css3中修订后的伪元素使用::两个冒号,使用单冒号和双冒号的功能还是一样,IE8只支持单冒号的伪元素,所以使用单冒号的最安全. 关于伪元素和伪类(选择器): 伪元素: 伪类选择器: 二.实例: 表单没有添加冒号的情况: 1. :before 2. :after…

【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的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始读取的,也就是说,类似 p:first-child 这样的伪类选择器,指的是“某元素的以p元素作为第一子项的那项”,而不是“p元素的第一个子项”. 原因是因为,其实这里在p:之前,省略了 xxx & nbsp; 这几个字符,导致很容易产生误解. e.g. div p:first-child{colo…

CSS伪类选择器和伪元素选择器

CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{background-color:blue;} //未访问前深蓝色 a:visited{background-color:beige;} //访问过淡黄色 a:hover{background-color:aqua;} //鼠标悬停时水蓝色 a:active{background-color:coral…

css伪类选择器详细解析及案例使用-----伪类选择器（2）

结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth-child(2n+1)*/ <li>two</li> /*li:nth-child(2)*/ <li>three</li> /*li:last-child li:nth-child(2n+1)*/ </ul> <div>adc</…

css伪类选择器详细解析及案例使用-----伪类选择器（1）

动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的E元素,且匹配的元素被激活.常用于锚点与按钮上.E:hover :选择匹配的E元素,且用户鼠标停留在元素上.E:focus :选择匹配的E元素,且元素获得焦点. 锚点伪类设置遵守“爱恨原则”,即LoVe/HAte,也就是“link-visited-hover-active”. 目标伪类选择器(此为动…

虎记：强大的nth-child(n)伪类选择器玩法

写在前面的戏: 最近参加了度娘前端IFE的春季班,刷任务,百度真是有营销头脑,让咱们这帮未来的技术狂人为他到处打广告(我可不去哪),其中做的几个任务中有几个以前没有用到的东西, 也算是有些许收获(现在做了一半任务哦,萌萌哒),今天就来捋一捋css强大的nth-child(n)选择器功能(以庆祝博客粉丝突破YI员,访问量突破一百大关,可喜可贺,荣登博客名人指日可待!!) (常规选择器的YY) 这里说的东西有些初级哦,自己捋一捋思路写的,不想看就跳过吧选择器又称为“查户口”,想找到一个节点,或者是…

那些年踩过的坑之:first-child伪类选择器

原文:那些年踩过的坑之:first-child伪类选择器 :first-child 选择器用于选取属于其父元素的首个子元素的指定选择器.——w3school 嗯,乍一看好像说的不是很明白,因此这个选择器很容易让人误解,通常会有两种误解:误解一:认为E:first-child选中E元素的第一个子元素.误解二:认为E:first-child选中E元素的父元素的第一个E元素. 你是不是也曾这样理解这个选择器或者现在仍然这样理解?以上两种理解都是错误的,为了证明上面两种理解是错的,看看下面的实例 <!-…

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)…

CSS 选择器之基本选择器属性选择器伪类选择器

CSS 选择器常见的选择器列表图 CSS选择器笔记基本选择器通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持. id选择器(#ID) 多元素选择器(E,F) 后代选择器(E F) 子元素选择器(E>F) IE6不支持子元素选择器. 子元素选择器,匹配所有E元素的子元素F 相邻元素选择器(E + F) 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F…