CSS 入门学习篇 - 2

IMOOC 学习笔记
选择器的种类：
(1)标签选择器：HTML中的标签作为选择器。

p{
  font-size:12px;
  height:1.6em;
}

(2)类选择器：类选择器在css样式编码中是最常用到的。
语法：
.类选器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（不要起中文）

.name{
     color:green;
}

(3)ID选择器：跟类选择器类似，区别：
1、为标签设置id=”ID名称”，而不是class=”类名称”。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）

#nav{
     font-size:12px;
}

ID选择器与类选择器的区别：
相同：可以应用于任何元素
不同：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<h2 class="stress bigsize">开学了</h2>

---

子选择器：大于符号(>),用于选择指定标签元素的第一代子元素。

.food>li{border:1px solid red;}

包含（后代）选择器：即加入空格,用于选择指定标签元素下的后辈元素。

.food li{border:1px solid red;}

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用原则器：使用一个（*）号指定，它的作用是匹配html中所有标签元素。

* {font-size:20px;}

伪类选择符：允许给html不存在的标签（标签的某种状态）设置样式。

a:hover{color:red;font-size:15px;}

分组选择符：为html中多个标签元素设置同一个样式。

h1,span{color:red;}