CSS教程之CSS3属性挑选符先容

大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
英文原文：
http://www.456bereastreet.com/archive/200601/CSS_3_selectors_explained/
中文翻译：
http://www.dudo.org/article.asp?id=197
注：本文写于2006年1月，事先IE7、IE8和Firefox3还未刊行，文中一切说的扫瞄器撑持均未包含这三个版本的扫瞄器。在IE8和Firefox3中，文中的年夜部分选择符已被撑持[dudo注]
在2005年的9月和10月，我前后宣布了几篇关于CSS2.1当选择符的先容文章。大致看来那几篇文章中先容过的年夜部分选择符都已能够在像Mozilla/Firefox，Safari和Opera等古代扫瞄器中利用了。我们如今要做的就是守候InternetExplorer尽快遇上来，那我们就能够恣意地利用CSS2.1中的选择符了。幸亏InternetExplorer在其第7个版本中已在全力追逐了，最少在某些扩大方面。
假如我们再向前看一点，在CSS3中另有功效加倍壮大的选择符守候我们往开掘和利用。CSS3中的良多选择符已在古代扫瞄器中失掉很好的使用（IE8.0中也已部分地撑持了CSS3，dudo注），可是这些基础功效上的撑持还远远不克不及满意开辟者利用的请求。可是在某些情形下利用他们能够带来很好的超前体验，因而我以为懂得一下CSS3新增选择符是怎样利用仍是无益处的。
本文中对选择符形貌次要是参考了《2005年12月15日W3C制订的选择符草稿》。草稿中讲到的新的选择符大概会在CSS的第3个版本中呈现，可是也大概会呈现在其他言语中。假如你是几个月前乃至是几年前读过这篇草稿，那末如今你应当再往看一下是否是已呈现了最新版本了。
这里我不盘算往注释CSS选择符事情的基础道理。假如你想主要温习一下的话，最好从《细说CSS2.1中的选择符》入手下手。
起首，疾速扫瞄一下CSS3中新增的选择符：
CSS3选择符语法概览：
选择符范例表达式形貌子串婚配的属性选择符E[att^="val"]婚配具有att属性、且值以val开首的E元素子串婚配的属性选择符E[att$="val"]婚配具有att属性、且值以val开头的E元素子串婚配的属性选择符E[att*="val"]婚配具有att属性、且值中含有val的E元素布局性伪类E:root婚配文档的根元素。在HTML中，根元素永久是HTML布局性伪类E:nth-child(n)婚配父元素中的第n个子元素E布局性伪类E:nth-last-child(n)婚配父元素中的倒数第n个布局子元素E布局性伪类E:nth-of-type(n)婚配同范例中的第n个同级兄弟元素E布局性伪类E:nth-last-of-type(n)婚配同范例中的倒数第n个同级兄弟元素E布局性伪类E:last-child婚配父元素中最初一个E元素布局性伪类E:first-of-type婚配同级兄弟元素中的第一个E元素布局性伪类E:only-child婚配属于父元素中独一子元素的E布局性伪类E:only-of-type婚配属于同范例中独一兄弟元素的E布局性伪类E:empty婚配没有任何子元素（包含text节点）的元素E方针伪类E:target婚配相干URL指向的E元素UI元素形态伪类E:enabled婚配一切用户界面（form表单）中处于可用形态的E元素UI元素形态伪类E:disabled婚配一切用户界面（form表单）中处于不成用形态的E元素UI元素形态伪类E:checked婚配一切用户界面（form表单）中处于选中形态的元素EUI元素形态伪类E::selection婚配E元素中被用户选中或处于高亮形态的部分否认伪类E:not(s)婚配一切不婚配复杂选择符s的元素E通用兄弟元素选择器E~F婚配E元素以后的F元素

假如对下面的形貌还不是很分明的，请不要忧虑。本文上面的部分将会对他们举行加倍具体的解说，而且供应例子来演示他们是怎样利用的。


