2.1.3 属性选择符
用属性选择符给带有title属性的abbr元素添加不同的样式
abbr[title]{
boder-bottom: 1px dotted #999
}
abbr[title]: hover{
cursor:help;
}
所有type属性为submit的imput的元素在鼠标指针悬停时,都会显式一个手光标
imput[type : "submit"]{
cursor : pointer;
}
2.1.4 伪元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.chapter::before{
content: '"';
font-size: 15em;
}
.chapter p::first-letter{
float: left;
font-size: 3em;
font-family: Georgia, 'Times New Roman', Times, serif;
}
.chapter p::first-line{
font-family: Georgia, 'Times New Roman', Times, serif;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>A Study In Scarlet</h1>
<section class="chapter"><p>he guinea pig festival in Peru is a one day event to celebrate these cute local animals.
The festival included a fashon show where animals are dressed up in various amusing costumes.</p></section>
</body>
</html>
2.1.6 结构化伪类
nth-child选择符,可以用来交替的为表格表格应用样式:下面的例子会将表格的奇数行的背景变成黄色。
tr:nth-child(ood){
backound-color
}
nth选择符可以接受很多不同的表达式来作为参数,可以接受odd(奇数)和even(偶数)作为参数,这个参数还可以是数值。
2.2 层叠
一般来说,作者定义的样式是最优先的,为了给用户更高的优先权,Css允许用户使用!important覆盖任何规则。
p{
font-size:1em !important
color:#666 !important
层叠的重要性级别重高到低如下:
标注为!important的用户样式
标注为!important的作者样式
作者样式
用户样式
浏览器的默认样式
2.3.1 利用层叠次序
如果两个规则的优先性相同,则优先使用后定义的规则。要是把a:visited放在hover后面,那么在访问完该链接以后,悬浮样式将不会再起作用。因为已经被visited给覆盖了。正确的次序应该是a:link, a:visited a:hover a:focus a:avtive.