css3选择器动手实践(css3实用指南)
css3选择器有哪些类型,分别举例语法格式在html标签中使用的方法
1. 属性选择器
属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。
有6个不同类型的属性选择器：
[att=value]
该属性有指定的确切的值。
[att~=value]
该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。
[att|=value]
属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)
[att^=value]
该属性的值以指定值开始。
[att$=value]
该属性的值包含指定的值(而无论其位置)。
[att*=value]
该属性的值以指定的值结束
比如，如果你想要改变你的博客上的日志部分元素的背景颜色，你可以使用一个指定每一个class属性值以“post-”开始的div的属性选择器：
div[class|="post"] { background-color: #333; }
代码laycode - v1.1
该语句将匹配所有class属性包含”post”并带”-”字符的div元素。(注：此处英文原文有些上下文不对应，我已经更正——译者，神飞)
属性选择器的另一个很有用的用处是定位不同类型的input元素。比如，如果你想让你的文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：
input[type="text"] { width: 200px; }1
代码laycode - v1.1
这将匹配所有type属性值等于“text”的input元素。
现在我们可能像为网站上不同的文件类型的链接添加不同的图标，这样你的网站的访客就会知道他们将获得一个图片、或者PDF文件、或者是一个word文档等。这就可以使用属性选择器来实现：
a[href*=".jpg"] { background: url(jpeg.gif) no-repeat left 50%; padding: 2px 0 2px 20px; } a[href*=".pdf"] { background: url(pdf.gif) no-repeat left 50%; padding: 2px 0 2px 20px; } a[href*=".doc"] { background: url(word.gif) no-repeat left 50%; padding: 2px 0 2px 20px; }
代码laycode - v1.1
在此例中，我们使用了一个定位所有的链接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。详细可查看前端观察之前的一篇文章《使用CSS选择器创建个性化链接样式》
浏览器支持
除了Internet Explorer 6，所有的主流浏览器都支持属性选择器。这意味着，如果你在你的网站上使用了属性选择器，你应该确保IE6用户将仍能获得一个可用的网站。比如我们的第三个例子，为链接添加图标可以给你的网站带来另一个级别的可用性，但是如果这些链接不显示任何图标，该网站仍然还是可用的。
2. 子选择器
子选择器用符号“”表示。它允许你定位某个元素的第一级子元素。
比如，如果你想匹配所有的作为你的网站侧栏的div的子元素的h2元素，而不是可能是在div元素内的所有h2元素，也不是div的孙元素(或者更低级别的)，你就可以使用下面的选择器：
div#sidebar h2 { font-size: 20px; }1
代码laycode - v1.1
你当然也可以同时使用子元素和后代元素。比如，如果你想定位只有在body元素的子级div元素内的blockquote元素(比如你想匹配主要的div内的blockquotes，而不是其它部分的：
body div div blockquote { margin-left: 30px; }
代码laycode - v1.1
浏览器支持
和属性选择器一样，子选择器不被IE6支持。如果你通过这种方式要实现的效果和网站的可用性或总体设计息息相关，你可以考虑使用一个class，或者使用只针对IE6的样式，但是这将有悖使用子选择器的目的。
关于css3的属性选择器的理解
F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E
F）不一样，在后代选择器中F是E的后代元素，而子元素选择器E ,所起作用就是可以选择某元素的后代元素，比如说:E
F，前面E为祖先元素，而且F元素在E元素后面，，也可以选择某个元素下的所有元素。
二、元素选择器(E)
元素选择器，是css选择器中最常见而且最基本的选择器，不同的是ID选择器是一个页面中唯一的值，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素; F，其中F仅仅是E的子元素而以。
七、相邻兄弟元素选择器(E + F)
相邻兄弟选择器可以选择紧接在另一元素后的元素，EF两元素具有一个相同的父元素，请注意他们之间需要一个空格隔开、子元素选择器(E，而且他们具有一个相同的父元素，换句话说，我们在类使用时是在相对应的类名前加上一个“css3选择器如下：
一、通配符选择器（＊）
通配符选择器是用来选择所有元素，而F为子元素，其中E.className）
类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名
四、id选择器（ID）
ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称;如(id),
五、后代选择器（E F）
后代选择器也被称作包含选择器，这样在样式选择器中才能找到相对应的元素.className）而id选择器是在名称前使用。
三.”号（、类选择器（，其中E为父元素;F)
子元素选择器只能选择某元素的子元素。
六，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素
如何用CSS3选择器选择class下的a 的href属性
应该说是，希望选择到在某类名下，href为某个值的a标签吧？
.box?a[href=XXX]?{
}
后代选择器不变，只不过针对a标签使用属性选择器即可，如果是希望选择有href的a标签，那么中括号中直接写成[href]即可
CSS3 选择器
css3中，追加了三个属性选择器分别为：
结构性伪类选择器由两部分构成，一是伪类选择器，一是伪元素选择器。
伪类选择器 ，要注意命名不要与系统定义好的选择器重名，例如link、hover
伪元素选择器 中包含 first-line、first-letter、before、after。
当root和body起冲突时，body就对内容区域生效，在内容区外则是root生效。
格式 :not(selector)
1. first-child 对一个父元素中的 第一个 子元素进行样式的指定
2. last-child 对一个父元素中的 最后一个 子元素进行样式的指定
3. nth-child（positon） 对一个父元素中的 指定序号 的子元素进行样式的指定
4. nth-last-child 对一个父元素中的 指定倒数序号 的子元素进行样式的指定
2）使用nth-of-type（odd）和nth-of-type（even）
1）使用nth-child
2）使用nth-child（an+b），a表示每次循环中，包括几种样式，b表示指定的样式在循环中所处的位置。
only-child选择器，在元素只有一个子元素时，可以代替使用 nth-child(1)/nth-last-child(1) 。
在css3选择器中，除了结构性伪类选择器外，还有一种UI元素状态选择器——只有当元素处于某种状态下才起作用，在默认状态下不起作用。
通过js改变输入框的可输入和不可输入状态，通过css样式改变输入框可输入和不可输入状态时的背景颜色。
用来位于同一个父元素之下的，给与一个子元素平级的另一个子元素设定样式
CSS选择器与优先级详解（一）
CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。
1.基础选择器
a.id选择器：通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID选择器是以#开头的。
HTML
CSS
执行效果：
b.class选择器：是以独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，也就是要保证类名在html标记中存在。
HTML
CSS
执行效果：
c.元素选择器：通过note节点名称匹配元素。
HTML
CSS
2.属性选择器：
注意：最后一个选择器是E[attr|=val]，由于输入|会对表格造成影响，只能用/代替。
CSS3新增了一些属性选择器，待持续更新。
3.组合选择器
示例如下：
实现效果如下：
示例如下：
从高到低依次是：
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
选择器的特殊性值表述为4个部分，用0,0,0,0表示。
参考：
1. css优先级计算规则
2. CSS选择器笔记
3. Selectors MDN
4. CSS3 选择器——基本选择器
5. CSS3 选择器——伪类选择器
6. 征服高级CSS选择器
，一共10个div，如何用css3选择器选择第4到7之间的div
第一种方法CSS3：-------------------------------------
!doctype?html
html
head
meta?charset="utf-8"
title选择某个区间的元素-CSS3/title
style
ul{?width:50%;}
li{?background:#f5f5f5;?border-bottom:1px?solid?#ddd;?padding:5px?0;?}
ul?li:nth-child(-n+7){?background:#F90}
ul?li:nth-child(-n+3){?background:#f5f5f5}
/style
/head
body
h2设置第4~7个li的背景色为橙色/h2
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
li8/li
li9/li
li10/li
li11/li
li12/li
li13/li
li14/li
/ul
/body
/html
第二种方法JS：-------------------------------------
!doctype?html
html
head
meta?charset="utf-8"
title选择某个区间的元素-JS/title
style
ul{?width:50%;}
li{?background:#f5f5f5;?border-bottom:1px?solid?#ddd;?padding:5px?0;?}
/style
script?src="
script
$(function(){
???$("ul?li:lt(7)").css("background","#F90");
???$("ul?li:lt(3)").css("background","#f5f5f5");
})
/script
/head
body
h2设置第4~7个li的背景色为橙色/h2
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
li8/li
li9/li
li10/li
li11/li
li12/li
li13/li
li14/li
/ul
/body
/html