CSS学习（1）选择器

浏览数：32 / 时间：2015年06月09日

使用CSS

1，CSS是层叠样式表（Cascading Style Sheet），由选择器和声明块两部分构成。如下前部分h1是选择器，花括号包围的块是声明块。

h1 {
    color: red;
}

2，CSS使用主要分为外部样式表，嵌入样式表，和内联样式表。

/*外部样式表*/
<link rel="stylesheet" href="base.css">
/*嵌入样式表*/
<style>
    h1 {
        color: red;
    }
</style>
/*内联样式表*/
<h1 style="color: red">内联样式表</h1>

3，选择器用来确定样式表要应用到哪些元素中。可用的选择器类别有五种：元素名称、类别、伪类、属性、ID

（1）在优先级上，ID的优先级是最高的，元素名称最低，类别和属性是一样的。

（2）选择器可以混合使用。混合后的选择器优先级从右边往左开始计算。比如 h1.very要比 .very h1的优先级高，所以同时满足两者的元素会优先使用h1.very的样式。如果优先级相同则使用后出现的样式

（3）混合使用选择器：

　　a,元素名称：与同类选择器组合，以空格隔开表示父子元素关系；以逗号隔开表示等同关系

　　b,类别用点号+类名

　　c,伪类使用冒号+伪类名

　　d,属性使用[name="value"]属性值不填时[name]表示不限制属性值，可用的匹配模式有 =, ~=, |=, *=, ^=, $=

　　e,ID用#id

h1,h2 { } /*h1,h2元素*/
h1 h2 { } /*h1的所有h2子元素*/
h1 > h2 { } /*h1的直接h2子元素*/
h1 + h2 { } /*h1后面的相邻的同父元素的h2元素 */
h1 ~ h2 { } /*h1后面的同父元素h2元素*/
h1.very h2[lang|="zh"]:first-letter { }