一分钟了解HTML 与 CSS（乐字节，乐字节java，乐字节架构）4

HTML 与 CSS（4）

主要内容

如果你想成为一名优秀的java架构师，看这里 → 乐字节免费公开课（腾讯课堂）
如需要跟多资料请点击右侧 → 这是一条不归路，有秃头风险，请慎重选择！

CSS选择器

​ 在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

​ CSS选择器有很多，掌握常用的即可；

基本选择器

通用选择器

选择所有 *

* {
    ......
}

* {
	color: orange;
}

元素选择器

选择指定标签

元素名称 {
    ......
}

p {
	color: red;
	font-size: 20px;
}

ID选择器

选择设置过指定id属性值的元素 #

#id属性值 {
    ......
}

#p1 {
	font-weight: bold;
}

类选择器

选择设置过指定class属性值的元素 .

.class属性值 {
    ......
}

.hidden {
	display: none;
}

分组选择器

​ 当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔

选择器1,选择器2,... {
    ......
}

h2 , #pre1 {
	color: orange;
	font-style: italic;
}

​ CSS样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高

​ 元素选择器：1

​ 类选择器：10

​ id选择器：100

​ 内联样式：1000

组合选择器

​ CSS组合选择器说明了两个选择器直接的关系。 CSS组合选择符包括各种简单选择符的组合方式。

​ 在 CSS 中包含了四种组合方式: 后代选取器(以空格分隔)，子元素选择器(以大于号分隔），相邻兄弟选择器（以加号分隔），普通兄弟选择器（以波浪线分隔）。

后代选择器（派生选择器）

​ 用于选择指定标签元素下的后辈元素，以空格分隔

选择器1 选择器2 {
    ......
}

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

<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

子元素选择器

​ 用于选择指定标签元素的所有第一代子元素，以大于号分隔

选择器1 + 选择器2 {
    ......
}

#d + div {
	border: 1px solid red;
}

html代码同上

相邻兄弟选择器

​ 可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔

选择器1 + 选择器2 {
    ......
}

#d + div {
	border: 1px solid red;
}

<div id="d">
    相邻兄弟选择器1
    <ul>
        <li>开心麻花</li>
        <li>贾玲</li>
        <li>宋小宝</li>
    </ul>
</div>
<div>
    相邻兄弟选择器2
</div>

普通兄弟选择器

​ 选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

选择器1 ~ 选择器2 {
    ......
}

li ~ li {
	background-color : yellow;
}

<div>
    普通兄弟选择器1
    <ul>
        <li>开心麻花</li>
        <li>贾玲</li>
        <li>宋小宝</li>
        <li>沈腾</li>
        <li>王宁</li>
    </ul>
</div>

li ~ li {
	background-color : yellow;
}

<div>
    普通兄弟选择器1
    <ul>
        <li>开心麻花</li>
        <li>贾玲</li>
        <li>宋小宝</li>
        <li>沈腾</li>
        <li>王宁</li>
    </ul>
</div>