接css3选择器（一） 接css3 选择器（二） 这篇和前两篇内容相关性不大，主要是涉及到一些css3的状态选择器，所以标题从一开始。 一、【:enabled】选择器 一看这个属性就知道是专为表单元素提供的。在表单中输入框，密码框，复选框都有可用(:enabled)和不可用（:disabled）状态，默认情况，这些表单元素都处在可用状态。可通过选择器:enabled为这些表单元素设置样式。 举例：可用输入框设置样式。 div { margin: 3...
css3新增加的选择器 一、属性选择器： E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字母c开头的E[attr$=b] 以这个字母b结尾的E[attr*=a] 只要包含a这个字母就行E[attr|=z] 只要以字母z-开头的或者就是字母z的 二、结构性伪类选择器： E:nth-child(n) 第n个子节点div:nth-child(odd) 奇数行div:nth-child(even) 偶数行div:nth-child(2n) 2的倍数E:nth-last-chil...
CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器（或称组合选择器）， 分为后代选择器（Descendant combinator/Child combinators）和同级选择器（Sibling combinators）： 其中后代选择器分以下3个： 1. 空格。div p: 表示p是div的后代元素, div是p的祖先。该选择器选择所有div下的p后代元素。2. 箭头（>）。表示直系关系。div > p 表示div的儿子辈的元素。 3. 星号（*）。表示隔代关系。div ...
每个前端工程师可能每天都会写一些css，其中选择器是很主要的一部分。但是，大家可能每天写的大多是#id,.class这样的选择器，这并不稀奇，但是如果我们了解并且熟用css3为我们提供的强大并且优雅的选择器，就可以简化我们的代码。 我在学习和整理css3的选择器的时候都不会去考虑它的浏览器的支持程度，如果有需要，可以在这里查看它的浏览器支持情况：「caniuse.com」。 一、基本选择器 1. 通配选择器 「*」 ...
CSS选择器复习 通用选择器：* 选择到所有的元素 选择子元素：> 选择到元素的直接后代(第一级子元素) 相邻兄弟选择器：+ 选择到紧随目标元素后的第一个元素 普通兄弟选择器：~ 选择到紧随其后的所有兄弟元素 伪元素选择器： ::first-line 匹配文本块的首行 ::first-letter 选择文本块的首字母 伪类选择器： :before, :after在元素内容前面、后面添加内容(相当于行内元素) CSS3结构选择器 :nth-child 选择指定索引处的子元...
一. 以“字符串”开头 两种用法的区别是： a. 以字符串开头，需要用"-"分割开， b. 以字符串开头，不需要任何分隔符 1. 资料 a） b) 2. html代码 横线分割字符串本身全字母字符串 下划线分割字符串 3. css代码 a) [class|="dot"]{ border: 1px solid #000;} b) [class^="dot"]{ border: 1px solid #000;} 4. 效果： a) b...
1.相邻兄弟选择器 P+b : 同一个父元素下p标签后面的第一个兄弟元素b； 2.通用兄弟选择器 p~b : 同一个父元素下p标签后面的所有兄弟元素b； 3.属性选择器 将元素属性用于选择器中，从而获取指定元素属性或者值得元素； 语法： [属性] ： 匹配 "指定属性" 的 "所有" 元素； 元素[属性] ： 匹配 "指定属性" 的 "指定" 元素； input[type] : 获取具备type属性的input； input[id] : 获取具备id属性的i...
1.相邻兄弟选择器 P+b : 同一个父元素下p标签后面的第一个兄弟元素b； 2.通用兄弟选择器 p~b : 同一个父元素下p标签后面的所有兄弟元素b； 3.属性选择器 将元素属性用于选择器中，从而获取指定元素属性或者值得元素； 语法： [属性] ： 匹配 "指定属性" 的 "所有" 元素； 元素[属性] ： 匹配 "指定属性" 的 "指定" 元素； input[t...
在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的。 网页开发过程中，我们需要定义很多class来应用到不同的元素上，由于class本身是没有语义而且是可以复用的，所以过度使用class会使得整个样式表结构非常混乱。为了减少class的使用频度，需要尽可能的使用选择器来指定元素。而且使用选择器还可以定义很多规则，这样也可以减少重复定义class的代码量。 在CSS3中，主要有以下几种选择器：属性选择器、结构性选择...
上篇随笔中介绍了CSS3中，通过标签的属性寻找特定标签的方法。在该篇随笔中，我们使用结构选择器实现对特定标签的选择。按照 -child 和 -of-type，可区分为两类。-child表示寻找父标签的子节点，-of-type表示以标签类型寻找父标签中的子节点。 1、-child R：nth-child(value){} (1) value=1,2,3,...，表示：在R标签的父标签中，从上往下寻找第value个子节点，并且该标签类型必须为R才有效； ...
基本选择器 1、通配符选择器（*）—所有浏览器支持 *{ marigin: 0; padding: 0; } 2、元素选择器(E) —所有浏览器支持3、类选择器（.className） —所有浏览器支持4、id选择器（#ID）—所有浏览器支持5、后代选择器（Ｅ Ｆ）—所有浏览器支持 选择了Ｅ元素的所有后代Ｆ元素，中间是一个空格； 6、子元素选择器(E>F) —IE6不支持 选择了Ｅ元素下的所有子元素Ｆ7、相邻兄弟元素选择器(E + F) ...
定义和用法 [attribute^=value] 选择器匹配元素属性值带指定的值开始的元素。 浏览器支持 所有主流浏览器都支持[attribute^=value] 选择器。 注意: [attribute^=value]在IE8中运行，必须声明 实例 设置class属性值以"test"开头的所有div元素的背景颜色： div[class^="test"]{background:#ffff00;} 在线运行 相关阅读： CSS 参考手册 CSS 选择器 CSS 教程
CSS3新的选择器 ele[att^="val"] /*属性att的值以val开头的元素*/ele[att$="val"] /*属性att的值以val结尾的元素*/ele[att*="val"] /*属性att包含val字符串的元素*/
直接上源码：```html 使用CSS3美化按钮 body { padding-top: 50px; } .download-info { text-align: center; } /* 默认状态下的按钮效果 */ .btn { background-color: #0074cc; *background-color: #0055cc; /* IE6,7 */ /* CSS3渐变制作背景图片 */ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc)); background-image: -...
CSS选择器总结： 一．基本选择器 1.通配选择器：[ * ] 选择文档中所以HTML元素。 *{margin: 0;padding: 0;} /*选择页面中的所有元素并设置margin和padding值为0*/ .mumu *{background:#000;} /*选择类名为mumu的元素下面的所有元素设置背景为黑色*/ 2.元素选择器：[ E ] 选择指定类型的HTML元素。 p{color:red;} /*选择p元素*/ 3.ID选择器： [ #id...