其实学习 网页样式表(CSS) 不难，只不过很多时後真的要遇到实际的需求才会发现 CSS 好用的地方，当然很多书本上对於 CSS Selector 的部份其实没有交代的很清楚，由其是在以前 CSS 书很少的时代，所以鱼恋把CSS Selector整理了一下与大家分享。
CSS Selector 又称为样式选取器，也就是你希望 CSS 所显示出来的效果要套用在哪些网页元件上，有那麽多的网页元素，要如何简洁有效的套用上样式， Selector 的善用功力就是关键！
鱼恋会设计一些范例，用来解释 Selector 的用法，网页元素码就是写在 .HTML 档里的东东，选取器就是写在 .CSS 或是在 <style> 标签里的东东噜！
选取器Selector 大约分成以下几种∶
- Class selectors
- 网页元素码∶<div class="myID">选我</div>
选取器写法∶.myID {样式:属性;} - ID selectors
- 网页元素码∶<div id="myID">选我</div>
选取器写法∶#myID {样式:属性;} - Type selectors（类型）
- 网页元素码∶<div>选我</div>
选取器写法∶div {样式:属性;} - Universal selector（全域）
- 网页元素码∶网页内所有元素都会套用设定
选取器写法∶* {样式:属性;} - Attribute selectors（属性器）
- 网页元素码∶<div title="myTitle">选我</div>
选取器写法∶div[title] {样式:属性;} 只要含有属性就可以了。
选取器写法∶div[title=myTitle]{样式:属性;}属性的值必需相同才可以。
选取器写法∶div[title~=my]{样式:属性;}属性的值中部份符合就可以了。 - Descendant combinator（後代）
- 网页元素码∶<div><span>选我</span><p>我没被选</p></div>
选取器写法∶div span {样式:属性;} - Child combinator（子元素）
- 网页元素码∶<div><span>选我</span><p><span>我没被选</span></p></div>
选取器写法∶div > span {样式:属性;} 同样是 span 但两者必须为父子关系才有效。 - Adjacent sibling combinator（同层相邻元素）
- 网页元素码∶<p>我没被选</p><div></div><span>选我</span><span>我没被选</span>
选取器写法∶div + span {样式:属性;} - General sibling combinator（所有同层元素）
- 网页元素码∶<div></div><span>选我</span><span>选我</span><p>我没被选</p>
选取器写法∶div ~ span {样式:属性;} - Pseudo-classes（伪类）
- Pseudo 又可分为很多种∶
- :link (连结平常的样式)
- :visited (连结查阅後的样式)
- :hover (滑鼠滑入的样式)
- :active (滑鼠按下的样式)
- :focus (目标为焦点的样式)
- :lang(X) (当语言为 X 的样式)
- :first-child (第一个元素的样式)
选取器写法∶div:link{样式:属性;} 以连结平常的样式为例！
选取器写法∶div:hover{样式:属性;} 以滑鼠滑入的样式为例！ - Pseudo-elements（伪元素）
- 这边的伪元素选取器其实还有蛮多的，但这两个是比较常用的∶
- :first-line (元素的第一行)
- :first-letter (元素的第一个字母)
选取器写法∶div:first-line{样式:属性;}
- Groups of selectors（群组）
- 用来同时指定多个 Selector 选取器统一定义样式。
网页元素码∶<div></div><p></p><span id="myID"></span>
选取器写法∶div , p , #myID{样式:属性;}
以上的选取器 Selector 基本上是可以交互使用的，比如说你可以用ID selectors 配合Descendant combinator∶
网页元素码∶<div id='myID'><span>选我</span><p>我没被选</p></div>
选取器写法∶#myID span {样式:属性;}
so! 有没有很简单的一目了然！
本文投稿至羊皮纸论坛 «CSS»
本文为原创文章, 为尊重著作权, 未经作者同意请勿任意转载- 关键字 : 样式(23), 属性(18), 选取器写法(16), 网页元素码(13), selectors(6), Selector(6), combinator(5), title(4), first(4), 元素(3), Pseudo(3), 样式为例(2), sibling(2), myTitle(2), hover(2), 麽多(1), 鱼恋把CSS(1), 部份其实没(1), 选取器就(1), 选取器(1)
0 0
2011-08-26T15:48:00+0000
