1.选择器

标签选择器

以HTML标签为选择器，例如：

<head>
...
<style>
    p{color:bule;}
    h1{font-size:30px;}
</style>
</head>

类选择器（大小写敏感）

为HTML添加class属性，

在标签中加入class属性，在样式表中写为.class{color:red;}

<head>
<style>
    .N1{color:bule;}
</style>
</head>

<body>
...
    <p class="N1"> 内容 </p>
</body>

ID选择器（大小写敏感）

为HTML添加ID属性，

在标签中加入ID属性，在样式表中写为#p1{color:red;}

<head>
<style>
    #N1{color:bule;}
</style>
</head>

<body>
...
    <p id="N1"> 内容 </p>
</body>

群组选择器

p,h1,h2,h3{color:bule;}

全局选择器

所有标签设置样式：

*{
   color:gray;
   ...
}

后代选择器

选择body中CSS规则时，之间用空格隔开，例如：p em{color:pink;}

链接伪类

链接的四种状态（不仅限于链接，也可用于文字）：

激活状态:link
已访问状态:visited
未访问状态（伪类）hover
鼠标悬停状态（伪类）:active

例如：

<head>
<style>
    a:link{color:bule}
    a:visited{color:gray}
    a:hover{color:orange}
    a:active{color:green}
</style>
</head>

<body>
    <a href="http://www.imooc.com" target="_blank">CSS</a>
</body>

链接伪类顺序

:link>:visited>:hover>:active

a:hover仅置于a:link与a:visited之后有效
a:active仅置于a:hover之后有效
大小写不敏感

注：IE6不支持其他元素的:hover和:active

2. 选择器的优先级

!important为最高等级

例如： p{color:yellow; !important}

样式表中的优先级

行内样式（权重1000）>ID选择器（权重为100）>class选择器（权重为10）>标签选择器（权重为1）>通配符（权重为0）

例如：#main div .warning h1{color:bule}

#mainID选择器，.warning类选择器，div h1标签选择器，则其权重为100+10+2=112

注：外部样式表和各类选择器之间，权值相同时，遵循就近原则。

3.继承

<head>
<style>
    p{color:bule;}
</style>
</head>

<body>
...
    <p><em>CSS</em>规则</p>
</body>

为的父元素， 为的子元素。

其中将标签内的“CSS规则”改为蓝色，而标签内的“CSS”也成为蓝色。

设置父元素的样式，而子元素进行继承。

而继承具有局部性。

例如，在将父元素设置边框时，子元素不进行继承。

总结