CodeSky 代码之空

随手记录自己的学习过程

CSS优先级与选择器

2014-01-23 12:32分类: CSS评论: 0

###样式表优先级: 如果同时使用内联样式表和嵌入样式表,并设置了相同属性,则内联样式表优先级高。而同时使用嵌入样式表和外部样式表并设置相同属性,优先级由出现的先后顺序决定(后出现的覆盖先出现的)。

###类型: ####内联样式表:

1<p style="color:red"></p>
2

####嵌入样式表:

1<style type="text/css">
2	p { color: red; }
3</style>
4

####外联样式表:

1<link rel="stylesheet" type="text/css" href="nav.css">
2

####一个神奇的引入法:

1<style> @import url(style.css);</style>
2

###类选择器: 元素可以定义多个类选择器,用空格分开(但不能定义多个id选择器,id选择器唯一)如下为p定义了one two three三个类选择器

1<p class="one two three"></p>
2

###后代选择器、子元素选择器和相邻元素选择器: 后代选择器选中只要嵌套在内即可,如:

1	<p>
2		<table>
3			<tr>
4				<td>111</td>
5			</tr>
6		</table>
7	</p>
8
1p td {
2	color:red;
3}
4

可以让td中的字体变为红色

子元素选择器选择器中比如要临近关系

1p > table {
2    border: 1px;
3}
4
5/* 下面是无效的 */
6p > td {
7    color:red;
8}
9

相邻元素选择器选中的是相邻元素,如:

1<div>
2  <ul>
3    <li>List item 1</li>
4    <li>List item 2</li>
5    <li>List item 3</li>
6  </ul>
7  <ol>
8    <li>List item 1</li>
9    <li>List item 2</li>
10    <li>List item 3</li>
11  </ol>
12</div>
13
1li + li {font-weight:bold;}
2

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

三种选择器可以相互结合使用。 延伸阅读:http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

###选择器优先级: ID选择器 > 类选择器 >关联选择器 > HTML选择器 注:关联选择器是指以上三种选择器总称

1.一个标签选择器值1分。 2.一个类选择器值10。 3.一个ID选择器值100分。 4.一个行内样式(如:style)值1000分。

附:!important值∞

评论 (0)