HTML&CSS高级05-07（选择器）

HTML&CSS高级05

选择器含义
用来选择元素的
种类
元素选择器、类选择器、id选择器、群组选择器、后代选择器、子元素选择器（最常用的选择器）……

元素选择器
举例：

body{
    text-align: center;
    padding: 0;
    margin: 0
}

类选择器

.right{
    width: 600px;
}

right是在html里规定的：

section class="right">这是右边</section>

ID选择器

#p1{
    font-size: 20px;
    color: orange;
}

ID值也是HTML里规定的，且为唯一：

<p id="p1">我是一个段落</p>

通用选择器
用来规定网页上所有元素的样式：

*{
    font-size: 14px;
}

---

HTML&CSS高级06（派生选择器）
群组选择器
有多个选择器下有相同的属性时，可以写成一个群组选择器。
比如：
header和section有一样的边框属性，就可以写成如下代码，精简，好维护。

header,section{
    border: 1px solid #ccc;
}

后代选择器
“.right > header”这个的意思是类选择器right的直接子元素header元素。

.right > header{
    border: none;
    border-bottom: 1px solid  #ccc;
}
.right > section{
    height: auto;
    border:none;
}

HTML：

    <section class="right">
        <header>这是右边</header>
        <section>这是右边的内容区域</section>
    </section>

选择器的优先级
选择器是有优先级的。当代码里有两个选择器定义了不同的样式，但是添加给了同一个元素，浏览器需要知道该渲染哪一个。
优先级排序：
内联 > id > 类 > 标签(元素选择器) > 伪类 > 通配符(通用选择器)

---

HTML&CSS高级07
伪类选择器
伪类，你可以理解为伪造的类，用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

“:hover”伪类
当鼠标停留时运用这个样式：
CSS:

.div-square{
    width: 200px;
    height: 200px;
    background-color: #06f;
    color: #fff;
}
.div-square:hover{
    background-color: #f60;
}

HTML：

    <div class="div-square">这是一个正方形的div</div>

“:active”伪类
大概鼠标按下时运用这个样式：

“:last-child”
这个伪类的作用就是指向当前选择器选中的元素组的最后一个。

.list{
    width: 200px;
    list-style: none;
    border:1px solid #ccc;
    padding: 0;
}
.list li{
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.list li:last-child{
    border:none;
}

HTML：

<ul class="list">
        <li>01.javascrpt</li>
        <li>02.python</li>
        <li>03.java</li>
        <li>04.C语言</li>
        <li>05.android</li>
    </ul>
</body>

“:first-child”
这个伪类的作用就是指向当前选择器选中的元素组的第一个。

伪元素
伪元素我们也可以说是伪造的元素，伪元素可以显示在页面中，但在dom树中却没有。也可以说它是通过css创建的元素，而不是通过html创建的。

.div-square:before{
    content: "编程语言排名";
    display: block;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

显示为：在div-square这个元素前加上新元素。

有before，自然也有after。