CSS Combination Selector
The combination selector illustrates the direct relationship between two selectors.
CSS combination selectors include various combinations of simple selectors.
Contains four combination methods in CSS3:
Descendant selector (separated by spaces)
Child element selector (separated by greater than sign)
Adjacent sibling selector (separated by plus sign)
Ordinary sibling selector (separated by dashes)
Descendant Selector
Descendant selector matches all descendants of a worthy element element.
The following example selects all p elements and inserts them into the div element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>Run the program and observe
Child element selector
Compared with descendant selectors, child selectors (Child selectors) can only select elements that are child elements of an element.
The following example selects all direct child elements<p> in the <div> element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span><p>I will not be styled.</p></span>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>Run the program and observe
Adjacent sibling selector
The Adjacent sibling selector can select an element immediately after another element, and both have the same parent element .
If you need to select an element immediately after another element, and both have the same parent element, you can use the Adjacent sibling selector.
The following example selects all the first <p> elements after the <div> element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div+p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>
</body>
</html>Run the program and observe
Ordinary adjacent sibling selector
The ordinary sibling selector selects all adjacent sibling elements of the specified element.
The following example selects all adjacent sibling elements<p> of all <div> elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div~p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>Run the program and observe
