伪元素选择器
2020-01-31 本文已影响0人
钢笔先生
Time: 20200131
动态伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪类选择器</title>
<style>
a:link{color: #666}
a:visited{color: #f00}
a:hover{color:#000}
a:active{color:#0f0}
</style>
</head>
<body>
<a href="">伪类选择器</a>
<head></head>
</body>
</html>
通过标签后加不同的动作过滤，会为相应的动作添加渲染效果。
其中：
- a:link 表示啥也不做时候的标签颜色
- a:visited 表示访问过后的颜色
- a:hover 表示鼠标滑上去的颜色
- a:active 表示点击时的颜色
2.UI元素状态伪类选择器 -- 常用于表单
重点在于状态。
什么是状态？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪类选择器</title>
<style>
input:enabled{background-color: #0f0;}
input:disabled{background-color: #ccc;}
</style>
</head>
<body>
<a href="">伪类选择器</a>
<hr>
<input type="text"> <br/>
<input type="text" disabled>
</body>
</html>
比如，我们为<input>指定disabled，默认是enabled。就可以根据状态（形容词）来筛选过滤，指定不同的样式。
3.结构伪类选择器
CSS3新增的语法。
有11种结构伪类选择器。
-
first-child用于选择某个元素的第一个子元素 -
last-child用于选择某个元素的最后一个子元素 -
nth-child()用于选择某个元素一个或者多个元素 -
nth-last-child()用于选择某个元素一个或者多个元素，从这个元素的最后一个子元素开始算 -
nth-of-type()选择指定的元素 -
nth-last-of-type()选择指定的元素，从这个元素的最后一个子元素开始算 -
first-of-type：只计数同类元素 -
last-of-type：只计数同类元素，从后往前数 -
only-child：只有一个子元素时才响应 -
only-of-type：该类型的子元素只有一个时才响应 -
empty：该子元素里面内容为空时响应
使用Emmet自动生成HTML。比如：ul>10*li>a*1，可以生成：
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
先做一个基本的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>结构伪类选择器</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.demo {
border: 1px solid #ccc;
width: 300px;
margin: 100px auto;
padding: 10px;
}
.demo li {
float: left;
list-style: none;
padding: 2px; /*为li的盒模型添加内边距，使其不要那么挤*/
border: 1px solid #ccc; /* 加上这个会使得padding失效，但是外边距可以用 */
margin-right: 4px;
width: 20px;
}
.demo a {
display: block;
width: 20px;
height: 20px;
text-align: center;
border-radius: 50%;
background-color: #f36;
text-decoration: none; /*去除文字底下横线*/
}
/* 清除浮动 */
.clearfix {
clear: both;
overflow: auto; /*让里面的内容可以撑开容器*/
}
</style>
</head>
<body>
<div class="demo clearfix">
<ul class="clearfix">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
<li><a href="">6</a></li>
<li><a href="">7</a></li>
<li><a href="">8</a></li>
<li><a href="">9</a></li>
<li><a href="">10</a></li>
</ul>
</div>
</body>
</html>
效果如下：
截屏2020-01-31下午1.03.42.png
:first-child && :last-child
/* 操作第一个子元素 */
.demo li:first-child {
background-color: #0f0;
}
/* 操作最后一个子元素 */
.demo li:last-child {
background-color: rgb(192, 198, 255);
}
:nth-child()
/* 操作第几个子元素 */
.demo li:nth-child(3) {
background-color: #0f0;
}
n表达式用法：
操作全部子元素
/* 操作全部子元素 */
.demo li:nth-child(n) {
background-color: #0f0;
}
操作偶数编号子元素
/* 操作全部子元素 */
.demo li:nth-child(2n) {
background-color: #0f0;
}
/* 等同 */
.demo li:nth-child(even) {
background-color: #0f0;
}
操作奇数编号子元素
/* 操作全部子元素 */
.demo li:nth-child(2n+1) {
background-color: #0f0;
}
/* 等同 */
.demo li:nth-child(odd) {
background-color: #0f0;
}
其实是从n=0开始，各种表达式都可以写：
截屏2020-01-31下午1.16.48.png
这个就是：
.demo li:nth-child(4n+1) {
background-color: #0f0;
}
加出来的结果是下标，下标从1开始。
这种新的结构伪类选择器，非常便于操作。
:nth-last-child()
.demo li:nth-last-child(3) {
background-color: #0f0;
}
:nth-of-type()
同类型的子元素的第几个。子元素不一定只有一种类型。
nth-child是不区分类型的。
:empty
当子元素中的内容为空时响应。
这个不区分数量。
END.
