What complex CSS selectors are? How complex is the work of selectors

Introduction complex selector

Composite selector is actually very good understanding, saying that white blood just like life, like members of our family, through the label or classproperty or idproperties, look for the corresponding blood of a selector, specific everybody down Kane .
If it is written before beginners can look not very understanding of the author of the basic fundamental selector selector article, what basic CSS selectors are? How basic choice is working , but the use of more basic introduction in which the selectors.

Description compound selected table

Selector	description	For example
Selector Selector 1 2 {attribute: value;}	Multi-element selector. While matching the selector 1 and selector 2, among a plurality of selectors can be separated by commas.	h1,h2,h3{color: red;}
EF {attribute: value;}	Descendant element selector, F match all elements belonging to the element E progeny, between the E and F can be separated by a space.	.box h1{color: red;}
E> F {attribute: value;}	Child element selector to match all elements of the child elements E F	div >h1{color:red;}
E + F {attribute: value;}	Adjacent element selector, matching all keeping up with the sibling elements after the element E F	div+div{color:red;}

Multi-element selectors

Multi-element selectors often used in work which is mainly used to set multiple elements using the same CSSstyle.
Let us enter the multi-element selector practice, practice content such as: the HTMLpage divlabels, h1tags, plabels, text color to red.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多元素选择器</title>
</head>
    <style>
        div,h1,p{
           color: red;
        }
    </style>
<body>
    <div>成功不是打败别人，而是改变自己。</div>
    <h1>成功不是打败别人，而是改变自己。</h1>
    <p>成功不是打败别人，而是改变自己。</p>
</body>

</html>

Results Figure

Note: the role to the list of all the choice of setting the style, classclass selector or idselectors is the same, where they took classthe class selector property value .box, for example, and the rest we can try it yourself.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多元素选择器</title>
</head>
    <style>
        .box,h1,p{
           color: red;
        }
    </style>
<body>
    <div class="box" >成功不是打败别人，而是改变自己。</div>
    <h1>成功不是打败别人，而是改变自己。</h1>
    <p>成功不是打败别人，而是改变自己。</p>
</body>

</html>

Results Figure

Descendant element selector

Let us enter descendant element selector practice, practice content such as: the classattribute value .boxdescendant element text color set to red, to introduce the next structure: classattribute value .boxin a total of three sub-elements, the first h1label, the second h1label, the third divlabel, but the third child element to divthe label there is also a sub-element to h1label or could be interpreted as classattribute value .boxof an element grandchildren.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后代元素选择器</title>
</head>
    <style>
        .box h1{
           color: red;
        }
    </style>
<body>
    <div class="box" >
        <h1>成功不是打败别人，而是改变自己。</h1>
        <h1>微笑是最初的信仰</h1>
        <div>
            <h1>成功不是打败别人，而是改变自己。</h1>
        </div>
    </div>
    
</body>

</html>

Results Figure

Note: descendant selectors can only be included in the classproperty value .boxof all the properties inside.

Child element selector

Let us enter the sub-element selector practice, practice content such as: the classattribute value .boxsub-element of the text color to red, to introduce the next structure: classattribute value .boxin a total of three sub-elements, the first h1label, the second h1tag, divlabel, but the third child element to divthe label there is also a sub-element to h1label or could be interpreted as classattribute value .boxof an element grandchildren.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子元素选择器</title>
</head>
    <style>
        .box > h1{
           color: red;
        }
    </style>
<body>
    <div class="box" >
        <h1>成功不是打败别人，而是改变自己。</h1>
        <h1>微笑是最初的信仰</h1>
        <div>
            <h1>成功不是打败别人，而是改变自己。</h1>
        </div>
    </div>

</body>

</html>

Results Figure

Note: sub-element selectors and descendant selectors is not to like elements, the sub-element selector is the classattribute value .boxsub-elements set CSSthe style, descendant element selector is the classattribute value .boxall the elements set in CSSstyle, it is now should understand why the divlabel of h1the reasons the label text color is not rendered it, because divtag h1label is grandchildren.

Neighbors selector

Neighbors selector must meet the following criteria will match.
EElements and Felement must be a sibling relationship, meaning that the same generation relations.
EElements and Felement must be must be next, it is among the barrier element can not have any.
Required Felement must be in Ethe following elements.
Let us enter the adjacent element selector practice, practice content such as: The HTMLpage classproperty value .boxneighboring elements of the text color to red.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相邻元素选择器</title>
</head>
    <style>
        .box + h1{
           color: red;
        }
    </style>
<body>
    <h1>我在上面学习</h1>
    <div class="box" >
        <h1>成功不是打败别人，而是改变自己。</h1>
    </div>
    <h1>我在下面学习</h1>
</body>
</html>

Results Figure

Note: We must pay attention to more than 2one must be 1a certain rules, otherwise the CSSstyle will not be rendered.

What complex CSS selectors are? How complex is the work of selectors

Introduction complex selector

Description compound selected table

Multi-element selectors

Descendant element selector

Child element selector

Neighbors selector

Guess you like