CSS学习之选择器 - CSS: The Missing Manual

选择器

class的名字允许使用字母、数字、连字符、下划线，必须使用字母开头， 大小写敏感。

允许一个html标签有多个class，定义方式如下例：

<button class="btn add">Add</button>
<button class="btn delete">Delete</button>
<button class="btn edit">Edit</button>

常常用div或span标签来包围一些元素，使得class可以被合理的定义以用于需求的css样式。

//div作为block-level的元素，会在上下文都产生换行

//在html5特性中，出现了很多新的具有不同特征的块级元素标签，比如figure和artical，但是ie8还不支持html5新标签，因此现在还是更倾向于使用div标签。

//span作为inline元素，不会产生换行，可以用它包围一段文字中的一部分，来定义css样式

ID在css中不太需要被用到。它的优点一个是在js中可以准确表示某一个标签，二是可以使网页快速定位到某一标签的位置。

通用样式使用*作为选择器，例*{ pro: value; }

可以同时对多个选择器定义样式，例h1, h2, h3{ pro: value; }

不同浏览器对各种块级元素有不同的默认边框属性，通常都会在css文件的最开始对所有块级元素清除边框样式。

例:

*{

padding: 0;

margin: 0;

}

Pseudo-Classes and Pseudo-Elements

选择器	解释
链接
a:link	没有点击过，鼠标也没有悬停和点击的link
a:visited	点击过的link
*:hover	鼠标停留在上面的元素
a:active	鼠标正在点击时候的link
Paragraphs
段落
:first-line	段落的第一行
:first-letter	段落的第一个字母
其它
:FOCUS	类似hover，当用户clicking或tabbing某个元素的时候
:BEFORE	在元素前面插入内容，例.tip:before{ content: “!!!”; }
:AFTER	在元素后面插入内容
::SELECTION	css3特性，被选中的文字，不兼容ie8，ff，safari，兼容方式另查

9. 使用元素的属性作为选择器。

例：属性匹配：img[title]{…}

例：属性和属性值匹配：a[href=”http://www.sss.com”]{ …}

例：属性值前匹配：a[href^=”http://”] { …}

例：属性值后匹配：a[hrep$=”.pdf”] { …}

例：属性值聚不匹配：img[src*=”headshot”] { …}

10.孩子选择器（child selectors） //:first-child

//:last-child

//:only-child （某元素是该父级元素唯一的孩子）

//:nth-child (odd)

//:nth-child(even)

//:nth-child(5)

:nth-child(3n+1)

11.child type selectors

//: first-of-type (选择是该type的第一个孩子，例.sideBar p:first-of-type { …}，选择type为p的sideBar类里的第一个孩子）

//:last-of-type

//:nth-of-type(…)

12.兄弟姐妹（siblings）

例：h2 + p 选择了紧接着h2之后的第一个p

例：h2 ~ p 选择了h2的兄弟姐妹里所有的p标签

13.其它selectors

//:target 通过超链接跳转到的某一个元素

//:not