羊皮纸论坛目录 / 程式设计 / 网页/网站程式 / CSS /

CSS Selector 种类简介

发表新主题
随机主题
上个主题
下个主题
|
CSS Selector 种类简介

其实学习 网页样式表(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 Selector 种类简介 》, 请尊重著作权, 未经作者同意请勿任意转载
  • 关键字 : 样式, 属性, 选取器写法, 网页元素码, selectors, Selector, combinator, title, first, 元素, Pseudo, 样式为例, sibling, myTitle, hover, 麽多, 鱼恋把CSS, 部份其实没, 选取器就, 选取器
0 0
2011-08-26T15:48:00+0000


  • 当您未登入羊皮纸时,可以利用脸书 Facebook 登入来发表回响。若使用羊皮纸会员身份发表回响则可获得经验值及虚拟金币,用来参加羊皮纸推出的活动。
发表回响
 
验证字串