Detailed explanation of CSS complex selectors and CSS font styles and color attributes

I have learned some basic selectors of CSS before, but today I will introduce the complex selectors of CSS. There are three types of complex selectors:

1. Parent-child (derived) selector

<div class="wrapper">
        <strong class="box">
            234
        </strong>
</div>
123

At this time, to make 234 have color, you need to use the parent-child selector. Although the previous tag selector can make it have color, 123 will also have color, so the parent-child selector for the parent-child relationship is used, so that 234 can be accurately changed in color without changing 123. The method used is parent tag + space + child tag, for example

div strong em{
    background-color:red;
}

In this way, the background color of the position of 234 is red, but the position of 123 does not satisfy the parent-child relationship, so the background of 123 will not turn red; (Of course, it is not necessary to use only tag selectors to connect, class selectors can also be used, which only depends on whether the parent-child relationship is satisfied, and has nothing to do with the connection selector)

2. Direct child element selector

<div>
        123
        <strong>
            456
        </strong>
</div>

Indicates the child element of the direct first-level relationship. For example, here 123 is in an em directly under the div, so this em is called the direct child element of the div. By modifying it in this way, only 123 will change color, while 456 will not change color. The method used is

div > em {
background-color:red;
}

Connected by ">", this means modifying the content inside the em element, which is the direct child element of div.

3. Parallel selector

<div>1</div>
<div class="demo"> 2 </div>
<p class="demo"> 3 </p>

At this time, if you want to change the color of 2 while keeping the others unchanged, it is impossible to do it with tag selectors or attribute selectors (of course, you can use id selectors), so you need a parallel selector, which is to find the modified object through two parallel elements and then modify it. Here’s how to use it:

div.demo{
    background-color:red;
}

Parallel selectors (multiple selection conditions to select one object) have their own uniqueness (unlike other elements) in that two or more selection methods are connected together without spaces.

]

When using complex selectors, you need to consider the weight issue. The weight values ​​of tags in the same row can be directly added. Next are some simple properties of CSS font style and color;

div{
    font-size:30px; <!--font size (height is changed)-->
    font-weight:bold; <!--font thickness (strong tag comes with font-weight attribute) -->
    font-style:italic; <!--em tag css style--> 
    font-family:arial; <!--Font style-->
    color:green; <!--Pure English word style-->
    color:ff00ff; <!--Color code-->
    color:rgb(25,25,25); <!--Color function-->
}

The font attribute values ​​can be found in the dictionary www.css88.com. Color attributes are generally not written in pure English words because they are restrictive (the color is what the word is, there is no milky white, ivory white, etc., it is only white). Color codes and color functions are relatively flexible and have a wide range of changes. The artist will provide the value behind the color function to our front end, and the RGB color table can be searched online.

Today I will introduce these two types of CSS codes. The website just provided is very helpful to us front-end learners. You can click to enter directly. The others will be written later. Please forgive me if they are not well written!

Summarize

The above is the CSS complex selector and CSS font style and color attributes introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!