-
伪类一 : target仿造锚点
CSS3里面利用target伪类来实现锚点的某些功能
target加在目标的位置上具体见代码 - E:disabled表示不可点击的表单控件
- E:enabled表示可点击的表单控件
- E:checked表示以选中的checkbox或radio只有在OPREA浏览器下可以
- E:first-line表示E元素中的第一行
- E:first-letter表示E元素中的第一个字符
- E:selection表示E元素在用户选中文字的时候
- E:before生成内容在E元素之前。他里面必须有content:这个属性
- E:after生成内容在E元素之后,同理他里面必须有content这个属性
- E:not(s)表示E元素不被匹配S表示标签名
- E~F表示E元素毗邻的F元素(同级节点。并且只能是比E的顺序要低)
- Content属性
2017-05-03_152524.jpg
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3伪类和伪元素</title>
</head>
<style>
*{margin:0px;padding:0px;}
a{font-size:18px;}
div{width:100px;height:100px;background: red;display: none;}
div:target{display: block;}/*代表的就是最终目的*/
input[type=button]:disabled{color:red;} /*找到disabled*/
input[type=checkbox]:checked{width:50px;height:50px;} /*找到checkbox*/
h2~h1{color:gold;}/*第一个h1没有变化。而是h2后面的节点发生了变化*/
label{overflow:hidden;position:relative;}
input[type=radio]{position:absolute;left:-100px;top:-100px;}
span{width:50px;height:50px;border:5px solid #ccc;display: block;}
input[type=radio]:checked~span{background: gold;}
</style>
<body>
<p>主要是就是测试CSS3里面的伪类target</p>
<a href="#div1">a1</a>
<a href="#div2">a2</a>
<a href="#div3">a3</a>
<div id="div1">第一个</div>
<div id="div2">第二个</div>
<div id="div3">第三个</div>
<input type="button"value="点击" disabled>
<input type="checkbox">篮球
<h1>第一名</h1>
<h2>第二名</h2>
<h1>第一名</h1>
模拟单选框
<label>
<input type="radio"name="r1">
<span></span>
</label>
<label>
<input type="radio"name="r1">
<span></span>
</label>
<label>
<input type="radio"name="r1">
<span></span>
</label>
</body>
</html>
自定义单选框.gif
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3伪类和伪元素</title>
</head>
<style>
*{margin:0px;padding:0px;}
label{overflow:hidden;position:relative;display:block;} /*超出后隐藏。定位相对*/
input[type=radio]{position:absolute;left:-100px;top:-100px;} /*input绝对定位*/
span{width:50px;height:50px;border:5px solid #ccc;display: block;}/*要替换的*/
input[type=radio]:checked~span{background: gold;}/*选中后要替换的*/
</style>
<body>
模拟单选框
<label>
<input type="radio"name="r1">
<span></span>
</label>
<label>
<input type="radio"name="r1">
<span></span>
</label>
<label>
<input type="radio"name="r1">
<span></span>
</label>
</body>
</html>
这里要特别注意:first-letter,first-line,在CSS里面查找的越准确，级别优先度最高而不是看!important
222.png
文本伪类
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3伪类和伪元素</title>
</head>
<style>
*{margin:0px;padding:0px;}
#p1{width: 300px; border: 1px solid #000; font: 12px/30px "微软雅黑"; padding: 10px;}
#p1:first-line{color:blue;font-size:12px;}
#p1:first-letter{font-size:24px;color:red;}
#p1::selection{color:gold;}
#p1:before{content:"帅哥";font-size:24px;color:gold;}/*这样他是不会改变样式的,只是加了帅哥*/
#p1:after{content:"美女";font-size:24px;color:gold;} /*这样他就会发生变化了。因为没有first-letter*/
</style>
<body>
<p id="p1">
前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁，在HTML5&CSS3被炒至沸沸扬扬的今天，全面系统地掌握此项技能，是加重技术含金量的重要砝码！现已为你开启一个崭新的职业规划……
</p>
</body>
</html>
对应的效果图
2017-05-04_105011.jpg
排除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1:not(.h2) {background: red;} /*也就是除了class是h2的以外都变成红色*/
</style>
</head>
<body>
<h1>h1</h1>
<h1 class="h2">h1</h1>
<h1>h1</h1>
</body>
</html>
