CSS combination selectors
Combined selector
Tag selector, class selector and ID selector can be used in combination. The general combination method is the combination of tag selector and class selector, and the combination of tag selector and ID selector. Since the principles and effects of these two combination methods are the same, only the combination of tag selector and class selector is introduced. The combination selector is just a form of combination and not a real selector, but it is often used in practice.
For example .orderlist li {xxxx} or .tableset td {}
When we use it, we usually use it in some tags that appear repeatedly and have the same style, such as li td dd etc.
For example<h1 class="red"></h1> H1.red {color: red}
Combined selector list
1. A,B Multiple element selection , matches all A elements and B elements at the same time, separated by commas between A and B div,p { color:red; }
2. A B Descendant element selector, matches all belonging to B elements that are descendants of the A element, separated by spaces between A and B #nav li { display:inline; li a { font-weight:bold; }
##3. A > B Child element selector, matches all child elements of A element B div > strong { color:#f00; }
4. A + B Adjacent element selector, matches all The sibling element B immediately following the A element p + p { color:#f00; }
5. A ~ B Ordinary adjacent element selector, matching all adjacent elements of the specified element. div ~ p { color:#f00; }Multiple element selector
//css code:
<style>
##div.mydivred,p.mypred{padding:10px;background-color:#ffffff;border:1px #000000 solid;color:red;}
##</style>
//html code
##<div class="mydivred"> div.mydivred</div>
<p class="mypred"> p.mypred</p>
Descendant element selector
##<style>
#fuji .ziji
{
padding:10px;
background-color:#ffffff;
##border:1px #000000 solid;color:red;}
##</style>
<div id="fuji">
<div class ="ziji"> div.ziji</div>
##</div>
##try it
Child element selector
##<style>
#zys>span
##{
padding:10px;
##background-color:#ffffff;
##border:1px #000000 solid;color:red;
}
##</style>
<div id="zys">
##<span class= "any"> div.ziji</span>##</div>
try it
#Adjacent element selector
#<style>
div+p
{
background-color:yellow;
}
</style>
# <div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
##</div>
Try it
Normal adjacent element selector
div~p
{
background-color: green;
}
#<div>
<p>Paragraph 1. in div. </p>
<p>Paragraph 2. in div. </p>
</div>
<p>Paragraph 3. Not in a div. </p>
<p>Paragraph 4. Not in a div. </p>
Try it
##
