属性选择器：
img[alt]：选择有alt属性的img标签
img[alt="故宫"]：选择alt属性是故宫的img标签
img[alt^="北京"]：选择alt属性是以北京开头的img标签
img[alt$="夜景"]：选择alt属性以夜景结尾的img标签
img[alt*="美"]：选择alt属性中含有美字的img标签
img[alt~="手机拍摄"]：选择alt属性中有空格隔开的手机拍摄字样的img标签
img[alt|="参赛作品"]：选择alt属性以“参赛作品-”开头的img标签
新增伪类：
:empty：选择空标签
:focus：选择当前获得焦点的表单元素
:enabled：选择当前有效的表单元素
:disabled：选择当前无效的表单元素
:checked：选择当前已经勾选的单选按钮或者复选框
:root：选择根元素，即<html>标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.para{
/* 宽度、高度 */
width: 200px;
height: 200px;
/* 边框 */
border: 1px solid cyan;
}
.para:empty{
background: red;
}
input:focus{
background: blue;
}
input:disabled{
border: 1px solid rosybrown;
}
input:enabled{
border: 1px solid royalblue;
}
input:checked+span{
color: seagreen;
}
:root{
font-size: 20px;
}
</style>
</head>
<body>
<p class="para">1</p>
<p class="para"></p>
<p class="para">2</p>
<p class="para"> </p>
<p>
<input type="text">
<input type="text" disabled>
<input type="text" disabled>
<input type="text">
<input type="text">
</p>
<p>
<label><input type="checkbox"><span>文字</span></label>
<label><input type="checkbox"><span>文字</span></label>
<label><input type="checkbox"><span>文字</span></label>
<label><input type="checkbox"><span>文字</span></label>
</p>
</body>
</html>
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
