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。