CSS子组合器用于选择父元素的所有子元素。
CSS子组合器的语法如下 -
Selector > Selector {
attribute: /*value*/
}
CSS后代组合器用于选择父元素的所有后代元素。
CSS后代组合器的语法如下：
Selector Selector {
attribute: /*value*/
}
示例
以下示例演示了CSS的子元素和后代选择器。
在线演示
<!DOCTYPE html>
<html>
<head>
<style>
article > * {
text-align: center;
border: 10px groove tomato;
}
::first-line {
Box-shadow: inset 0 0 7px cornflowerblue;
}
</style>
</head>
<body>
<article>
<h2>Donec rutrum a erat vitae interdum. </h2>
<p>Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius.</p>
<img src="https://images.unsplash.com/photo-1612840666989- a16302e84978?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" />
</article>
</body>
</html>
输出
这将产生以下结果 -
示例
现场演示
<!DOCTYPE html>
<html>
<head>
<style>
body > * {
margin: 20px;
}
article p {
font-size: 24px;
Box-shadow: -10px 1px 0 rgba(12,43,180, 0.6);
}
</style>
</head>
<body>
<article>
<p>Neque porro quisquam </p>
<p>est qui dolorem ipsum quia dolor sit amet,</p>
<div><p>consectetur, adipisci velit.....</p></div>
</article>
<div>
<p> consectetur, adipisci velit</p>
<article>
<p> consectetur, adipisci velit</p>
</article>
</div>
</body>
</html>
输出
这将产生以下结果 -
以上就是使用 CSS 选择子元素的详细内容，更多请关注编程之家其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
