伪类
| 类名 | 说明 |
|---|---|
| :link | 未访问过的链接 |
| :visited | 访问过的连接 |
| :hover | 鼠标悬停的元素 |
| :focus | 获取焦点的元素 |
| :active | 激活的元素（例如一个被单击的链接元素） |
| :first-child | 作为其它元素第一个子元素的元素 |
| :lang() | 根据元素的lang属性确定的元素 |
CSS3
| 类名 | 说明 |
|---|---|
| :target | 当通过锚点跳转到页面指定位置时，调用该样式突出显示 |
| :root | |
| :nth-child() | |
| :nth-of-type() | |
| :nth-last-of-type() | |
| :first-of-type | |
| :last-of-type | |
| :only-of-type | |
| :only-child | |
| :last-child | |
| :empty | |
| :not() | |
| :enabled | |
| :disabled | |
| :checked |
伪元素
| 元素名 | 说明 |
|---|---|
| ::first-line | |
| ::first-letter | |
| ::before | |
| ::after |
区别：影响文档的方式不同，伪类的表现有点像给文档添加类，而伪元素的效果就好像有元素被插入到了文档中。
特殊性
问题
ui li {font-style:normal;}
html li {font-style:italic;}
此时他们当中的哪个属性会『赢』，被应用呢？
特殊性是一个选择器『特殊程度』的数字表示。
确定选择器的特殊性的三样东西
- 每个元素描述符贡献0,0,0,1
- div ul ul li 0,0,0,4
- 每个类、伪类或者属性描述符贡献0,0,1,0
- div.aside ul li 0,0,1,3
- a:hover 0,0,1,1
- div.navlinks a:hover 0,0,2,2
- 每个ID描述符贡献0,1,0,0
- #title em 0,1,0,1
- h1 #title em 0,1,0,2
- 行内样式 1,0,0,0
- <div id="header" style="background:blue;"></div>
现在回顾下刚才的问题，他们的特殊性都为0,0,0,2，是一样的。此时，后写的赢，被应用。（即文字会变为斜体）
重要性
利用重要性可以忽略特殊性，关键字 !important
DEMO
<style type="text/css">
div#gohome a#home {color:red;}
div a {color:green !important;}
</style>
<div id="gohome"><a id="home" href="/">Home</a></div>
此时，文字是绿色的。
【注意】
当不同的css属性都声明了!important关键字时，就需要按照前面提到的优先级方式去选择了。所以，平时写代码时，并不鼓励使用此关键字。因为当一处修改后，会发现还有其它地方也需要修改。不久，通篇都是!important关键字了。
省略简写属性值的关键字
Demo1
strong{
font:blod italic small-caps medium/1.2 Verdana, sans-serif;
}
当省略了部分简写属性值的时候，却是的部分就会使用该属性的默认值。
Demo2
// 全站样式表
body {
background:#FCC url(/i/bg.gif) 10px 25% no-repeat fixed;
}
// 某页面的嵌入样式表
body {
background:url(/i/bg2.gif);
}
此时该页面的样式相当于(因为省略的部分用默认的值代替了)
body{
background: transparent url(/i/bg2.gif) 0 0 repeat scroll;
}
那么，如果我们想要复用全站样式表，只单纯的改变其中的背景图片怎么办呢？此时，只需要改变其中的特定属性就好了
body {
background-image:url(/i/bg2.gif);
}
【 注意】
大部分简写属性的工作方式是这样的，部分属性除外，例如，margin padding border-style border-width border-color等，当省略这些值时，会从已给出的值中复制一份。
技巧：选择性的覆盖简写属性
Demo1 实现一个3px的点线边框，除了左边的线框是红色的之外，其它的都是黑色的。
div {
border:3px dotted black;
border-left-color:red; // 选择性的覆盖左侧的属性
}
通用选择
Demo1 选择div1下的全部元素
div1 *{
...
}
【注意】
通用选择器的特殊性贡献值为0,0,0,0
id与class共用
<style>
.panel{
// 用class做通用样式
border:1px solid silver;
background: #EEE top left no-repeat;
color:#333;
font:x-small sans-serif;
}
// 用id做个别样式
#weather{
background-image:url(/pix/panel-weather.jpg);
}
#stocks{
background-image:url(/pix/panel-stocks.jpg);
}
#latest{
background-image:url(/pix/panel-latest.jpg);
}
//另一种写法
.panel#weather{font-weight:bold;}
#latest.panel{color:#511;}
</style>
<body>
<div class="pane1" id="weather"></div>
<div class="pane1" id="stocks"></div>
<div class="pane1" id="latest"></div>
</body>
多类
<style type="text/css">
.panel{
...通用属性
}
.weather{
background-image:url(/pix/panel-weather.jpg);
}
.stocks{...}
.latest{...}
.panel.weather{
font-weight:bold;
}
.latest.panel{
color:#511;
}
</style>
<body>
<div class="panel weather"/>
<div class="panel sockes"/>
<div class="panel latest"/>
</body>
【注意】
IE6及早期版本不支持多类写法，尽管依然支持多类的写法，但是在.panel.weather在IE6中知会是别成.weather
简单的属性选择
属性选择器是CSS2中引入的，并在CSS3中得到了扩展。其最基本的思路就是可以通过元素已有的属性选择元素。或者基于元素属性值的某个方面进行选择。
demo
a[href]{
// 选择所有具有href属性的a元素。这样的话，就可以过滤调锚点<a name="top">
}
a[href="https://objectBoy.github.io"]{
// 筛选某个链接指向的a标签，像这样的精确匹配，使用时，就像ID差不多，需要确定那个属性值是不变的，不然..会 // 很尴尬
}
类的属性选择
div[class~="panel"]
~ 号的作用：改属性选择器会选择以空格分隔的类名列表中包含该词的元素。如果去掉后(class=panel)则只能选择class属性为panel的div元素。如果某个div的class属性为panel weather就不行了。
div[class~="panel"] === div.panel
demo
img[alt~="figure"]{}
table[summary~="data"]{}
*[title~="2009"]{}
【注意】
属性选择器的特殊贡献值为0,0,1,0
demo
p#lead-in{font-weight:bold;} //0,1,0,1
p[id="lead-in"]{ //0,0,1,1
font-weight:normal;
font-style:italic;
}
//结果是加粗的斜体
部分属性值选择
a[href*="w3.org"]{font-weight:bold;} //选择所有href中包含w3.org的a标签
a[href^="http"]{} //所有以http开头的元素
a[href$=".pdf"]{} //以.pdf结尾的元素
选择后代元素
ol > li {list-style-type:upper-alpha;}
>限定了只能选择有序列表的子元素，如果把它去掉的话，改style则会作用在有序列表后代的任何列表项上，包括嵌套的列表项。
兄弟选择器
h2{margin-bottom:0;}
h2 + p {
// 任何紧跟在h2标签**后面**的段落元素取消边距
margin-top:0;
}
h1 ~ ul {
// 选择后续的兄弟元素，但不包括紧邻的兄弟元素
list-style-type:lower-alpha;
}
生成内容
通过伪元素:before :after以及它们的content属性，实现css生成内容并将其插入到文档中的方法
demo 在所有的li元素前加入"Item："有下划线的字段
li:before{
content:"Item: ";
border-bottom:1px solid gray;
}
【注意】
content只能加入纯文本，而不能加入dom结构标签
content可以插入浏览器支持的字符或图像字符，需要知道它们的十六进制字符编码，并且在前面加一个反斜杠li:before{content:"\BB";}
demo 在文章中被<a>标签涵括的元素后，显示链接地址
a[href]:after{content:"["attr(href)"]";font-size:smaller;"}
网友评论