<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3属性选择器</title>
<style>
[id*=div]{
color:red;/*id包含div的*/
}
[id^=div]{
color:#0000ff;/*id首字符为div的*/
}
[id$=div]{
color:green;/*id结束符为div的,数字前加上\*/
}
</style>
</head>
<body>
<div id="div">测试文字</div>
<div id="div1">测试文字</div>
<div id="di">测试文字</div>
<div id="mydiv">测试文字</div>
</body>
</html>css3结构性伪类选择器root、not、empty、target:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3结构性伪类选择器</title>
<style>
/*root选择器指html最外层根元素html*/
:root{
background: gray;
}
/*如果使用了root，body只对有内容的区域修饰*/
body{
background: green;
}
/*not排除功能*/
div *:not(h1){
color:#fff000;
}
/*empty对空的内容修饰*/
:empty{
background: royalblue;
}
/*target对超链接跳转之后内容修饰*/
:target{
background: rebeccapurple;
color:#fff;
}
</style>
</head>
<body>
<div>文字内容
<h1>标题</h1>
<p>测试文字</p>
<div>测试文字2</div>
</div>
<table border="1">
<tr>
<td>单元1</td>
<td>单元2</td>
</tr>
<tr>
<td></td>
<td>单元2</td>
</tr>
<tr>
<td>单元1</td>
<td></td>
</tr>
</table><br/>
<a href="#a1">链接1</a>
<a href="#a2">链接2</a>
<a href="#a3">链接3</a>
<div>
<div id="a1">
<h1>链接一</h1>
<p>内容一</p>
</div>
<div id="a2">
<h1>链接二</h1>
<p>内容二</p>
</div>
<div id="a3">
<h1>链接三</h1>
<p>内容三</p>
</div>
</div>
</body>
</html>css3结构性伪类选择器first-line、first-letter、before、after:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3结构性伪类选择器</title>
<style>
/*first-line:第一行*/
p:first-line{
color:#ff0000;
}
/*first-letter:首字符*/
p:first-letter{
color:#0000ff;
}
/*before:之前*/
li:before{
content: "--";
color:#ff0000;
}
/*after:之后*/
li:after{
content: "这是注释";
color:gray;
font-size: 10px;
}
</style>
</head>
<body>
<p>这是一段测试文字<br/>这是第二段测试文字</p>
<div>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
</body>
</html>css3结构性伪类选择器first-child、last-child、nth-child()、nth-last-child():
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: #555;
}
/*first-child:第一个子元素*/
li:first-child{
background:#0000ff;
}
/*last-child:最后一个子元素*/
li:last-child{
background: #ff0000;
}
/*nth-child():指定的第几个子元素*/
li:nth-child(3){
background: #fff000;
}
/*nth-last-child():指定的倒数第几个子元素*/
li:nth-last-child(2){
background: #999999;
}
/*even:指定的偶数*/
li:nth-child(even){
color: #00ff00;
}
/*odd:指定的奇数*/
li:nth-last-child(odd){
color:#fff;
}
</style>
</head>
<body>
<div>
<ul>
<li>这是第1列</li>
<li>这是第2列</li>
<li>这是第3列</li>
<li>这是第4列</li>
<li>这是第5列</li>
</ul>
</div>
</body>
</html>css3结构性伪类选择器nth-child(n)及only-child:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*nth-child(n)
n=αn+β*/
li:nth-child(4n+1){
background: #0000ff;
}
li:nth-child(4n+2){
background: #00ff00;
}
li:nth-child(4n+3){
background: #999999;
}
li:nth-child(4n){
background: #ff0000;
}
/*only-child:对标签内仅有的一个子元素做修饰*/
li:only-child{
background: #000;
color: #fff;
}
</style>
</head>
<body>
<ul>
<li>这是一段测试文字</li>
</ul>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
</html>css3结构性伪类选择器nth-of-type、nth-last-of-type:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*nth-of-type:同类元素做修饰*/
h2:nth-of-type(odd){
background: #fff000;
}
/*nth-last-of-type:同类元素倒数做修饰*/
h2:nth-last-of-type(odd){
background: #0000ff;
}
</style>
</head>
<body>
<div>
<h2>标题</h2>
<p>文本内容</p>
<h2>标题</h2>
<p>文本内容</p>
<h2>标题</h2>
<p>文本内容</p>
<h2>标题</h2>
<p>文本内容</p>
</div>
</body>
</html>css3选择器hover、focus、active、checked:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[type="text"]:hover{
background: #fff000;
}
input[placeholder=""]:focus{
background: #ff0000;
}
input[type="text"]:active{
background: #0000ff;
}
input[type="checkbox"]:checked{
outline:2px solid #00ff00;
}
</style>
</head>
<body>
<input type="text" placeholder="输入内容">
<input type="text" placeholder="">
<input type="checkbox">音乐
<input type="checkbox">听歌
</body>
</html>css3选择器enabled、disabled:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*enabled:可输入状态*/
input[type="text"]:enabled{
background: #fff000;
}
/*disabled:不可输入状态*/
input[type="text"]:disabled{
background:gray;
}
</style>
</head>
<body>
<script>
function radio_change() {
var radio1=document.getElementById("radio1");
var radio2=document.getElementById("radio2");
var text=document.getElementById("text");
if(radio1.checked){
text.disabled="";
}else{
text.value="";
text.disabled="disabled";
}
}
</script>
<input type="radio" id="radio1" name="radio" onchange="radio_change()">可用
<input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用
<input type="text" id="text" disabled>
</body>
</html>css3通用兄弟元素选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通用兄弟元素选择器</title>
<style>
/*对div的同级元素p修饰*/
div~p{
background: #fff000;
}
</style>
</head>
<body>
<div>
<div>
<p>我是div的子元素p</p>
<p>我是div的子元素p</p>
</div>
<p>我是和div同级别p元素</p>
<p>我是和div同级别p元素</p>
</div>
</body>
</html>下载本文