1、E:target 表示当前的URL片段的元素类型，这个元素必须是E
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{width:200px;height:200px;text-align:center;font:50px/200px "微软雅黑";color:#fff;background: #000;display:none;}
div:target{display:block;}
</style>
</head>
<body>
<a href="#div1">标签1</a>
<a href="#div2">标签2</a>
<a href="#div3">标签3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
2、E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input:enabled{padding-left:4px;color:#999;}
input:disabled{padding-left:4px;color:#999;background: #ccc}
</style>
</head>
<body>
<input type="text" value="请输入您的个人信息" disabled="disabled">
</body>
</html>
3、E:checked 表示已选中的checkbox或radio
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
label{float:left;margin:0 5px;overflow:hidden;position: relative;}
label input{position:absolute;top:-50px;left:-50px;}
label span{display:block;width:50px;height:50px;border:2px solid #000;}
input:checked~span{background:red;}
</style>
</head>
<body>
<label>
<input type="radio" name="tab">
<span></span>
</label>
<label>
<input type="radio" name="tab">
<span></span>
</label>
<label>
<input type="radio" name="tab">
<span></span>
</label>
</body>
</html>
4、E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{width:300px;font:16px/32px "微软雅黑";color:#666;border:2px solid #ccc;padding:10px;}
p:first-line{color:#333;}
p:first-letter{font-size:24px;font-weight:bold;}
p::selection{background:#000;color:red;}
p:before{content:"CSS,";}
p:after{content:"CSS,";display:block;}
</style>
</head>
<body>
<p>CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。</p>
</body>
</html>
5、E:not(s) 表示E元素不被匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p:not(.p2){background: red;}
</style>
</head>
<body>
<p class="p1">123</p>
<p class="p2">234</p>
<p class="p3">456</p>
</body>
</html>
时间： 2024-11-10 07:52:08