子串婚配的属性选择符
这一组的选择符都新加的，他同意开辟者对属性中的子字符串来举行婚配。
假定HTML文档中包括上面的代码布局：
<divid="nav-primary"></div>
<divid="content-primary"></div>
<divid="content-secondary"></div>
<divid="tertiary-content"></div>
<divid="nav-secondary"></div>
经由过程利用子串婚配的属性选择符就能够找到文档中这些布局性的特定组合。
上面的划定规矩将为id以“nav”开首的div元素设定背景色彩：
div[id^="nav"]{background:#ff0;}
上例当选择符会婚配div#nav-primary和div#nav-secondary。
要找到id以primary开头的div元素，可使用上面的划定规矩：
div[id$="primary"]{background:#ff0;}
这时候选择符将婚配div#nav-primary和div#content-primary。
上面的划定规矩将会婚配到id中含有content子字符串的的div中：
div[id*="content"]{background:#ff0;}
受影响的元素有：div#content-primary、div#content-secondary和div#tertiary-content。
子串婚配的属性选择符已在最新版本的Mozilla、Firefox、Flock、Camino、Safari、OmniWeb和Opera中可使用，可是假如IE中还不撑持的话，我们最好仍是先不要利用他们（作者在写这篇文章时IE还在开辟中，现在IE7、IE8都撑持这些选择符，dudo注）。
方针伪类
含有辨认标识的url（一个#前面紧跟锚点称号大概元素的id）指向的是文档中的特定元素。链向其他方针元素的这些元素就能够利用:target伪类来润色它。假如以后的URL中没有任何的片段辨认标识，:target伪类将不会婚配任何元素。
仍是以下面提到的代码布局为例，假如URL中包括content-primary标识时，如今的划定规矩将会在他核心增添一个边框：
div#content-primary:target{outline:1pxsolid#300;}
URL是相似如许的情势的：
http://www.ckuyun.com/index.html#content-primary。
基于Mozilla和Safari的扫瞄器已撑持:target伪类。
UI元素形态伪类
:ENABLED伪类和:DISABLED伪类
在扫瞄器同意改动表单控件表面的条件下，:enabled伪类和:disable伪类同意开辟者指定用户界面中可用和不成用元素（表单位素）的显现款式。上面的划定规矩将会依据单行输出框是不是可用设定分歧的背景色彩：
input[type="text"]:enabled{background:#ffc;}
input[type="text"]:disabled{background:#ddd;}


:CHECKED伪类
:checked伪类同意开辟者为处于选中形态的checkbox和radio设定款式。固然这也要在扫瞄器同意改动表单控件表面的前提下。上面的CSS划定规矩将会使选中的radio和checkbox元素显现一个绿色边框：
input:checked{border:1pxsolid#090;}
UI元素形态伪类今朝能够在Opera和基于Mozilla的扫瞄器中利用。
要注重的是，很多扫瞄器关于开辟者对表单控件款式的改动有着严厉的限定。更多关于这便利的内容能够我的两篇文章：《款式化表单控件》和《款式化更多表单控件》。
布局性伪类
布局性伪类同意开辟者依据文档树中标明的布局来指定元素，而这些利用复杂选择符大概是夹杂选择符都没法做到。布局性伪类功效非常壮大，可是不幸的是古代扫瞄器仅供应了无限的撑持。
:ROOT伪类
:root伪类指向的是文档的根元素。在HTML中，文档的根元素一直是HTML，也就是说如今的两条划定规矩实际上是一样的（大致上说来:root要比html更专业点）。
:root{background:#ff0;}
html{background:#ff0;}
:NTH-CHILD()伪类
:nth-child()伪类指向的元素在文档树中有必定数目的兄弟元素存在。个中括号内的参数，能够是一个数字，也能够一个关头字大概一个公式。
数字b指是的第b个子元素。上面的划定规矩将会使用到父元素下一切p元素中的第三其中：
p:nth-child(3){color:#f00;}
关头字odd（奇数）和even（偶数）能够用来婚配序号为奇数大概是偶数的子元素。第一个元素的序号为1，由于上面的划定规矩将会婚配第1、3、5...了子元素p：
p:nth-child(odd){color:#f00;}
上面的划定规矩则婚配第2、4、6...个字元素p：
p:nth-child(even){color:#f00;}
表达式an+b能够用来创立加倍庞大的轮回形式。在表达式中，a代表步长，n是一个从0入手下手的计数器，b代表偏移量。个中，一切的数值都必需是整数（这里，n是从0入手下手的，和js等中的轮回分歧的是，至于到几停止取决于元素的个数决意，如文档中有20个元素，3n(n=1,2...)就会分离选择第3、6、9、...18个元素，n此时为6，dudo注）。为了更好了解怎样利用表达式我们先看几个代码实例：
上面的划定规矩将会婚配序号数为3的倍数的一切p元素。在第一行中，b即是0，因而能够疏忽不写（见第二行）：
p:nth-child(3n+0){color:#f00;}
p:nth-child(3n){color:#f00;}
偏移量能够用来指定款式的轮回是从哪一个元素入手下手使用的。假如有一个20行的表格，我们但愿从第10行今后的奇数行入手下手利用分歧的背景色彩，就能够利用上面这条划定规矩：
tr:nth-child(2n+11){background:#ff0;}
因为n是从为入手下手的，因而第一个受影响的tr元素的序号是11（2*0+11＝11,dudo注）。接上去就是第13行（2*1+11=13）再接上去就第15行（2*2+11＝15），以此类推。
更具体先容请参照CSS3选择符中的《nth-child()伪类》。
那末，关于如许有效的一个选择符又有哪些扫瞄器撑持它呢？很糟，据我所知，没有一个扫瞄器撑持这个选择符乃至没有扫瞄器撑持nth类的选择符。假如有的话请帮我斧正（Firefox3和IE8今朝是不是撑持？dudo）


:nth-of-type()
:nth-of-type()伪类和nth-child()伪类找利用办法非常类似，只不外他婚配的是划定规矩中指明范例的元素。上面的划定规矩将会婚配每一个属于父元素中第三个子元素的p元素（属于第3个子元素的p在一个应当中大概会有良多，只不外他们位于分歧的父元素下，dudo注）：
p:nth-of-type(3){background:#ff0;}
当你想断定是不是已指向了第三个p元素，这类办法会很有效。入手下手你大概以为这和利用nth-child效果是一样的，可是nth-child(3)会把一切的子元素都盘算出去，因而了局大概就会纷歧样，除非p一切的一切兄弟元素也都是p元素。
:nth-of-type伪类今朝还没有扫瞄器撑持。
:nth-last-of-type伪类
:nth-last-of-type伪类指向的元素在厥后另有多少同范例的元素。和:nth－last-child伪类一样，它是从最初一个子元素向回数的。上面的划定规矩将会婚配到倒数第二个兄弟元素p中（注重：是兄弟、同级其余节点）：
p:nth-last-of-type(2){background:#ff0;}
:nth-last-of-type()今朝还没有扫瞄器撑持。
:last-child伪类
:last伪类指向的是父元素中最初一个子元素。它和:nth-last-child(1)效果是一样的。上面的划定规矩婚配一切属于父元素中最初一个子元素的p：
p:last-child{background:#ff0;}
:last-childe伪类能够在基于Mozilla的扫瞄器中利用。Opera不撑持:last-childe伪类，在Safri中存在bug（下面的划定规矩会婚配到一切的p元素）。使人希奇是的它能够在OmniWeb（测试版本5.1.1）中一般利用，只管这个扫瞄器是基于Safari的。这多是由于AppleWebKit最新版本的回回，由于OmniWeb利用的WebKit一般要比Safari版本略微低一点。
:first-of-type伪类
:first-of-type伪类指向同范例元素中的第一个元素。它和:nth-of-type(1)是一样的。
p:first-of-type{background:#ff0;}
:first-of-type伪类今朝还没有扫瞄器撑持。
:last-of-type伪类
:last-of-type伪类指向同范例元素中的最初一个元素。它和nth-last－of-type(1)是一样的。
p:last-of-type{background:#ff0;}
:last-of-type伪类今朝还没有扫瞄器撑持。
:only-child伪类
:only-childe伪类指向的是那些父元素中再没有其他任何子元素的元素。它和:first-child:last-child大概:nth-child(1):nth-last-child(1)是一样的（后者不敷专业、简明）。
p:only-child{backgound:#ff0;}
:only-childe伪类今朝能够在基于Mozilla的扫瞄器中利用。在Safari仿佛被注释成了:first-child（下面的划定规矩会被婚配到文档中一切第一个子元素p中）。
:only-of-type伪类
:only-of-type伪类指向的是那些父元素中再也没有与之范例不异的子元素。这和:first-of-type:last-of-type大概:nth-of-type(1):nth-last-of-type(1)不异（后者专业性不敷）。
p:only-of-type{background:#ff0;}
:only-of-type伪类今朝还没有扫瞄器撑持。


:empty伪类
:empty伪类指向没有任何子元素的元素。个中包含text节点，因而上面的示例只要第一行是空元素。
<p></p>
<p>text</p>
<p><em></em></p>
上面的划定规矩只婚配第一行的p元素：
p:empty{background:#ff0}
:empty伪类今朝被基于Mozilla的扫瞄器撑持。Safari会毛病地把款式使用到一切指定的元素中往。
否认伪类
否认伪类写成:not(s)，参数s为复杂选择符。它指向的是除复杂选择所指向的元素之外的一切元素。比方，上面的CSS将会指向一切不是p的元素：
:not(p){border:1pxsolid#ccc;}
否认伪类今朝只要基于Mozilla的扫瞄器撑持。
::selection伪类
::selection伪类婚配指定元素中处于选中大概高亮形态的部分。个中一个使用就是用它来把持选中文本的款式。
上面的划定规矩会使选中的文本色彩变成白色：
::select{color:#f00;}
::selection伪类今朝大概基于Safari的扫瞄器撑持。可是在利用上会呈现不成意料的情形，因而Safari还必要一点改善。基于Mozilla的扫瞄器要利用-moz-prefix:::-mozi-selection来完成。这类prefix大概终极会被往失落。
通用兄弟元素选择器
通用兄弟元素选择器经由过程两个复杂选择符经由过程海浪号（~）分开构成。它婚配第二个复杂选择符中所婚配的元素，并且与第一个复杂选择符中婚配的元素要呈现在他的后面。这两个元素必需具有统一个父元素，可是第二个元素纷歧定必需紧跟在第一个元素以后。这条CSS划定规矩将会婚配一切p元素以后ul元素：
p~ul{background:#ff0;}
通用兄弟元素选择器今朝有Opera和基于Mozilla的扫瞄器撑持。
亟需更好的扫瞄器撑持
部分CSS3选择符已被普遍撑持。可是，年夜部分十分有效的选择符在古代扫瞄器中大概未被撑持大概利用遭到限定。这就使得本文中先容的良多选择符在明天的Web或多或少得到了用武之地。可是不用惧怕往实验它，你仍旧能够在撑持他们的带来超前体验的初级扫瞄器中利用他们。
[附件]CSS3选择符在如今扫瞄器（Firefox2、Firefox3、InternetExplorer7、InternetExplorer8、Oper9.27）中的撑持水平（dudo考证，请斧正！）
_________________IE7________IE8________FF2_________FF3______Opera9.27
E[foo^="bar"]______Y__________Y__________Y__________Y__________Y
E[foo$="bar"]______Y__________Y__________Y__________Y__________Y
E[foo*="bar"]______Y__________Y__________Y__________Y__________Y
E:root____________N__________N__________Y__________Y__________Y
E:nth-child()_______N__________N__________N__________N__________N
E:nth-last-child()____N__________N__________N__________N__________N
E:nth-of-type()_____N__________N__________N__________N__________N
E:nth-last-of-type()__N__________N__________N__________N__________N
E:last-child_________N__________N__________Y__________Y__________N
E:first-of-type______N__________N__________N__________N__________N
E:only-child________N__________N__________Y__________Y__________Y
E:only-of-type______N__________N__________N__________N__________N
E:empty__________N__________N__________Y__________Y__________N
E:target___________N__________N__________Y__________Y__________N
E:enabled_________N__________N__________Y__________Y__________Y
E:disabled_________N__________N__________Y__________Y__________Y
E:checked_________N__________N__________N__________N__________Y
::selection_________N__________N__________N__________N__________N
not()_____________N__________N__________Y__________Y__________Y
E~F_____________Y__________Y__________Y__________Y__________Y

可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

仓酷云

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）