简单选择器
权重：标签 <class属性<id属性
<div class="container"> <div class="item" id="first">1</div> <div class="item">2</div> <div class="item" title="php">3</div> <div class="item">4</div> <div class="item center">5</div> <div class="item" title="hello">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>
<style>
/* 使用九宫格演示简单选择器 */
/* 类选择器：选择一类元素，也属于属性选择器的一种，对应元素中的class */
.container {
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
/* 类选择器 */
.item {
font-size: 2rem;
background-color: lightskyblue;
display: flex;
justify-content: center;
align-items: center;
}
/* 元素选择器 */
body {
background-color: lightcyan;
}
/* 多个类选择器 */
.item.center {
background-color: lightgreen;
}
/* id选择器 */
#first {
background-color: lime;
}
/* id,class可以添加到任何元素，前面的元素限定符默认就是*，所以可以省略 */
div#first {
background-color: lime;
}
/* 类选择器，class 权重大于 标签 */
.item#first {
background-color: lightpink;
}
/* id的权重大于class */
#first.item {
background-color: violet;
}
/* 标签 < class属性 < id属性 */
/* 属性选择器 */
.item[title="php"] {
background-color: lightcoral;
}
*#first,
.item.center,
.item[title="hello"] {
background-color: black;
}
</style>2.上下文选择器
后代选择器：选择当前元素的所有后代元素
父子选择器：只选择当前元素的子元素
同邻相邻选择器：拥有共同父级的相邻元素
通邻所有选择器：拥有共同父级的所有元素
<style>
/* 后代选择器 所有子代的div都受影响*/
/* .container div {
border: 1px solid coral;
} */
/* 父子选择器 只有外层的div受影响*/
/* body > div {
border: 3px solid green;
} */
/* 使用后代选择器模拟父子选择器 */
body div.container {
border: 3px solid green;
}
/* 同级相邻选择器 */
/* 选择与第五个相邻的，即后面的一个元素 */
/* .item.center + .item {
background-color: lightgreen;
} */
/* 同级所有选择器 */
/* 选择与第五个后面的，有共同父级的所有兄弟元素 */
.item.center ~ .item {
background-color: lightgreen;
}
</style>3.伪类
3.1不分组匹配
first-child：匹配第一个子元素
last-child：匹配最后一个子元素
nth-child（n）:匹配第n个位置的子元素
nth-last-child(n):匹配倒数第n个位置的子元素
<style>
/* 使用九宫格演示简单选择器 */
/* body,第一个单元格都变了 */
/* 为了防止递归，应该在具体父元素上调用伪类 */
/* :nth-child(1) --- :first-child */
div > .item:first-child {
/* background-color: wheat; */
}
/* 匹配最后一个 */
.container > :last-child {
/* background-color: lightpink; */
}
/* 匹配任何一个 */
/* 索引从1开始计算 */
.container > :nth-child(3) {
/* background-color: lightgreen; */
}
/* :nth-child(n) n:n支持表达式 */
/* 当n在表达式中的时，从0开始的 */
.container > :nth-child(2n) {
/* background-color: magenta; */
}
/* even:代表偶数 */
.container > :nth-child(even) {
/* background-color: magenta; */
}
/* 选择奇数 */
.container > :nth-child(2n-1) {
/* background-color: lightsalmon; */
}
/* even:代表偶数 */
.container > :nth-child(odd) {
/* background-color: lightsalmon; */
}
/* 只选择前三个 */
/* n:从0开始 */
.container > :nth-child(-n + 3) {
/* background-color: lightgreen; */
}
/* 选择倒数第二个 */
.container > :nth-last-child(2) {
/* background-color: lime; */
}
/* 从第四个开始，选择剩下的所有元素 */
.container > :nth-child(n + 4) {
background-color: lightgray;
}
</style>3.2分组匹配
first-of-type：匹配按类型分组的第一个子元素
last-of-type：匹配按类型分组的最后一个子元素
nth-of-type（n）:匹配按类型分组的第n个位置的子元素
nth-last-of-type(n):匹配按类型分组的倒数第n个位置的子元素
<style>
.container span:first-of-type {
background-color: violet;
}
.container span:last-of-type {
background-color: violet;
}
/* span分组的前三个 */
.container span:nth-of-type(-n+3) {
background-color: gray;
}
.container span:nth-last-of-type(-n + 2) {
background-color: coral;
}
</style>4.表单状态选择器
<style>
:root {
background-color: lightgreen;
}
input:enabled {
background-color: blanchedalmond;
}
input:disabled {
background-color: lightgreen;
}
input:required {
background-color: yellow;
}
input:hover {
background-color: red;
}
:link {
background-color: royalblue;
}
:visited {
background-color: slateblue;
}
</style>总结：今天主要学习的是选择器知识，后面我们使用css改变html样式几乎都是用选择器来处理，。简单选择器和上下文选择器还好，理解起来比较容易。到了伪类选择器可能理解起来相对难，这块在后期的学习以及操作中要多练习，伪类选择器选择元素非常方便这点是其他选择器都没法比的。最后学了点表单状态选择器，这个在以后表单注册登录中应该会用的比较多，比如注册是没有输密码就可以使用这个来提示用户。
