1. 元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p{
color: red;
}
span{
color: blue;
}
</style>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>
2. id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#xl{
text-decoration: none;
}
</style>
</head>
<body>
<a href="www.baidu.com">百度</a>
<a href="---" id="xl">新浪</a>
<a href="---">腾讯</a>
</body>
</html>
3. 类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.c{
background: pink;
}
</style>
</head>
<body>
<p class="c">段落</p>
<a href="https://editor.csdn.net/md?articleId=107837358">超链接</a>
<br />
<span class="c">span</span>
<br />
<font>字体</font>
</body>
</html>
4. 通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
font-family: "黑体";
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<p>Hello world</p>
<a href="">qq</a>
<br />
<table>
<tr>
<td>单元格01</td>
<td>单元格02</td>
<td>单元格03</td>
</tr>
<tr>
<td>单元格01</td>
<td>单元格02</td>
<td>单元格03</td>
</tr>
<tr>
<td>单元格01</td>
<td>单元格02</td>
<td>单元格03</td>
</tr>
</table>
</body>
</html>
5. 子代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#p1 > .t{
color: yellow;
}
</style>
</head>
<body>
<p id="p1">
<a href="">百度</a>
<br />
<span>新浪</span>
<br />
<font class="t">1</font>
<font>2</font>
<font class="t">3</font>
</p>
<hr />
<p>
<a href="">百度</a>
<br />
<span>新浪</span>
<br />
<font>腾讯</font>
</p>
</body>
</html>
6. 后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ol > li li{
color: greenyellow;
color: darkgoldenrod;
}
</style>
</head>
<body>
<ol>
<li>射手
<ul>
<li>孙尚香</li>
<li>后裔</li>
<li>马可波罗</li>
<li>伽罗</li>
<li>虞姬</li>
</ul>
</li>
<li>打野
<ul>
<li>韩信</li>
<li>李白</li>
<li>赵云</li>
<li>百里玄策</li>
<li>裴擒虎</li>
</ul>
</li>
<li>法师
<ul>
<li>司马懿</li>
<li>王昭君</li>
<li>炸弹猫</li>
<li>甄姬</li>
<li>安其拉</li>
<li>墨子</li>
</ul>
</li>
</ol>
</body>
</html>
7. 属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input[value="1"][name="pwd"]{
background: gold;
}
</style>
</head>
<body>
<input type="text" value="默认"/>
<input type="password" name="pwd"/>
<input type="text" name="user" value="1"/>
<input type="password" name="pwd" value="2"/>
</body>
</html>
8. nth-of-type
-<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li:nth-of-type(-3n + 9){
background: red;
}
</style>
</head>
<body>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</body>
</html>
9. 优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#c{
color: yellow;
}
.t{
color: blue;
}
</style>
</head>
<body>
<button class="t" id="c">按钮</button>
</body>
</html>
10.伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
text-decoration: none;
}
a:hover{
color: pink;
}
a:active{
color: greenyellow;
}
a:visited{
color: orange;
}
</style>
</head>
<body>
<a href="http://www.4399.com">4399</a>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
