css上下文選擇器
- 无忌哥哥原創
- 2018-06-28 17:19:022495瀏覽
家族: 祖先,父輩,兄弟同輩關係
1.祖先元素: 包含多級後代的元素;
2.父級元素: 僅包含一級子元素的元素;
3.相鄰元素: 擁有同一個父級的元素;
1.後代選擇器:先找到祖先元素,再選擇它下面的所有指定後代元素
語法: 祖先與目標之間用空格分開,可以有多級,用多個空格區隔
# 格式: 祖先目標{聲明}
2.子選擇器:先找到父級元素,再選擇他下面所有直接後代元素
語法: 父級> 目標元素{樣式聲明}
3.相鄰選擇器: 先確定同胞元素的起始點,選擇後面的所有的指定元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style type="text/css">
.art p {
/*color:red;*/
}
.art > p {
/*color: green;*/
}
.art h1+p {
/*只会将h1后面紧邻的p变色*/
/*color:blue; */
}
.art p+p {
clor: red;
}
</style>
</head>
<body>
<article>
<h1>php中文网</h1>
<p>永久免费的在线教学网站</p>
<p>将公益进行到底</p>
<p>为了情怀,为了梦想,为了更多像我这样的PHP爱好者</p>
<section>
<h2>如何学习前端</h2>
<p>一定要多动手多写笔记进行总结</p>
</section>
<section>
<h2>原来大家是这样学习的呀~~</h2>
</section>
</article>
<hr>
<ul>
<li>1列表项</li>
<li>2列表项</li>
<li>3列表项</li>
<li>4列表项</li>
<li>5列表项</li>
</ul>
</body>
</html>以上是css上下文選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn