子代选择器 结构伪类选择器
包含选择器 后代选择器 包含的是后代
子代选择器 包含儿子
div>p
则只有儿子收到效果
ul li:first-child {
color: red;
}
ul li:nth-child(2) {
color: aqua;
}
ul li:nth-child(3) {
color: yellowgreen;
}
ul li:last-child {
color: darkblue;
}
ul li:nth-child(2n+1) {
}
</style>
<body>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
ul li:nth-of-type(2) {
color: red;
}
.box p:nth-of-type(2) {
color: red;
}
</style>
nth-child第几个孩子
nth-of-type 类型中的第几个
<body>
<ul>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<div class="box">
<h1>111</h1>
<p>111</p>
<p>111</p>
</div>
<style>
/* 超链接的样式 */
/* a:link {
color: cadetblue;
} */
/*
a:visited {
color: cadetblue;
} */
/* 被拜访之后的样式，但是直接设置没有任何反应 */
/* a:hover {
color: pink;
} */
/* 鼠标移入的样式 */
a:active {
color: red;
}
/* 鼠标点击的样式 */
/* 目前浏览器组要支持hever和active */
/* 所有的标签都可以支持hover 但是只有a标签支持点击active */
div {
width: 300px;
height: 300px;
font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px;">#222;
}
div:hover {
}
</style>
<body>
<div>
</div>
<a href="">啊啊啊啊啊</a>
<a>啊啊啊啊啊</a>
<a href="">啊啊啊啊啊</a>
</body>
</html>
