1.元素选择器
E { … } /*E代表HTML元素名*/
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>元素选择器</title>
<style type="text/css">
div {
background-color: grey;
font: italic normal bold 24px normal 宋体;
}
</style>
</head>
<body>
<div>元素选择器</div>
</body>
</html>效果：
2.属性选择器
属性选择器顾名思义就是根据元素的属性来为确认的元素定义样式。从广义的角度看，元素选择器是属性选择器的特例。属性选择器有如下几种语法
Ø E { … }：为所有E元素定义样式。
Ø E[attr] { … }：为具有attr属性的元素定义样式。
Ø E[attr=value] { … }：为具有attr属性，且attr属性为value值的元素定义样式。
Ø E[attr~=value] { … }：为具有attr属性，且attr属性的值为以空格隔开的系列值，其中某个值为value的元素定义样式。
Ø E[attr|=value] { … }：为具有attr属性，且attr属性的值为以连字符分隔的系列值，其中第一个值为value的元素定义样式。
Ø E[attr^=value] { … }：为具有attr属性，且attr属性的值为以value开头的字符串的元素定义样式。
Ø E[attr$=value] { … }：为具有attr属性，且attr属性的值为以value结尾的字符串的元素定义样式。
Ø E[attr*=value] { … }：为具有attr属性，且attr属性的值为包含value字符串的元素定义样式。
例如：
<!DOCYTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>属性选择器</title>
<style type="text/css"></style>
<style type="text/css">
div{
width: 300px;
height: 30px;
background-color: #eee;
border: 1px solid black;
padding: 10px;
}
div[id] {
background-color: #aaa;
}
div[id*=bb] {
background-color: #999;
}
div[id^=bb] {
background-color: #555;
}
div[id$=bb] {
background-color: #555;
color: #fff;
}
div[id=bb] {
background-color: #111;
color: #fff;
}
</style>
</head>
<body>
<div>没有任何属性的div</div>
<div id="aabbcc">id属性包含bb字符串的div</div>
<div id="bbccdd">id属性以bb开头的div</div>
<div id="aabb">id属性以bb结尾的div</div>
<div id="bb">id属性为bb的div</div>
</body>
</html>效果：
上面定义的5个属性选择器他们的优先级为依次升高。优先级高的选择器定义的样式会覆盖低优先级选择器定义的样式。
3.ID选择器
Id选择器指定的样式会对具有指定id属性值的元素起作用，其语法格式为：
#idValue { … }
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>id选择器</title>
<style type="text/css">
#xx{
width: 300px;
height: 30px;
border: 2px dotted black;
background-color: #ddd;
padding: 5px;
}
</style>
</head>
<body>
<div id="xx">id属性值为xx的div</div>
</body>
</html>效果：
对指定元素起作用的id选择器
E#idValue { … } /*其中E为有效的HTML元素*/
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>对指定元素起作用的id选择器</title>
<style type="text/css">
div{
width: 300px;
height: 30px;
border: 1px solid red;
background-color: #ddd;
padding: 3px;
}
p#xx{
border: 2px dotted black;
background-color: #777;
}
</style>
</head>
<body>
<div id="xx">id属性值为xx的div</div>
</body>
</html>效果：
PS：貌似该选择器没多大用处，html页面元素id值唯一。
4.Class选择器
语法格式：
[E].className { … } /*E可选，为有效的HTML元素*/
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>class选择器</title>
<style type="text/css">
.xx{
width: 420px;
height: 30px;
background-color: #ddd;
}
div.xx{
border: 2px dotted black;
background-color: #888;
}
</style>
</head>
<body>
<div class="xx">class属性为xx的div元素</div>
<p class="xx">class属性为p的div元素</p>
</body>
</html>效果：
5.包含选择器
包含选择器用于指定目标选择器必须处于某个选择器对应元素的内部。其语法格式如下：
Selector1 Selector2{ … }
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>包含选择器</title>
<style type="text/css">
div{
width: 350px;
height: 60px;
border: 1px dotted black;
background-color: #ddd;
}
div .a{
border: 1px solid red;
background-color: #888;
}
</style>
</head>
<body>
<div><p class="a">处于div之内且class属性为a的p元素</p></div>
<p class="a">没有处于div之内，但class属性为a的p元素</p>
</body>
</html>效果：
6.子选择器
子选择器用于指定目标选择器必须是某个选择器对应元素的子元素。其语法格式如下：
Selector1>Selector2 { … }
子选择器与包含选择器有点相似，它们的区别是：对于子选择器，要求目标选择器对应的元素必须是父选择器对应元素的直接子元素才行；而包含选择器只要求目标选择器对应的元素位于外部选择器对应元素的内部即可。
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>子选择器</title>
<style type="text/css">
div p{
width: 400px;
height: 40px;
border: 2px solid red;
background-color: #eee;
}
div>p{
border:2px dotted black;
background-color: #888;
}
</style>
</head>
<body>
<div><p class="a">class属性为a的p元素，为div的直接子元素</p></div>
<div><section><p class="a">class属性为a的p元素，为处于div内部的元素</p></section></div>
</body>
</html>效果：
由例子可见，子选择器的优先级高于包含选择器。
7.CSS3.0新增的兄弟选择器
其语法格式如下：
Selector1 ~ Slector2 { … }
兄弟选择器定义Selector1选择器对应元素后面、所有能匹配Selector2选择器的元素的样式。
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>css3新增的兄弟选择器</title>
<style type="text/css">
#yy ~ .xx{
background-color: #888;
}
</style>
</head>
<body>
<div>百度</div>
<div class="xx">新浪微博</div>
<div id="yy">腾讯视频</div>
<div class="xx">天龙八部</div>
<p class="xx">笑傲江湖</p>
</body>
</html>效果：
8.伪元素选择器
CSS提供如下几个伪元素选择器：
Ø :first-letter：设置指定对象内的第一个字符的样式。
Ø :first-line：设置指定对象内的第一行内容的样式。
Ø :before：与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。
Ø :after：与内容相关的属性结合使用，用于在指定对象内部的结尾插入内容。
:first-letter和:first-line选择器仅对块元素起作用。如果要对内联元素使用该属性，必须设定对象的height、width属性，或者设置position属性为absolute，或者设置display为block。
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>伪元素选择器</title>
<style type="text/css">
p:first-letter{
color: red;
font-size: 20px;
}
section:first-line{
font-size: 20px;
font-weight: bold;
}
div:before{
content:'我说：“';
}
div:after{
content: "”";
}
</style>
</head>
<body>
<p>we are 图样图森破</p>
<section>我只喜欢你，<br/>懂</section>
<div>今天天气怎么样？</div>
</body>
</html>效果：
9.CSS3.0新增的伪类选择器
Css3.0新增的伪类选择器主要分为如下3类：
Ø 结构性伪类选择器
Ø UI元素状态伪类选择器
Ø 其他伪类选择器
9.1 结构性伪类选择器
结构性伪类选择器指的是根据HTML元素之间的结构关键进行筛选的伪类选择器。可分为如下几个：
Ø Selector:root：匹配文档的根元素。在HTML文档中，根元素永远是<html>元素
Ø Selector:first-child：定义Selector选择器对应元素的父元素的第一个子元素的样式。
Ø Selector:last-child：定义Selector选择器对应元素的父元素的最后一个子元素的样式。
Ø Selector:nth-child(n)：定义Selector选择器对应元素的父元素的第n个子元素的样式。
Ø Selector:nth-last-child(n)：定义Selector选择器对应元素的父元素的倒数第n个子元素的样式。
Ø Selector:only-child：定义Selector选择器对应元素的样式，Selector选择器对应的元素必须是其父元素的唯一子节点元素。
Ø Selector:first-of-type：定义与Selector选择器对应元素同类型、同级的兄弟元素中的第一个元素的样式。
Ø Selector:last-of-type：定义与Selector选择器对应元素同类型、同级的兄弟元素中的最后一个元素的样式。
Ø Selector:nth-of-type(n)：定义与Selector选择器对应元素同类型、同级的兄弟元素中的第n个元素的样式。
Ø Selector:nth-last-of-type(n)：定义与Selector选择器对应元素同类型、同级的兄弟元素中的倒数第n个元素的样式。
Ø Selector:only-of-type：定义Selector选择器对应元素的样式，Selector选择器对应的元素必须是与它同类型、同级的兄弟元素中的唯一一个元素。
Ø Selector:empty：定义Selector选择器对应元素的样式，要求Selector选择器对应元素为内部没有任何子元素（包括文本节点）的元素。
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>结构性伪类选择器</title>
<style type="text/css">
:root{
background-color: #ddd;
}
body{
background-color: #888;
}
li:first-child{
border: 1px solid red;
}
li:last-child{
border: 1px dotted black;
}
li:nth-child(2){
background-color: green;
}
li:nth-last-child(2){
color: #fff;
}
span:only-child{
font-size: 30px;
}
p:first-of-type{
color: red;
}
p:last-of-type{
color: blue;
}
p:nth-of-type(2){
font-weight: bold;
}
p:nth-last-of-type(2){
font-variant: small-caps;
}
span:only-of-type{
font-size: 12px;
}
p:empty{
width: 150px;
height: 30px;
background-color: red;
}
</style>
</head>
<body>
<div>通过:root定义html背景色为<span style="width:50px;background-color: #ddd;height:30px;">#ddd</span></div>
<ul>
<li>童年呵，是梦中的真，是真中的梦，是回忆时含泪的微笑。</li>
<li>童年呵，是梦中的真，是真中的梦，是回忆时含泪的微笑。</li>
<li>童年呵，是梦中的真，是真中的梦，是回忆时含泪的微笑。</li>
<li><span>童年呵</span>，<span>是梦中的真</span>，是真中的梦，是回忆时含泪的微笑。</li>
<li><span>童年呵</span>，是梦中的真，是真中的梦，是回忆时含泪的微笑。</li>
</ul>
<div>
<p>杜鹃花(azalea)</p>
<p>杜鹃花(azale)</p>
<p>杜鹃花(azalea)</p>
<p><span>杜鹃花</span><span>(azalea)</span></p>
<p><span>杜鹃花</span>(azalea)</p>
<p></p>
</div>
</body>
</html>效果：
PS：从以上代码可以看出:only-of-type选择器比:only-child选择器的优先级高，这里读者可以自行测试其他类似选择器的优先级。
对于带参数n的伪类选择器，它们的参数不止可以为n，还可以是odd、even或者xn+y。例如3n+1，则第1、4、7…节点将运用定义的样式。
9.2 UI元素状态伪类选择器
UI元素状态伪类选择器有如下几个：
Ø Selector:link：定义未被访问前的元素的样式。（通常只能是超链接）
Ø Selector:visited：定义已被访问过的元素的样式。（通常只能是超链接）
Ø Selector:active：定义被用户激活状态的元素的样式。（在鼠标点击与释放之间的事件）
Ø Selector:hover：定义处于鼠标悬停状态的元素的样式。
Ø Selector:focus：定义已得到焦点的元素的样式。
Ø Selector:enabled：定义处于可用状态的元素的样式。
Ø Selector:disabled：定义处于不可用状态的元素的样式。
Ø Selector:checked：定义处于选中状态的元素的样式。
Ø Selector:default：定义页面打开时处于选中状态（即使当前没有被选中亦可）的元素的样式
Ø Selector:read-only：定义处于只读状态的元素的样式。
Ø Selector:read-write：定义处于读写状态的元素的样式。
Ø Selector:disabled：定义处于不可用状态的元素的样式。
Ø Selector::selection：定义元素中当前被选中的内容的样式。
在上面这类伪类选择器中，伪类选择器前面的Selector选择器可以省略。
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" ontent="no-cache">
<meta http-equiv="expires" content="0">
<title>UI元素状态伪类选择器</title>
<style type="text/css">
a:link{
color: red;
text-decoration: none;
}
a:hover{
color: grey;
text-decoration: underline;
}
a:visited{
color: black;
}
:disabled{
font-size: 19px;
}
:enabled{
font-weight: bold;
font-size: 19px;
}
:checked{
outline: red solid 1px;
}
:default{
outline: red solid 3px;
}
:focus{
text-decoration: underline;
}
:read-only{
background-color: #eee;
}
:-moz-read-only{
background-color: #eee;
}
:read-write{
background-color: #8e8
}
:-moz-read-write{
background-color: #8e8
}
button:active{
background-color: blue;
}
::-moz-selection{
color: red;
background-color: blue;
}
</style>
</head>
<body>
<ol>
<li><a href="http://www.baidu.com/" target="_blank">百度一下</a></li>
<li><button disabled>不可用按钮</button></li>
<li><button>可用按钮</button></li>
<li>男<input type="radio" value="male" name="sex"/>女<input type="radio" value="female" name="sex"/>未知<input type="radio" value="unknown" name="sex"/></li>
<li>
<input type="text" readonly value="只读文本">
<input type="text" value="可读写文本">
</li>
</ol>
</body>
</html>效果：
9.3 其他伪类选择器
CSS3.0还新增了两个特殊的伪类选择器：
Ø Selector:target：设置命名锚点目标元素的样式
Ø Selector1:not(Selector2)：设置Selector1选择器对应元素的样式，但排除Selector2选择器对应的元素。
例如：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>:target和:not伪类选择器</title>
<style type="text/css">
:target{
background-color: #ff0;
}
div{
width: 400px;
height: 50px;
margin-top: 10px;
border: 1px solid black;
}
div:not(#ai){
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li><a href="#chibang">隐形的翅膀</a></li>
<li><a href="#fangxia">放下</a></li>
<li><a href="#ai">爱一点</a></li>
<li><a href="#zhaogu">照顾自己</a></li>
<li><a href="#tong">爱与痛的边缘</a></li>
</ul>
<div id="chibang">
我终于翱翔用心凝望不害怕
</div>
<div id="fangxia">
我爱你爱让我放下
</div>
<div id="ai">
天上的月露出半支角
</div>
<div id="zhaogu">
你的呼吸一高一低
</div>
<div id="tong">
你吻过我的脸是千百遍
</div>
</body>
</html>效果：
That's all，thanks for read！
来源：oschina
链接：https://my.oschina.net/u/942785/blog/189246