伪类一 : 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 属性
<!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>自定义单选框
<!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
文本伪类
<!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>排除元素
<!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>
