一、语法规则
选择器{
属性1:属性值1;
属性2:属性值2;
......
}
/*注释*/二、如何在html中应用CSS
1. 外部引用css文件
css文件：css/layout.css（css文件夹和HTML位于同一个目录下）
<head>
<link rel="stylesheet" href="css/layout.css" rel="external nofollow" >
</head>2. 内部嵌入css
<head>
<style>
/*css代码*/
</style>
</head>3. 元素内部使用
<div style="属性名:属性值;属性名:属性值;"></div>三、选择器
1. 基本选择器
1）元素选择器
a div body ul2）类选择器
.ClassName 例如: .current
3）ID选择器
#IdName 例如: #top_nav
4）普遍选择器
*{
/*css代码*/
}5）并且选择器
选择器1选择器2
p.one#first
<p class="one" id="first"></p>6）并列选择器
p,.one,#first
<p></p>
<div class="one"></div>
<ul id="first"></ul>2. 层次选择器
1）后代选择器
使用空格分割两个选择器， 例如 【parant son】
2）子代选择器
使用大于号分割两个选择器，例如 【parent > son】
3）下一个兄弟选择器
使用+分割两个选择器，例如 【li:first-child + *】
4）之后所有兄弟选择器
使用波浪线~分割两个选择器，例如【li:first-child ~ *】
3. 属性选择器(过滤器)
配合基本选择器进行筛选
<input type="text" name="username">selector[name] 选择具有name属性的元素、无论该属性的值为什么
selector[name=val] 选择具有name属性的、并且name的值为val元素
selector[name*=val] 选择具有name属性的、并且name的值之一为val的元素
selector[name^=val] 选择具有name属性的、并且name的值以val开头的元素
selector[name$=val] 选择具有name属性的、并且name的值以val结尾的元素
selector[name~=val] 选择具有name属性的、并且name的值包含val的元素
4. 伪类选择器
配合基本选择器进行筛选1) 子元素
: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
2) 状态
:hover、:active:、focus
:enabled、 :disabled；:checked、 :default
:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range
5. 伪元素选择器
伪元素以”::”开头，用在选择器后，用于选择指定的元素。
::after
常用于清除浮动，让浮动的子元素将父撑起来。
例：
<ul id = "nav">
<li></li>
<li></li>
</ul> #nav::after{
content = "";
display = block;
clear = both;
}::before
::first-letter
::first-line
::selection未完待续… …
