1.0 结构伪类选择器
1.1 : first-child
选取当下选择器下的第一个元素
我们以div中的p标签为例，先找到div中的第一个儿子，然后去匹配是否为p标签，如果是，则应用颜色，否则不应用
需求： 将div中的第一个p标签设置为红色
<style>
div > p:first-child {
color: red;
}
div > span:first-child {
color: red;
}
</style>
</head>
<body>
<div>
<span>123</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<p>和div平级的p标签</p>
</body>
1.2 : last-child
nth-child在选择子元素的时候，规则与first-child和last-child一致
选取当前选择器下的最后一个元素
了解即可: 规则于first-child一致，只
不过是查找的最后一个元素
<style>
div > p:last-child {
color: red;
}
</style>
</head>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<span>123</span>
</div>
</body>
1.3 :nth-child(n)
- n 的意思是说：选择第几个的意思
div > p:nth-child(3) {
color: red;
}
- 2n 或者 even : 选择偶数
div >p:nth-child(even) {
color: red;
}
- 2n + 1或者 odd : 选择奇数
div >p:nth-child(even) {
color: red;
}
- -n + 3 ：选择前三个
div >p:nth-child(-n + 3){
color: yellowgreen;
}
- n :选择所有 => 几乎不用
div >p:nth-child(n) {
color: blue;
}
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body
1.4 : first-of-type
执行流程：先找到div，然后找到div中的p标签，然后找到p标签中的第一个元素
需求：将第一个p标签设置为红色
<style>
div > p:first-of-type {
color: red;
}
</style>
<body>
<div>
<section>1</section>
<header>2</header>
<span>我是span标签</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</div>
<p>我是外部的p</p>
</body>
1.5 :last-of-type
规则和first-of-type一样，先进行同类型标签的匹配，再去找对应顺序的内容
<style>
div > p:last-of-type {
color: red;
}
div > span:first-of-type {
color: red;
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<span>我是span</span>
<span>我是span2</span>
</div>
</body>
1.6 :nth-of-type
n 的使用规则与nth-child一致
整体使用规则与first/last-of-type一致
- 需求：将div中的内容为3的元素改为红色
div > p:nth-of-type(3) {
color: red;
}
- 需求：将最后一个span改为绿色
div > span:last-of-type {
color: green;
}
- 需求：将ul中的第一个li改成橙色
div > ul > li:first-of-type {
color: orange;
}
- 需求：将div的兄弟元素p标签改为紫色 purple
div + p {
color: purple;
}
<body>
<div>
<span>this is first span</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<span>this is last span</span>
<section>this is section</section>
<ul>
<li>this is first li</li>
<li>this is last li</li>
</ul>
</div>
<p>this is outside p</p>
</body>
2.0 否定伪类
排除指定的选择器之外，其余的都设置指定样式
语法： :not(任意选择器的名称)
- 需求：将div中的p标签设置为红色字体，除了有类名的之外
div > p:not(.only-p) {
color: red;
}
- 需求：将s1中，除了title属性以iam开头的span之外，全部设置为红色
.s1 > span:not([title^="iam"]) {
color: red;
}
<body>
<div>
<p>1</p>
<p class="only-p">2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
<section class="s1">
<span>span 1</span>
<span title="span">span 2</span>
<span title="iamspan">span 3</span>
</section>
<section class="s2">
<span title="span">第二个section中的span</span>
</section>
</body>
3.0 常见伪类元素
用于选中元素中的一些特殊位置
3.1 ::placeholder 选中输入框的提示性文本
input::placeholder {
color: skyblue;
}
3.2 :: first-letter 选中元素中的第一个文字
h3::first-letter {
color: red;
font-size: 30px;
}
3.3 ::first-line 选中元素中的第一行文本
div::first-line {
color: red;
}
3.4 ::selection 选中元素中被鼠标选中的内容
p::selection {
color: red;
}
<body>
<!-- 需求：将placeholder字体改为天蓝色 -->
<input type="text" placeholder="请您输入用户名" >
<!-- 需求：将h3中的第一个文字变为红色字体 -->
<h3>我是标题标签</h3>
<!-- 需求：将第一行文字变为红色 -->
<div>
我是第一行文字 <br>
我是第二行文字 <br>
我是最后一行文字
</div>
<!-- 需求：鼠标选中哪个部分，哪个部分就改变 -->
<p>this is p</p>
<select>
<option value="city-chengdu">成都</option>
<option value="city-guangdong" selected>广东</option>
<option value="city-chongqing">重庆</option>
</select>
<input type="checkbox" checked>
</body>
使用label标签将单选按钮和对应的内容包裹起来的时候，就可以优化用户体验
<label>
<input type="radio" name="gender"> 男
</label>
<label>
<input type="radio" name="gender"> 女
</label>
label 有for属性，属性值指向input中id的值，一旦input的id值与for属性值一致，则二者绑定成功
<label for="male">男</label>
<input type="radio" name="gender" id="male">
<label for="female">女</label>
<input type="radio" name="gender" id="female"
3.5 ::before 在元素最开始的位置，创建一个子元素
注意： 必须使用 content属性 指定内容
.submit::before {
/* 将元素转为行内块元素，才可以设置宽度和高度 */
display: inline-block;
/* 设置成一个圆 */
border-radius: 50%;
content: '';
width: 16px;
height: 16px;
background-color: red;
}
3.6 ::after 在元素最后位置，创建一个子元素
注意：必须使用 content属性 指定内容
.shenhezhong::before {
display: inline-block;
border-radius: 50%;
content: '';
width: 16px;
height: 16px;
background-color: green;
}
.over::before {
display: inline-block;
border-radius: 50%;
content: '';
width: 16px;
height: 16px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 需求：在div内容最前面加上一个文字 "我" -->
<span class="submit">提交审核</span> <br>
<span class="shenhezhong">审核中</span> <br>
<span class="over">审核结束</span>
</body
4.0 选择器的优先级
4.1 优先级
当同一个元素，使用不同的选择器进行样式书写的时候，如果出现了对同一个属性设置值，则最终值取哪个，就看哪个的优先级最高。
!important > 行内选择器 > id > class > 标签 > 通配符选择器
<style>
#container {
color: orange;
}
.box {
olor: blue;
}
div {
color: red !important;
}
* {
color: purple;
}
</style>
</head>
<body>
<div class="box" id="container" style="color:green">this is div</div>
</body>
4.2 计算公式
权重计算：
！important（10000）> 行内选择器（1000）> id （100）> class （10）> 标签（1）>通配符选择器（0）
<style>
/* 权重是 10 + 1 = 11 */
.wrapper > p {
color: red;
}
/* 权重是10 */
.content2 {
color: blue;
}
#content1 {
color: green;
}
ul > li > p {
color: red;
}
ul > p {
color: blue;
}
.list-item {
color: pink;
}
a:link {
color: pink;
}
a:visited {
color: green;
}
</style>
</head>
<body>
<div class="wrapper">
<p id="content1">我是p标签</p>
<p class="content2">我是第二个p标签</p>
</div>
<ul class="list">
<li class="list-item">
<p>this is first p</p>
<a href="#">this is a</a>
</li>
<p>this is second p</p>
</ul>
</body>
练习：注意： 如果要提高嵌套元素的权重，可以加上父元素
