CSS笔记（CSS简介，选择器，层叠抉择）

CSS指的是层叠式样式表（cascading style sheet），就像超文本标记语言一样，在字面上理解CSS，它就是一个管HTML样式的，而“层叠式”的意思是：一个元素的样式可以有多个(可以继承父类元素)，当进行抉择定义样式时，就得通过特定性数以及规则顺序来决定了。

注：

• CSS包含的一些简单语句称为规则
• 有些CSS属性是无法被继承的，如边框
• 同样的，这里有个检验网站用于检验编写的CSS文件是否正确

1 选择器

CSS允许你指定各种选择器来确定将样式应用到哪些元素上，以下举出几种选择：

1.1 元素选择器

p {    color:yellow;}

1.2 筛选选择器

筛选选择器如.classname_a.classname_b，能具体表明想要定义的部分，注意.classname_a 与 .classname_b是在同一阶层

elementname.classname {    color:yellow;}

1.3 ID选择器

由于ID就只有一个，所以IDname并不需要添加元素前缀，不过需要添加#号

#IDname {    color:yellow;}

1.4 综合选择器

使用,号连接表示叠加关系

#IDname,h1,classname {    color:yellow}

1.5 子孙选择器

用空格连接表示继承关系

classname p {    color:yellow}/* 如上表示选取的是：选取classname类内的所有p元素(段落) */

而当想要选择的是“只隔一代”的元素（如只想要classname类下直属的段落，而不想要classname类中“classname2”类的段落），就可以使用>符号

classname>p {    color:yellow}

注意与筛选选择器的区别，类名与类名之间是否有空格

1.6 兄弟选择器

使用+号选择两个相邻兄弟（注意是相邻而不是父子）中的第二个元素

h1+p {    color:yellow;}/* 表示只会选择所有紧跟h1元素的p元素(段落) */

1.7 属性选择器

属性选择器又分为根据具体属性选择和根据部分属性选择。

1.7.1 具体属性选择器

元素后跟中括号，这种格式要求必须与属性值完全匹配。

img[width="300"] {    border:red thin solid;}/* 表示只会选择所有width属性为300的图像 */

1.7.2 部分属性选择器

假如你希望对指向豆瓣的位置的所有链接应用样式，可以不指定类，直接使用部分属性选择器：

a[href*="douban"] {    font-weight:bold;    }

如同具体属性选择器的用法一样，但只需加上*符号就可以表示所有属性值包含douban 字符串的元素。

1.8 伪类选择器

伪类选择器与筛选选择器常常一并使用

伪类选择器可分为动态伪类和静态伪类，使用动态伪类时要注意不要改变页面布局（即类如改变字体大小）
伪类可以单独地为各个状态指定样式，最常见的：

• a:link 对应未访问的链接
• a:visited 对应已访问的链接
• a:hover 对应悬停状态（动态）
• a:active 输入激活，如鼠标点击瞬间（动态）
• input:focus 输入焦点（动态）

a:link {    color:green;}a:visited {    color:red;}a:hover {    color:yellow;}

另外此处还有一个nth-child伪类，对于p:nth-child(even)伪类来说，nth-child(even) 是用来限定<p> 元素的，比方说我要选择偶数段落，让它们有一个红色背景，而奇数段落为绿色背景：

div p:nth-child(even) {    background-color:red;}   div p.nth-child(odd) {    background-color:green}/* 也可以这么写 */div p:nth-child(2n) {    background-color:red;}div p:nth-child(2n+1) {    background-color:green;}

也可以使用伪类:first-child和伪类:last-child，使用这两个伪类最常犯的错误是：认为p:first-child之类的选择器会选择<p>元素的第一个子类，其实并不是，其含义是：选择某个元素中的第一个子类，且该子类需为<p>元素
同样的，伪类也是可以结合使用的，如要创建一个被访问过的链接在鼠标悬浮时，要显示红色，这是可以结合伪类：

a:visited:hover{    color:red;}

1.9 伪元素选择器

伪元素使用方法与伪类差不多，伪元素可以用来选择元素的某些部分，这些部分不方便包围在<div>或<span>中，比如first-letter 对应的是文本的第一个字母，first-line 对应的是文本的第一行

p:first-letter {    font-size:3em;}p:first-line {    font-style:italic；}/* 第一行设为斜体 */

注：/* ... */是CSS的注释，注释可以跨行

---

2 层叠抉择

很多时候在制作样式表时，会对一个元素进行多次的定义，那么最后该元素究竟会依据哪一个规则来进行样式定义呢？

2.1 特定性数

在排完作者，浏览器，读者的样式表取决顺序规则后，这里就要引入特定性数了，比方说：
选择器包含id属性，特定性数为1,0,0
选择器包含类或伪类或类属性值，特定性数为0,1,0
选择器包含元素名，特定性数为0,0,1
特定性数可以叠加，最后特定性数越大，规则越特定，如h1.greentea的特定性数为：0,1,1（注意这里包含元素名），#elixirs h1的特定性数为：1,0,1。

注：

• 特定性数为：0,1,0 比特定性数为：0,0,13 的更优先
• #seiei 的特定性数为1,0,0 ，而p[id="seiei"]的特定性数为0,1,1
• 如果有内联样式声明，就必须遵循内联样式声明，当然假如CSS样式文件中CSS属性值定义了！important，那么该属性值优先

2.3 样式表顺序

对于有相同特定性的元素，就需要依据样式表中的顺序再次进行排序了。而规则在CSS文件中位置越底，优先级就会越高，如果HTML还引入多个样式表链接，那就还要按照链接的插入顺序进行排序了。