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.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:

//html code

##

p.mypred

##Try it

Descendant element selector

##

##try it

Child element selector

##

try it

#Adjacent element selector

#

#

Try it

Normal adjacent element selector

div~p

{

background-color: green;

}

#

Paragraph 3. Not in a div.

Paragraph 4. Not in a div.

Try it

##