首页 / CSS / css上下文选择器

css上下文选择器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css上下文选择器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1145字，纯文字阅读大概需要2分钟。

内容图文

家族: 祖宗,父辈,兄弟同辈关系

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>Gxl网</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上下文选择器的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的css上下文选择器全部内容，希望文章能够帮你解决css上下文选择器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/411847.html

来源：【匿名】