在html中使用css的三种方式：
1、行内样式：同过元素的style属性来设置
<pstyle="font-size:20px;color:red">hello</p>
属性之间分号隔开。
2、内部样式：在<head>的<style>元素中定义css样式
<style>
p{font-size:20px;color:red}
</style>
3、外部样式：在css文件中定义css样式，然后在html的<head>中通过<style>引入外部样式表
p{font-size:20px;color:red}
<linkhref="xxx.css"type="text/css"rel="stylesheet"/>
css文件中不加<style>标签，直接写css样式就ok。
内部|外部样式的语法：选择器{属性名1：属性值1;属性名2：属性值2}
三种方式，属性之间都是分号隔开。
css注释：
/*注释*/
css选择器
1、元素选择器、类选择器、id选择器
p{color:red}/*元素选择器，给所有p元素设置样式*/
.red{color:red}/*类选择器，在元素中通过class="red"引用*/
#user{color:red}/*id选择器，在元素中通过id="user"引用，最多只能使用1次*/
2、通用选择器、分组选择器
*{color:red}/*通用选择器，给所有元素设置样式*/
h1,.red{color:red}/*分组选择器，同时给多个选择器设置相同的样式*/
3、后代选择器、子选择器、相邻兄弟选择器、后续兄弟选择器
divp{color:red}/*后代选择器，选择<div>中所有的<p>元素，不管<p>是<div>的儿子、孙子、重孙......只要<p>是<div>的后代就行*/
div>p{color:red}/*子选择器，选择的是<p>，<p>必须是<div>的儿子*/
div+p{color:red}/*相邻兄弟选择器，选择的是<p>，<p>必须是<div>后面的第一个兄弟元素*/
div~p{color:red}/*后续兄弟选择器，选择<div>后面所有的<p>，<p>必须是<div>的兄弟元素*/
4、属性选择器
[attr]/*含有attr属性*/
[attr=value]/*有attr属性，且属性值为value*/
[attr^=value]/*有attr属性，且属性值以value开头(只要value是开头就ok*/
[attr|=value]/*有attr属性，且属性值以value开头、value和后面部分以-连接*/
[attr$=value]/*有attr属性，且属性值以value结尾*/
[attr*=value]/*有attr属性，且属性值中含有value（含有就ok）*/
[attr~=value]/*有attr属性，且属性值中含有单词value，value要是一个完整的单词（和其它单词以空格隔开）*/
属性选择器常和其它选择器一起使用，比如:
button[type="button"]/*选择所有type="button"的<button>*/
属性选择器中，attr不能加引号，value可引可不引。
5、<a>链接
a:link/*所有未访问过的<a>*元素/
a:hover/*鼠标移到<a>元素上*/
a:active/*点击<a>时*/
a:visited/*所有访问过的<a>*/
这4个设置的是<a>元素不同时期的样式。
:hover这个伪类所有元素都可以使用。
6、表单元素
:focus/*聚焦时*/
:checked/*选中时*/
:enabled/*可用的*/
:disabled/*禁用的*/
:read-only/*只读*/
可单独使用，也可配合表单元素使用：
:focus{}
input:focus{}
7、空元素
:empty{}/*所有的空元素*/
p:empty{}/*所有空的<p>元素*/
空元素指的是没有任何属性、没有内容的元素，示例：<p></p>。
8、非
:not(p)/*选择不是<p>的所有元素*/
()中尽量只使用元素选择器，使用其他选择器容易出错。
9、type系列
p:first-of-type/*同级别中的第一个<p>*/
p:nth-of-type(n)/*同级别中的第n个<p>*/
p:nth-last-of-type(n)/*同级别中的倒数第n个<p>*/
p:last-of-type/*同级别中的最后一个<p>*/
p:only-of-type/*同级别中唯一的一个<p>*/
示例：
p:first-of-type{color:red}
<body>
<h1></h1>
<p></p><!--选中-->
<p></p>
<div>
<h2></h2>
<p></p><!--选中-->
<p></p>
</div>
</body>
只要是同级别的<p>中的第一个即可。
10、child系列
p:first-child/*匹配的是<p>，<p>要是其父元素的第一个子元素*/
p:nth-child(n)/*匹配的是<p>，<p>要是其父元素的第n个子元素*/
p:nth-last-child(n)/*匹配的是<p>，<p>要是其父元素的倒数第n个子元素*/
p:last-child/*匹配的是<p>，<p>要是其父元素的最后一个子元素*/
p:only-child/*匹配的是<p>，<p>要是其父元素的唯一一个子元素*/
示例：
p:first-child{color:red}
<body>
<h1></h1>
<p></p>
<p></p>
<div>
<p></p><!--选中-->
<p></p>
</div>
</body>
11、首字、首行
p:first-letter/*<p>元素的第一个字符*/
p:first-line/*<p>元素的第一行*/
12、:before:after
p:before{/*在<p>的前面添加内容*/
content:"hello"
}
p:after{/*在<p>的后面添加内容*/
content:"byebye"
}
添加的内容默认是行内元素，但会和<p>在同一行显示（相当于把添加的内容放到<p>元素内的最前|后面），添加的并不是一个真正的元素，所以叫做伪元素。
可以设置为块级，添加的内容会作为块级元素显示：
p:before{/*在<p>的前面添加内容*/
content:"hello";
display:block
}
p:after{/*在<p>的后面添加内容*/
content:"byebye";
display:block
}
可以给添加的元素设置样式：
p:before{
content:"hello";/*属性之间分号分隔*/
display:block;/*给添加的内容设置样式*/
font-size:20px;
color:red
}
添加图片：
p:before{
content:"";/*content属性是必需的，不添加文本时可以设置为空串*/
display:block;/*必须要设置为块级，要设置宽、高，添加的背景图片才能显示出来*/
width:100px;
height:100px
background-image:url("1.png");
}
清除浮动：
p:before{
content:"";
clear:both
}
伪元素可以使用单冒号，也可以使用双冒号。
:before<=>::before
:after<=>::after
带冒号的选择器中，有4个伪元素:first-letter、:first-line、:before、:after，其余都是伪类。
选择器可以搭配使用。
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h56520.shtml
