伪类选择器:root的妙用

css3的元素旋转功能非常强大,也非常吸引人,但是很多时候因为浏览器使用率的问题,我们必需要想办法兼容一些低版本的浏览器,特别是ie这朵奇葩. 想要实现元素旋转本来很简单的一个属性就能实现,那就是transform:rotate(xxdeg).举个例子:实现一个层旋转270deg. #demo{ width: 300px;height: 200px;background-color: #FF80C0;margin: 200px; -moz-transform:rotate(270deg); -w…

【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中结构伪类选择器——root、not、empty、target选择器

1.root选择器将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="text/css"> :root{ background:yellow; } body{ background:green; } </style> 注意:不使用root选择器来指定root元素的背景色,只指定body元素的背景色,则整个页面就全部变成了绿色. 2.not选择器如果想…

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…

css伪类选择器及伪元素选择器

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

Svg和canvas的区别，伪类选择器有哪些（归类）

区别一:svg绘制出来的每一个图形的元素都是独立的DOM节点,能够方便的绑定事件或用来修改.canvas输出的是一整幅画布: 区别二:svg输出的图形是矢量图形,后期可以修改参数来自由放大缩小,不会是真和锯齿.而canvas输出标量画布,就像一张图片一样,放大会失真或者锯齿. 伪类选择器: 1. 什么是结构性伪类选择器??首先选择器分类分为:结构性伪类选择器和状态性伪类选择器状态伪类选择器(动态伪类+UI元素状态伪类):动态伪类::因为这些伪类并不存在于HTML中,而只有当用户和网站…

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）

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

谈谈一些有趣的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>这是黑色的注意对比…

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

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…

css3 结构性伪类选择器

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

css选择器(常规选择器，伪类选择器，伪元素选择器，根元素选择器)

前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择器] 文档的元素是最基本的选择器 html{color: black;} p{color: gray;} h2{color: silver;} [类选择器] 类选择器用于选择一类元素 .div{color: red;} // 单个类的选择 .div1.div2{color: red;} // 多个类…

CSS魔法堂：稍稍深入伪类选择器

前言过去零零星星地了解和使用:link.::after和content等伪类.伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理. 伪类伪类选择器实质上是让设计师可以根据元素特定的状态,设置不同的视觉效果.具体有:link.:visited.:hover.:active.:focus.:focus-within.:target.:root和:checked. HTMLAnchorElement的4大经典伪类 :link,用于设置链接初始状态时的样式…

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…

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

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

css的伪类选择器的使用

伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所有未被访问的链接 :visited a:visited 被访问的链接 :active a:active 所有活动的链接 :hover a:hover 鼠标所在的链接 :focus Input:focus 获得焦点的input的css :first-letter P:first-letter P元素的…

js进阶 10-8 伪类选择器有哪几类（自己不用，永远不是自己的）

js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作和练习 1.伪类选择器有哪几类? 6类,简单伪类选择器元素,子元素伪类选择器,可见性伪类选择器,内容伪类选择器,表单伪类选择器,表单属性伪类选择器 2.伪类选择器有多强大? 你想到的,没有它做不到的 3.:first(简单伪类选择器)和:first-child(子元素伪类选择器)的区别是什么? 和:…

js进阶 10-7 简单的伪类选择器可以干什么

js进阶 10-7 简单的伪类选择器可以干什么一.总结一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索引相关(奇偶,开始最后,大于小于等于) 除某元素以外,某元素的第一个,最后一个,以及某元素所有和索引相关的操作 3.伪类选择器的关键性符号是什么? 冒号,以英文冒号“:”开头 4.如何选取某一个元素中的其他元素? 用后代选择器 $('ul :not(#one)').css('color','blue…

css 伪类选择器:checked实例讲解

css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择器来匹配选择没有被选中的单选按钮或复选框. 语法: :checked { style properties } 如: input:checked{ background-color:red; } 设置被选中的单选按钮(radio)或复选框(checkbox)的背景颜色为红色(单选框和复选框只有在Op…

css3系列之伪类选择器

Pseudo-Classes Selectors(伪类选择器) E:not(s) E:root E:target E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) 这上面一行的选择器,都会考虑其他元素的的影响. E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-of-last-type(n) 这上面的选择器,不…

第49天学习打卡（CSS 层次选择器结构伪类选择器属性选择器美化网页元素盒子模型）

推荐书籍:码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按:ctrl +alt+L快捷键注释快捷键:ctrl+/ 1.后代选择器:在某个元素的后面祖爷爷爷爷爸爸你 <style> /*p{*/ /* background: #02ff00;*/ /*}*/ /* 后代选择器 */ body p{ background: red; } </style> 2.子选择器: 只有一代 ,儿子 /* 子选择器*/ body>p{ background…

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…

巧用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…

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元素…

【伪类选择器:root的妙用】的更多相关文章