HTML-css selector

Css selector has three types of HTML (TAG) selector, ID selector, and Class selector.

Css selector: reuse, sub-selector, and group selector

 

HTML (TAG) selector :

Tag {property: value}

 

 

ID selector is actually the same as the function of independent class selector. The difference is that their syntax and usage are different, and it is helpful for Javascript to manipulate HTML elements. Its syntax is as follows:

# IDname {property: value}

Suppose we have the following definition # yelowone {color: yellow}

We can use this to define any tag with the same ID, such

<Span id = "yellowone"> text here </SPAN>

You may think that since ID selector and independent class selector have the same function, why do they both exist. if you know how to position them with CSS-P, you will understand the difference between them. HTML elements with IDS can be manipulated by CSS-P and JavaScript.

 

Some basic style overlays are often used, such as the font color and bold. Three situations may occur simultaneously on the webpage: 1. The font is red; 2. the font is bold; 3. The font is red and bold.
In this case, we only need to define the first two css:
. Red {color: red ;}
. B {font-weight: bold ;}
In the third case, use <div class = "red B"> </div>

 

 

Sub-selector:

It is more important to simplify the code of html files. Therefore, it is very helpful to use sub-selectors in css and make css code easier to understand. For example, the following code:
<Div id = "sub_nav">
<Ul>
<Li> <a href = "#"> Item 1 </a> </li>
<Li> <a href = "#"> Item 2 </a> </li>
<Li> <a href = "#"> Item 3 </a> </li>
</Ul>
</Div>
If div li a has its own style and uses a sub-selector, You can omit the class attributes of li and a in the code to simplify the Code:
# Sub_nav {/* Some styling */}
# Sub_nav li {/* Some styling */}
# Sub_nav a {/* Some styling */}

 

When some element types, classes, and IDs all have common attributes, you can use the group selector to avoid repeated definitions multiple times. This can save a lot of bytes.
For example, to define the font, color, and margin of all titles, you can write as follows:
H1, h2, h3, h4, h5, h6 {
Font-family: "Lucida Grande", Lucida, Arial, Helvetica, sans-serif;
Color: #333;
Margin: 1em 0;
}
If an independent style needs to be defined for some elements during use, you can add a new definition to overwrite the old one, for example:
H1 {font-size: 2em ;}
H2 {font-size: 1.6em ;}
The flexible use of reuse, sub-selector, and group selector can effectively reduce code and greatly increase code readability. Specific applications need to be reflected in the specific compilation process.