<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* E:link */
/* 设置超链接a在未被访问前的样式。 */
a:link {
text-decoration: none;
color: blue;
}
/* E:visited */
/* 设置超链接a在其链接地址已被访问过时的样式。 */
a:visited {
text-decoration: none;
color: purple;
}
/* E:hover */
/* 设置元素在其鼠标悬停时的样式。 */
a:hover {
text-decoration: none;
color: red;
}
/* E:active */
/* 设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。 */
a:active {
text-decoration: none;
color: yellow;
}
/* a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后 */
/* E:focus */
/* 设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。 */
input:focus {
background: #f6f6f6;
color: #f60;
border: 1px solid #f60;
}
/* E:lang(fr) */
/* 匹配使用特殊语言的E元素。 */
p:lang(zh-cmn-Hans) {
color: #f00;
}
p:lang(en) {
color: #090;
}
/* E:not(s) */
/* 匹配不含有s选择符的元素E。 */
.demo li:not(:last-child) {
border-bottom: 1px solid #ddd;
}
/* E:root */
/* 匹配E元素在文档的根元素。在HTML中，根元素永远是HTML */
html:root {
color: #0000FF;
}
/* E:first-child */
/* 匹配父元素的第一个子元素E。 */
.child p:first-child {
color: red;
}
/* E:last-child */
/* 匹配父元素的最后一个子元素E。 */
.child p:last-child {
color: fuchsia;
}
/* E:only-child */
/* 匹配父元素仅有的一个子元素E。 */
.only li:only-child {
color: red;
}
/* E:nth-child(n) */
/* 匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。 */
.child p:nth-child(2) {
color: red;
}
.child p:nth-child(3) {
color: red;
}
/* .child p:nth-child(2n) {
color: red;
} */
/* 偶数个变色 */
/* even */
/* .child p:nth-child(2n+1) {
color: red;
} */
/* 奇数个变色 */
/* odd */
/* E:nth-last-child(n) */
/* 匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。 */
.child p:nth-last-child(2) {
color: red;
}
/* E:first-of-type
匹配父元素下第一个类型为E的子元素
E:last-of-type
匹配父元素下的所有E子元素中的倒数第一个
E:only-of-type
匹配父元素的所有子元素中唯一的那个子元素E
E:nth-of-type(n)
匹配父元素的第n个子元素E
E:nth-last-of-type(n)
匹配父元素的倒数第n个子元素E */
/* E:empty */
/* 匹配没有任何子元素（包括text节点）的元素E */
p:empty {
height: 25px;
border: 1px solid #ddd;
background: #eee;
}
/* E:checked */
/* 匹配用户界面上处于选中状态的元素E。
(用于input type为radio与checkbox时) */
input:checked+span {
background: #f00;
}
input:checked+span:after {
content: " 我被选中了";
}
/* E:enabled */
/* 匹配用户界面上处于可用状态的元素E */
input[type="text"]:enabled {
border: 1px solid #090;
background: #fff;
color: #000;
}
/* E:disabled */
/* 匹配用户界面上处于禁用状态的元素E */
input[type="text"]:disabled {
border: 1px solid #ccc;
background: #eee;
color: #ccc;
}
/* E:target */
/* 匹配相关URL指向的E元素 */
.test .hd {
padding: 10px 0;
}
.test .nav {
position: fixed;
right: 10px;
left: 540px;
}
.test .nav a {
display: block;
margin: 10px 0;
}
.test .bd .panel {
width: 500px;
margin-top: 5px;
border: 1px solid #ddd;
}
.test .bd h2 {
border-bottom: 1px solid #ddd;
}
.test .bd .panel:target {
border-color: #f60;
}
.test .bd .panel:target h2 {
border-color: #f60;
}
h2,
p {
margin: 0;
padding: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<div>
<p>
<a href="javascript:;">
这个链接在鼠标按下和松开的这段时间内会变成黄色，鼠标悬停时是红色
</a>
</p>
<p>
<a href="http://www.bing.com" target='_blank'>
这个链接在被访问后会变成紫色
</a>
</p>
</div>
<br><br>
<div>
<input type="text" value="姓名" />
</div>
<br><br>
<div>
<p lang="zh-cmn-Hans">大段测试文字</p>
<p lang="en">This winter holiday,I went to Kunming with my family.</p>
</di.demo li:not(:last-child) { border-bottom: 1px solid #ddd; }v>
<br /><br />
<div class="demo">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<br><br>
<h3>根元素</h3>
<br><br>
<div class="child" id="">
<p>第一个p</p>
<p>第二个p</p>
<h3>第三个h3</h3>
<p>倒数第二个p</p>
<p>最后一个p</p>
</div>
<br><br>
<div class="only">
<h1>只有唯一一个子元素</h1>
<ul>
<li> E:only-child</li>
</ul>
<h1>有多个子元素</h1>
<ul>
<li> E:only-child</li>
<li> E:only-child</li>
<li> E:only-child</li>
</ul>
</div>
<br><br>
<div class="empty">
<p>E:empty</p>
<p>
<!-- 这是一个空 -->
</p>
<p>E:empty</p>
</div>
<br><br>
<div>
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
</div>
<br><br>
<div>
<fieldset>
<legend>E:enabled与E:disabled</legend>
<ul>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="可用状态" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
<li><input type="text" value="禁用状态" disabled="disabled" /></li>
</ul>
</fieldset>
</div>
<br><br>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「zzlwei」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zzlwei/article/details/106643640
