慕课网笔记3 : css 选择器 继承
- CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
- 使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等
- css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
屏幕快照 2017-01-17 下午11.15.07.png
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔
- 从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
- **内联式 **: 把css代码直接写在现有的HTML标签中
<p style="color:red">这里文字是红色。</p>
- 嵌入式: 嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间.
<style type="text/css">
span{
color:red;
}
</style>
-
外部式 : 写在单独的文件中
.css为扩展名
在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，
<link href="main.css" rel="stylesheet" type="text/css" />
注意：
- css样式文件名称以有意义的英文字母命名，如 main.css。
- rel="stylesheet" type="text/css" 是固定写法不可修改。
- <link>标签位置一般写在<head>标签之内。
<pre>
优先级 : 当遇到同名样式时
1. link链接的css文件权值相同 是下面的覆盖上面的. <em>ps: 权值在下面继承中解释</em>
2. 离html元素近的 样式覆盖远的
</pre>
一、 css选择器
每一条css样式声明（定义）由两部分组成
div {
background-color: red;
font-size: 16px;
}
选择器 {
样式;
}
/*------------------------------------------------------------------*/
> 1. 在{}之前的部分就是“选择器”
> 2. “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
> 3. 标签选择器其实就是html代码中的标签
- <h5> 类选择器</h5>
.class {
css样式代码;
}
- <h5>ID选择器</h5>
#stress{
color:red;
}
类 和 ID 选择器的区别
- 相同点：可以应用于任何元素
- 不同点：
- 在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
- 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
例 ：
<span class="stress bigsize">
// 类可以对同一个原素使用多个样式
//ID不可以这样使用
-
<h5> 子选择器</h5>
用于选择指定标签元素的 第一代子元素
.food> li {
border:1px solid red;
}
/*在类选择器后面用">" 指向子选择器 */
- <h5>包含(后代)选择器</h5>
用于选择指定标签元素下的后辈元素
.first span {
color:red;
}
包含(后代)选择器 与 子选择器 的区别
-
子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。
-
后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
-
总结：
>作用于元素的第一代后代，空格作用于元素的所有后代。 -
<h5>通用选择器</h5>
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
* {
color:red;
}
/*代码使用html中任意标签元素字体颜色全部设置为红色*/
- <h5>伪类选择符</h5>
伪类选择符: 它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a: hover {
color:red;
}
关于伪选择符：
关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是< a> 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
- <h5>分组选择符</h5>
为html中多个标签元素设置同一个样式
h1, h2, h3, span {
color : red;
}
.first,
#second> span{
color:green;
}
二、继承
-
权值：
浏览器是根据权值来判断使用哪种css样式的，那种权值高的就使用哪种css样式
权值的规则：
- 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
- 注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
p {
color:red;
} /*权值为1*/
p span{
color:green;
} /*权值为1+1=2*/
.warning {
color:white;
} /*权值为10*/
p span.warning {
color:purple;
} /*权值为1+1+10=12*/
#footer .note p {
color:yellow;
} /*权值为100+10+1=111*/
-
层叠：
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用 (后面的样式覆盖前面的)
p {color:red;}
p {color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
/*最后将显示字体颜色为绿色*/
当到html文件中的样式优先级让然为：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
ps：!important优先级样式是个例外，权值高于用户自己设置的样式。
-
<big>!important;</big>
将当前样式设置为最高权值
p {
color:red!important;
}
/*注意：!important要写在分号的前面*/
注意：
！important要慎重使用， 能不用就不用。以避免使用过多，代码不好控制。
