使用 CSS 选择子元素

百变鹏仔 4周前 (09-20) #CSS

文章标签元素

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" / alt="使用 CSS 选择子元素" ></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 选择子元素

示例

输出

示例

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写