1 E:target 表示当前的URL片段的元素类型，这个元素必须是E
<style>
div{width:300px;height:200px;background:#000;font:50px/200px "微软雅黑"; color:#fff; text-align:center; display:none;}
div:target{ display:block;}
</style>
</head>
<body>
<a href="#div1">div1</a>
<ahref="#div2">div2</a>
<ahref="#div3">div3</a>
<divid="div1">div1</div>
<divid="div2">div2</div>
<divid="div3">div3</div>
</body>
效果类似选项卡
2 E:disabled 表示不可点击的表单控件
3 E:enabled 表示可点击的表单控件
<style>
input{width:100px;height:30px; color:#000;}
input:enabled{ color:red;}
input:disabled{ color:blue;}
</style>
</head>
<body>
<input type="text"value="请输入" disabled />
</body>
4 E:checked 表示已选中的checkbox或radio
<style>
input:checked{ width:100px;height:100px;}
</style>
</head>
<body>
<input type="checkbox" />
</body>
模拟单选框
<style>
label{ float:left;margin:0 5px;overflow:hidden; position:relative;}
label input{position:absolute;left:-50px;top:-50px;}
span{float:left;width:50px;height:50px;border:3pxsolid #000;}
input:checked~span {background:red;}
</style>
</head>
<body>
<label>
<inputtype="radio" name="tab" />
<span></span>
</label>
<label>
<inputtype="radio" name="tab" />
<span></span>
</label>
<label>
<inputtype="radio" name="tab" />
<span></span>
</label>
</body>
文本伪类
5 E:first-line 表示E元素中的第一行
6 E:first-letter 表示E元素中的第一个字符
7 E::selection表示E元素在用户选中文字时
8 E::before 生成内容在E元素前
9 E::after 生成内容在E元素后
10 Content 属性
<style>
p{width:300px;border:1pxsolid #000;font:12px/30px "宋体";padding:10px;}
p:first-line{background:red;}
p:first-letter{font-size:30px;}
p::selection{background:#F60;color:#690;}
p:before{content:"MiaoV"; display:block; border:1px solid #000;}
p:after{ content:"MiaoV"; display:block; border:1pxsolid #000;}
</style>
</head>
<body>
<p>前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁，
在 HTML5&CSS3 被炒至沸沸扬扬的今天，
全面系统的掌握此项技能，是加重技术含金量的重要砝码！
现已为你开启一个崭新的职业规划……</p>
</body>
11 E:not(s) 表示E元素不被匹配
<style>
h1:not(.h2){ background:Red;}
</style>
</head>
<body>
<h1>h1</h1>
<h1class="h2">h1</h1>
<h1>h1</h1>
</body>
12 E~F表示E元素毗邻的F元素选择后边的兄弟元素
<style>
p~h1{ background:Red;}
</style>
</head>
<body>
<h1>h1</h1>
<p>p</p>
<h1>h1</h1>
<h1>h1</h1>
</body>
64
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
