CSS Selector 种类简介

魚戀秋波 Neil Y.K. :

其实学习 网页样式表(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 又可分为很多种∶

1. :link (连结平常的样式)
2. :visited (连结查阅後的样式)
3. :hover (滑鼠滑入的样式)
4. :active (滑鼠按下的样式)
5. :focus (目标为焦点的样式)
6. :lang(X) (当语言为 X 的样式)
7. :first-child (第一个元素的样式)

网页元素码∶<div></div>
选取器写法∶div:link{样式:属性;} 以连结平常的样式为例！
选取器写法∶div:hover{样式:属性;} 以滑鼠滑入的样式为例！

Pseudo-elements（伪元素）

这边的伪元素选取器其实还有蛮多的，但这两个是比较常用的∶

1. :first-line (元素的第一行)
2. :first-letter (元素的第一个字母)

网页元素码∶<div></div>
选取器写法∶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)