«
选择器
MitSeek 发布于
阅读：39
CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style>
/* 元素选择器 */
h1{
color: blue;
}
/* 通配符选择器 */
div *{
/* div下面所有元素进行定义 */
font-size: 30px;
}
/* *{
对所有项目进行一次性定义
} */
/* ID选择器 */
#pp{
background-color: red;
}
/* 类选择器 */
.com{
color: black;
}
/* 群组选择器 */
h3,h4{
color: white;
background: black;
}
/* 包含选择器 只作用于最后一个*/
ul li a{
font-size: 40px;
background: black;
color: yellow;
text-decoration: none; /* 取消A标签的下划线 */
}
/* 子选择器，顾名思义就是父子的关系，只作用于父下边的第一个孩子 */
ol>li>a{
text-decoration: none;
color: aqua;
}
</style>
</head>
<body>
<h1>元素选择器</h1>
<div>
<h2>通配符选择器</h2>
</div>
<p id="pp">ID 选择器</p>
<p class="com">类选择器</p>
<h3>
<h4>群组选择器</h4>
</h3>
<ul>
<a href="">包含选择器1</a>
<li>
<a href="">包含选择器2</a><br />
<a href="">包含选择器3</a>
</li>
</ul>
<ol>
<a href="">子选择器1</a>
<li>
<a href="">子选择器2</a>
<br />
<a href="">子选择器3</a>
</li>
</ol>
</body>
</html>
CSS