집 >웹 프론트엔드 >CSS 튜토리얼 >CSS를 사용하여 하위 요소 선택

CSS를 사용하여 하위 요소 선택

王林앞으로: 2023-08-31 19:53:031293검색

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>

Output

다음과 같은 결과가 생성됩니다. -

使用 CSS 选择子元素

Example

라이브 데모

<!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>

Output

다음과 같은 결과가 생성됩니다. -

使用 CSS 选择子元素

위 내용은 CSS를 사용하여 하위 요소 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css 选择器

성명：

이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：CSS에서 크기 속성의 기능은 페이지 상자의 크기와 방향을 설정하는 것입니다.다음 기사：CSS에서 크기 속성의 기능은 페이지 상자의 크기와 방향을 설정하는 것입니다.