使用 CSS 選擇子元素

王林轉載: 2023-08-31 19:53:031258瀏覽

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>

輸出

這將產生下列結果-

使用 CSS 选择子元素

範例

現場演示

<!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 選擇子元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css 选择器

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS中size屬性的作用是設定頁框的大小和方向下一篇：CSS中size屬性的作用是設定頁框的大小和方向

看更多