CSS个人笔记 选择器

CSS个人笔记

选择器

标签选择器

标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。

例如

<style>
	p{
		height:100px;
		border:1px solid red;
	}
	
</style>

<p>one</p>
<p>two</p>
<p>three</p>

类选择器（ Class selectors ）

类选择器以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。一个元素可以有多个class的值，每个值通过空格分割开。类名相同的元素属于一类元素。
例如：

<style>	 		
		.first{font-weight: bold;}		 	
		.done {text-decoration: line-through;}	 	
	</style>
	<ul>		
		<li class="first done">Create an HTML document</li>
		<li class="second done">Create a CSS style sheet</li>
		<li class="third done">Link them all together</li>		
	</ul>

ID选择器（ID selectors）

ID选择器以"#"开头，后面紧跟一个ID名，在一个文档中，ID值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。
例如：

	<style>			
		#polite {	  font-family: cursive;}			
		#rude {	font-family: monospace;text-transform: uppercase;}
	</style>
	
	<p id="polite"> — "Good morning."</p>		
	<p id="rude"> — "Go away!"</p>

普遍选择器（Universal selector）

使用"*”来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。
例如：

	<style>			
		.left-nav>* { width:200px; background-color:#fafafa}
	</style>
	
	<article class="left-nav">
		<span></span>
		<dl>				
		    <dt>推荐</dt>				
		    <dd class="current"><i class="icon-music"></i>发现音乐</dd>		</dl>			
		<dl>				
		    <dt>我的音乐</dt>							    <dd><i class="icon-cloud-download"></i>下载的音</dd>			</dl>
	</article>

层次选择器

• 后代选择器（ descendant selector ） 使用 “ ” 隔开两个选择器。
  例如 “ul li”表示选择ul的后代元素li，li可以为ul的直接子元素，也可以为ul的孙子元素。
• 子代选择器（child selector） 使用 “>” 隔开两个选择器。
  例如 “ul>li”表示选择ul的直接子代元素li,ul的孙子元素li无法被选择到。
• 相邻同胞选择器（adjacent sibling selector） 下一个兄弟元素 使用 “+” 隔开两个选择器。
  例如 ".one+*"表示选择class为"one"元素的下一个兄弟元素。
• 一般同胞选择器（ general sibling selector） 之后所有的兄弟元素 使用 “~” 隔开两个选择器。
  例如 ".one~*"表示选择class为"one"元素之后的所有兄弟元素。

多选择器

• 组合选择器 多个选择器组合使用，使用“,”分割。
  例如 “div,.one,#tt”
  表示选择div元素，class为one的元素以及id为tt的元素

• 嵌套选择器 多个选择器嵌套使用。
  例如 “div.one” 表示class为one的div元素。

属性选择器

• [attr] 选择具有attr属性的元素、无论该属性的值是什么
• [attr=val] 选择具有attr属性的、并且attr的值为val元素
• [attr^=val] 选择具有attr属性的、并且attr的值以val开头的元素
• [attr$=val] 选择具有attr属性的、并且attr的值以val结尾的元素
• [attr*=val] 选择具有attr属性的、并且attr的值包含val的元素
• [attr~=val] 选择具有attr属性的、并且attr的值之一为val的元素

伪类选择器

伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中。

子代元素相关的伪类选择器

• :only-child 选中独生子元素
• :first-child 选中作为别人第一个孩子的元素
• :last-child 选中作为别人最后一个孩子的元素
• :nth-child(n) 选中作为别人第几个孩子元素的元素
• :nth-last-child(n) 选中作为别人倒数第几个孩子的元素
• :first-of-type 选中作为别人每种类型中的第一个孩子的元素
• :last-of-type 选中作为别人每种类型中的最后一个孩子的元素
• :nth-of-type(n) 选中作为别人每种类型中的第几个孩子的元素
• :nth-last-of-type(n) 选中作为别人每种类型中的倒数第几个孩子的元素
• 上面的n可以为元素的序号，也可以为特殊的字符，比如odd，even，n从1开始

元素状态相关伪类选择器

• :link 未被访问的状态，a标签
• :visited 已访问过的状态，a标签
• :hover 鼠标悬停的状态，a标签，其他标签也可用
• :active 活动的状态， a标签，其他标签也可用
• :focus 聚焦的状态
• :checked 用户选中的单选按钮和复选按钮
• :default 默认选中的单选按钮和复选按钮
• :enabled、 :disabled 可用的表单控件、禁用的表单控件
• :valid 、:invalid 通过验证的、不通过验证的
• :required、:optional 必填的和选填的
• :in-range 、:out-of-range 在范围内的、在范围外的

伪元素选择器

伪元素以"::"开头，用在选择器后，用于选择指定的元素。

• ::after 选中之后的不存在的节点，可配合content属性进行内容填充
• ::before 选中之前的不存在的节点，可配合content属性进行内容填充
• ::first-letter 选中第一个文本字符
• ::first-line 选中第一行文本
• ::selection 选中用户在选择的时候的文本

级联(The cascade)

从表层来看，级联表明CSS规则的顺序问题，但是级联远比这个复杂，在所有的选择器中某个选择器定义的规则是否能够胜出（即优先级）取决于三个元素：Importance，Specificity，Source order

!important声明(Importance)

在css规则的值末尾添加"!important"能够保证该规则优先其他规则。但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。

   <style>
		#winning {background-color: red; border: 1px solid black;}
		.better {	 background-color: gray; border: none !important;}
	</style>
	<p class="better">This is a paragraph.</p>		
	<p class="better" id="winning">One selector to rule them all!</p>

特性值 (Specificity)

1000
如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
100
在整个选择器中每包含一个ID选择器就在该列中加1分。
10
在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
1
在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

其他不加分

代码顺序 (Source order)

如果多个竞争选择器具有相同的重要性和特性值，代码顺序就发挥作用了，后来规则优先前面规则。
采取就近原则。

继承（Inheritance）

CSS中有些规则将会默认被子元素继承，有些则不会。
可继承属性：font系列属性、文本系列属性、列表系列属性、cursor、visibility等
不可继承属性：margin、padding、border等

CSS提供了三个特殊的值用来处理继承

• inherit 继承父元素的样式
• initial 不继承。应用浏览器的默认样式
• unset 不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。