手写链接：https://www.llheng.com/img/index.html
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
p{
font-family: microsoft yahei;
}
h4{
font-family: microsoft yahei;
}
#first{
background-color: #006400; /*1*/
}
.square{
background-color: #6495ED; /*2*/
}
tr td{
font-size: 20px;
font-family: microsoft yahei;
text-align: center;
width: 25px;
}
tr *{
border: 2px solid #000080;
color: #fff;
}
tr > td{
background-color: gray;
}
#cla ~ td {
background-color:#D19275; /*9*/
}
#cla + td{
background-color: #A0522D; /*10*/
}
/*属性选择器样式设置*/
*[class]{
font-size: 10px;
}
td[class="demo"]{
background-color: #4169E1;
}
td[class ~= "de"]{
background-color: #98FB98;
}
td[class ^= "tab"]{
background-color: #2F4F4F;
}
td[id $= "or"]{
background-color: #DCDCDC;
}
td[class *= "ll"]{
background-color: #F0E68C;
}
/*伪类选择器*/
p:first-child{
color: red;
}
p:last-child{
font-size: 20px;
}
p:only-child{
background-color: #DCDCDC;
}
h4:only-of-type{ /*指定类型*/
color: green;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="15" >
<caption><h2>基本选择器</h2></caption>
<tr>
<td id="first">1</td>
<td class="square">2</td>
<td>3</td>
<td >4</td>
<td >5</td>
<td>6</td>
<td id="cla">7</td>
<td >8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
<p style="height: 50px;">
<table border="1" cellspacing="0" cellpadding="15" >
<caption><h2>属性选择器</h2></caption>
<tr>
<td class="table">1</td>
<td >2</td>
<td>3</td>
<td class="demo">4</td>
<td class="test de">5</td>
<td>6</td>
<td id="color">7</td>
<td >8</td>
<td class="yellow">9</td>
<td>10</td>
</tr>
</table>
<p style="height: 50px;">
<p ><h2 style="text-align: left;margin-left: 230px">伪类选择器</h2></p>
<div style="margin-left: 160px">
<div style="width: 300px">
<p>当前div唯一子元素</p>
</div>
<p style="height: 10px;">
<div>
<p>当前div第一个子元素</p>
<p>当前div第二个子元素</p>
</div>
<p style="height:10px;">
<div>
<p>当前div唯一类型为p的子元素</p>
<h4>当前div另一个子元素h4</h4>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
