CSS combination selectors
CSS combination selector
CSS combination selector allows you to intuitively understand the relationship between selectors.
 | The combined selector illustrates the direct relationship between the two selectors. |
|---|
CSS combination selectors include various combinations of simple selectors.
Contains four combination methods in CSS3:
Descendant selector (separated by spaces)
Child elements Selectors (separated by a greater than sign)
Adjacent sibling selectors (separated by a plus sign)
Normal sibling selectors (separated by a dash delimited)
Descendant Selector
Descendant selector matches all descendant elements of a worthy element.
The following example selects all <p> elements and inserts them into the <div> element:
Example
<!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 Example »
Click the "Run Example" button to view the online example
Child element selector
Compared with descendant selectors, child element selection Child selectors can only select elements that are children of an element.
The following example selects all direct child elements<p> in the <div> element:
Example
<!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 instance»
Click the "Run instance" button to view the online instance
Adjacent sibling selector
Adjacent sibling selector (Adjacent sibling selector) can select an element immediately following 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:
Example
<!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 instance»
Click the "Run instance" button to view the online instance
Follow-up sibling selector
Follow-up sibling selector selects all The adjacent sibling elements after the specified element.
The following example selects all adjacent sibling elements<p> after all <div> elements:
Example
<!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 instance»
Click the "Run instance" button to view the online instance
