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 选择子元素的详细内容。