【h5与c3权威指南笔记--css3结构性伪类选择器root，not，empty，target】的更多相关文章

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】---结构性伪类选择器-root+not+empty+target

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

h5与c3权威指南笔记--css3新属性选择器

[att*=val] 选择所有att属性值中包含val的.只要包含val值,不论val值在属性值的前面还是中间还是后面~ <style> div[class*=div]{ color: red; } </style> <body> <div class="div1">div1</div> <div class="div1.2">div1.2</div> <div class=&…

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…

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 结构性伪类选择器（2）

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

H5与C3权威指南笔记--transition动画

translation:过渡 举个栗子:transition: width 1s linear; transition有三个属性,分别是transition-property, transition-duration,transition-timing-function. 因此上面的代码等价于 transition-property: width; 指定要被过渡(改变)的属性 transition-duration: 1s; 过渡所需时间 transition-timing-function:…

H5与C3权威指南笔记--box-shadow

box-shadow 用于给盒子添加阴影效果.IE9+ 举个栗子:box-shadow: inset 5px 5px 5px red; inset可选,该值会让阴影出现在盒子内部. 第一个5px是阴影离开文字横向就方向(即x轴上),接受负值. 第二个5px是阴影离开文字纵向就方向(即y轴上),接受负值. 以上两个值都设为0,将在盒子周围绘制阴影.(四个边嗷) 大概长这样 第三个5px是阴影的模糊半径. 最后就是阴影颜色啦. 例子一: 这是一个很正常的有阴影的盒子~ .div1{ box-shad…

css3结构性伪类选择器

…

css3 结构性伪类选择器

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