DIV教程之剖析css中30个最经常使用的挑选器
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。破洛洛文章简介：30个最经常使用css选择器剖析.
你大概已把握了id、class、背景选择器这些基础的css选择器。但这远远不是css的全体。上面向人人体系的剖析css中30个最经常使用的选择器，包含我们最头痛的扫瞄器兼容性成绩。把握了它们，才干真正明白css的伟大天真性。
1.
*{
margin:0;
padding:0;
}
星状选择符会在页面上的每个元素上起感化。web计划者常常用它将页面中一切元素的margin和padding设置为0。
*选择符也能够在子选择器中利用。
#container*{
border:1pxsolidblack;
}
下面的代码中会使用于id为container元素的一切子元素中。
除非需要，我不倡议在页面中过的的利用星状选择符，由于他的感化域太年夜，相称耗扫瞄器资本。
兼容扫瞄器：IE6+、Firefox、Chrome、Safari、Opera
2.#X
#container{
width:960px;
margin:auto;
}
井号感化域有响应id的元素。id是我们最经常使用的css选择器之一。id选择器的上风是精准，高优先级（优先级基数为100，远高于class的10），作为javascript剧本钩子的不贰选择，一样弱点也很分明优先级太高，重用性差，以是在利用id选择器前，我们最好问下本人，真的到了非用id选择器的境地？
兼容扫瞄器：IE6+、Firefox、Chrome、Safari、Opera
3..X
.error{
color:red;
}
这是一个class(类)选择器。class选择器与id选择器的分歧是class选择器能感化于希冀款式化的一组元素。
兼容扫瞄器：IE6+、Firefox、Chrome、Safari、Opera
4.XY
lia{
text-decoration:none;
}
这也是我们最经常使用的一种选择器——儿女选择器。用于拔取X元素下子元素Y，要寄望的点是，这类体例的选择器将拔取其下一切婚配的子元素，忽视层级，以是有的情形是不宜利用的，好比上述的代码往失落li下的一切a的下划线，但li内里另有个ul，我不但愿ul下的li的a往失落下划线。利用今后代选择器的时分要思索是不是但愿某款式对一切子孙元素都起感化。这类儿女选择器另有个感化，就是创立相似定名空间的感化。好比上述代码款式的感化域分明为li。
兼容扫瞄器：IE6+、Firefox、Chrome、Safari、Opera
破洛洛文章简介：30个最经常使用css选择器剖析.
5.X
a{color:red;}
ul{margin-left:0;}
标签选择器。利用标签选择器感化于感化域局限内的一切对应标签。优先级仅仅比*高。
兼容扫瞄器：IE6+、Firefox、Chrome、Safari、Opera
6.X:visited和X:link
a:link{color:red;}
a:visted{color:purple;}
利用:link伪类感化于未点击过的链接标签。:hover伪类感化于点击过的链接。
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
7.X+Y
ul+p{
color:red;
}
相邻选择器，上述代码中就会婚配在ul前面的第一个p，将段落内的笔墨色彩设置为白色。(只婚配第一个元素)
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
8.X>Y
div#container>ul{
border:1pxsolidblack;
}
<divid="container">
<ul>
<li>ListItem
<ul>
<li>Child</li>
</ul>
</li>
<li>ListItem</li>
<li>ListItem</li>
<li>ListItem</li>
</ul>
</div>
子选择器。与儿女选择器XY分歧的是，子选择器只对X下的间接子级Y起感化。在下面的css和html例子中，div#container>ul仅对container中比来一级的ul起感化。从实际下去讲X>Y是值得倡始选择器，惋惜IE6不撑持。
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
9.X~Y
ul~p{
color:red;
}
相邻选择器，与后面提到的X+Y分歧的是，X~Y婚配与X不异级其余一切Y元素，而X+Y只婚配第一个。
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
破洛洛文章简介：30个最经常使用css选择器剖析.
10.X
a{
color:green;
}
属性选择器。好比上述代码婚配的是带有title属性的链接元素。
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
11.X
a{
color:#1f6053;
}
属性选择器。下面的代码婚配一切具有href属性，且href为http://css9.net的一切链接。
这个功效很好，可是几又有些范围。假如我们但愿婚配href包括css9.net的一切链接该怎样做呢？看下一个选择器。
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
12.X
a{
color:#1f6053;
}
属性选择器。正如我们想要的，下面代码婚配的是href中包括"css9.net"的一切链接。
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
13.X
a{
background:url(path/to/external/icon.png)no-repeat;
padding-left:10px;
}
属性选择器。下面代码婚配的是href中一切以http开首的链接。
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
13.X
a{
background:url(path/to/external/icon.png)no-repeat;
padding-left:10px;
}
属性选择器。在属性选择器中利用$，用于婚配开头为特定字符串的元素。在下面代码中婚配的是一切链接到扩大名为.jpg图片的链接。（注重，这里仅仅是.jpg图片，假如要感化于一切图片链接该怎样做呢，看下一个选择器。）
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
破洛洛文章简介：30个最经常使用css选择器剖析.
14.X
在上一个选择器中提到怎样婚配一切图片链接。假如利用X完成，必要如许做：
a,
a,
a,
a{
color:red;
}
看上往对照贫苦。另外一个办理举措是为一切的图片链接加一个特定的属性，比方‘data-file’
html代码
<ahref="path/to/image.jpg"data-filetype="image">图片链接</a>
css代码以下：
a{
color:red;
}
如许一切链接到图片的链接字体色彩为白色。
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
15.X
属性选择器。属性选择器中的海浪线标记可让我们婚配属性值顶用空格分开的多个值中的一个。看上面例子：
html代码
<ahref="path/to/image.jpg"data-info="externalimage">ClickMe,Fool</a>
css代码
a{
color:red;
}
a{
border:1pxsolidblack;
}
在下面例子中，婚配data-info属性中包括“external”链接的字体色彩为白色。婚配data-info属性中包括“image”的链接设置玄色边框。
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
17.X:checked
checked伪类用来婚配处于选定形态的界面元素，如radio、checkbox。
input:checked{
border:1pxsolidblack;
}
下面代码中婚配的是一切处于选定形态的单选radio，设置1px的玄色边框。
兼容扫瞄器：IE9+、Firefox、Chrome、Safari、Opera
18.X:after和X:before
这两个伪类与content分离用于在元素的后面大概前面追加内容，看一个复杂的例子：
h1:after{content:url(/i/logo.gif)}
下面的代码完成了在h1题目的前面显现一张图片。
我们也常常用它来完成扫除浮动，写法以下：
.clearfix:after{
content:"";
display:block;
clear:both;
visibility:hidden;
font-size:0;
height:0;
}
.clearfix{
*display:inline-block;
_height:1%;
}
破洛洛文章简介：30个最经常使用css选择器剖析.
19.X:hover
div:hover{
background:#e3e3e3;
}
:hover伪类设定当鼠标划过期元素的款式。下面代码中设定了div划过期的背景致。
必要注重的是，在ie6中，:hover只能用于链接元素。
这里分享一个履历，在设定链接划过期呈现下滑线时，利用border-bottom会比text-decoration显得更大度些。代码以下：
a:hover{
border-bottom:1pxsolidblack;
}
兼容扫瞄器：IE6+、Firefox、Chrome、Safari、Opera
20.X:not(selector)
div:not(#container){
color:blue;
}
否认伪类选择器用来在婚配元素时扫除某些元素。在下面的例子中，设定除id为container的div元素字体色彩为blue。
兼容扫瞄器：IE9+、Firefox、Chrome、Safari、Opera
21.X::pseudoElement
::伪类用于给元素片断增加款式。好比一个段落的第一个字母大概第一行。必要注重的是，这个::伪类只能用于块状元素。
上面的代码设定了段落中第一个字母的款式：
p::first-letter{
float:left;
font-size:2em;
font-weight:bold;
font-family:cursive;
padding-right:2px;
}
上面的代码中设定了段落中第一行的款式：
p::first-line{
font-weight:bold;
font-size:1.2em;
}
兼容扫瞄器：IE6+、Firefox、Chrome、Safari、Opera
（IE6居然撑持，有些不测啊。）
22.X:nth-child(n)
li:nth-child(3){
color:red;
}
这个伪类用于设定一个序列元素（好比li、tr）中的第n个元素（从1入手下手算起）的款式。在下面例子中，设定第三个列表元素li的字体色彩为白色。
看一个更天真的用法，鄙人面例子中设定第偶数个元素的款式，能够用它来完成隔行换色：
tr:nth-child(2n){
background-color:gray;
}
兼容扫瞄器：IE9+、Firefox、Chrome、Safari
破洛洛文章简介：30个最经常使用css选择器剖析.
23.X:nth-last-child(n)
li:nth-last-child(2){
color:red;
}
与X:nth-child(n)功效相似，分歧的是它从一个序列的最初一个元素入手下手算起。下面例子中设定倒数第二个列表元素的字体色彩。
兼容扫瞄器：IE9+、Firefox、Chrome、Safari、Opera
24.X:nth-of-type(n)
ul:nth-of-type(3){
border:1pxsolidblack;
}
与X:nth-child(n)功效相似，分歧的是它婚配的不是某个序列元素，而是元素范例。比方下面的代码设置页面中呈现的第三个无序列表ul的边框。
兼容扫瞄器：IE9+、Firefox、Chrome、Safari
25.X:nth-last-of-type(n)
ul:nth-last-of-type(3){
border:1pxsolidblack;
}
与X:nth-of-type(n)功效相似，分歧的是它从元素最初一次呈现入手下手算起。下面例子中设定倒数第三个无序列表的边框
兼容扫瞄器：IE9+、Firefox、Chrome、Safari、Opera
26.X:first-child
:first-child伪类用于婚配一个序列的第一个元素。我们常常用它来完成一个序列的第一个元素或最初一个元素的上（下）边框，如：
ul:nth-last-of-type(3){
border:1pxsolidblack;
}
兼容扫瞄器：IE7+、Firefox、Chrome、Safari、Opera
27.X:last-child
ul>li:last-child{
border-bottom:none;
}
与:first-child相似，它婚配的是序列中的最初一个元素。
兼容扫瞄器：IE9+、Firefox、Chrome、Safari、Opera
破洛洛文章简介：30个最经常使用css选择器剖析.
28.X:only-child
divp:only-child{
color:red;
}
这个伪类用的对照少。在下面例子中婚配的是div下有且唯一一个的p，也就是说，假如div内有多个p，将不婚配。
<div><p>Myparagraphhere.</p></div>
<div>
<p>Twoparagraphstotal.</p>
<p>Twoparagraphstotal.</p>
</div>
在下面代码中第一个div中的段落p将会被婚配，而第二个div中的p则不会。
兼容扫瞄器：IE9+、Firefox、Chrome、Safari、Opera
29.X:only-of-type
li:only-of-type{
font-weight:bold;
}
这个伪类婚配的是，在它下级容器下只要它一个子元素，它没有邻人元素。比方下面代码婚配唯一一个列表项的列表元素。
兼容扫瞄器：IE9+、Firefox、Chrome、Safari、Opera
30.X:first-of-type
:first-of-type伪类与:nth-of-type(1)效果不异，婚配呈现的第一个元素。我们来看个例子：
<div>
<p>Myparagraphhere.</p>
<ul>
<li>ListItem1</li>
<li>ListItem2</li>
</ul>
<ul>
<li>ListItem3</li>
<li>ListItem4</li>
</ul>
</div>
在下面的html代码中，假如我们但愿仅婚配ListItem2列表项该怎样做呢：
计划一：
ul:first-of-type>li:nth-child(2){
font-weight:bold;
}
计划二：
p+ulli:last-child{
font-weight:bold;
}
计划三：
ul:first-of-typeli:nth-last-child(1){
font-weight:bold;
}
兼容扫瞄器：IE9+、Firefox、Chrome、Safari、Opera。
总结：
假如你正在利用老版本的扫瞄器，如IE6，在利用下面css选择器时必定要注重它是不是兼容。不外，这不该成为制止我们进修利用它的来由。在计划时，你能够参考扫瞄器兼容性列表，也能够经由过程剧本手腕让老版本的扫瞄器也撑持它们。
另外一点，我们在利用javascript类库的选择器时，比方jquery，要尽量的利用这些原生的css3选择器，由于类库的选择器引擎会经由过程扫瞄器内置剖析它们，如许会取得更快的速率。
原文：http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
</p>
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
页:
[1]