前端学习日记（六）：css如何作用于html、css选择器的简单应用

一、CSS如何作用于HTML

1. 外部样式表（ External stylesheet）【将CSS规则写到一个以“.css”为后缀的文件中，然后使用HTML中的标签将 CSS文件应用到HTML文档中 】
   <link rel=“stylesheet” href=“style.css”>

2. 内部样式表（ Internal stylesheet）【将CSS规则写到<style标签>中，在不能直接更改CSS文件情况下，这种方式有效， 但是一般不推荐使用，修改起来不方便。 】

3. 行内样式表（ Inline styles）【将CSS规则写到元素的style属性中，只能作用与一个元素，一般不推荐使用。 】

二、选择器

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

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

2. 类选择器 【类选择以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中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>

3. ID选择器 【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>

4. 普遍选择器 【使用"*”来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。】

<style>
.left-nav > * { width:200px; background-color:#fafafa}
</style>
<article class="left-nav"> 
<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>

5. 层次选择器
   （1）后代选择器【使用 “ ” 隔开两个选择器。例如 “ul li”表示选择ul的后代元素li，li可以为ul的直接 子元素，也可以为ul的孙子元素。 】
   （2）子代选择器【使用 “>” 隔开两个选择器。例如 "ul>li"表示选择ul的直接子代元素li,ul的孙子元 素li无法被选择到 】
   （3）相邻同胞选择器-下一个兄弟元素 【使用 “+” 隔开两个选择器。例如 ".one+乘号"表示选择class为"one"元素的下一个兄 弟元素。 】
   （4）一般同胞选择器-之后所有的兄弟元素 【使用 “~” 隔开两个选择器。例如 ".one~*"表示选择class为"one"元素之后的所有 兄弟元素。】

6. 多选择器
   （1）组合选择器 【多个选择器组合使用，使用“,”分割。 例如 “div,.one,#tt” 表示选择div元素，class为one的元素以及id为tt的元素】
   （2）嵌套选择器 【多个选择器嵌套使用。例如 “div.one” 表示class为one的div元素。】

7. 属性选择器
   （1） [attr] 选择具有attr属性的元素、无论该属性的值是什么
   （2） [attr=val] 选择具有attr属性的、并且attr的值为val元素
   （3） [attr~=val] 选择具有attr属性的、并且attr的值之一为val的元素
   （4） [attr^=val] 选择具有attr属性的、并且attr的值以val开头的元素
   （5） [attr$=val] 选择具有attr属性的、并且attr的值以val结尾的元素
   （6） [attr*=val] 选择具有attr属性的、并且attr的值包含val的元素

8. 伪类选择器 【伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中 】
   （1）表示子元素的
   [1] :only-child 选中独生子元素
   [2] :first-child 第一个孩子元素
   [3] :last-child 最后一个孩子元素
   [4] :nth-child(n) 、: nth-last-child(n) 第几个孩子元素、倒数第几个孩子元素 ( n可以为元素的序号，也可以为特殊的字符，比如odd，even )
   [5] :first-of-type、:last-of-type 每种类型中的第一个孩子元素、最后一个孩子元素
   [6] :nth-of-type(n)、:nth-last-of-type(n) 每种类型中的第几个孩子元素、倒数第几个孩子元素（ n可以为元素的序号，也可以为特殊的字符，比如odd，even）

（2）元素状态相关
[1] :link 未被访问的状态
[2] :visited 已访问过的状态
[3] :hover 鼠标悬停的状态
[4] :active 活动的状态
[5] :focus 聚焦的状态
[6] :enabled 可用的表单控件
[7] :disabled 禁用的表单控件
[8]:checked 用户选中的单选按钮和复选按钮
[9] :default 默认选中的单选按钮和复选按钮
[10] :invalid、 :valid 不通过验证的、通过验证的
[11] :required、:optional 必填的和选填的
[12] :in-range 、:out-of-range 在范围内的、在范围外的