CSS selector (details)

Details determine success or failure. The more you focus on details, the more perfect your work will be.

1. Parent and Child selector (Better understanding of combinations)

• The parent-child selector can have multiple levels (but it cannot exceed three layers in actual development)

For example, HTML file snippets:

<! -- Parent and Child selector -->
<Span id = "id1"> This Is A <span> very <a href = "#"> summarized world </a> important </span> News </span>

CSS file:

# Id1 span {
Color: red;
Font-style: italic;
}

# Id1 span a: hover {
Color: green;
Font-size: 16px;
Text-Decoration: none;
}

• The parent-child selector has a strict hierarchical relationship.
• The parent-child selector is not limited to any type selector.

For example, write # ID span a and. S1 # Di span and Div # ID. S2.

2. An element can have both an ID selector and a class selector.

For example:

<SpanClass = "style1" id = "id_news1"> News 1 </span>

. Style1 {
Font-size: 20px;
Background-color: pink;
Color: black;
}

/* Specify the ID of News 1 */

# Id_news1 {
Font-style: italic;
Color: red;
}

3. An element can have at most one ID selector, but multiple class selectors

Because IDs are unique, multiple IDs are not allowed.

CodeFragment:

<SPAN class ="Style1 news3"> News 3 </span>

. Style1 {
Font-size: 20px;
Background-color: pink;/* Conflict */
Color: black;
}

/* Specify a class selector for news 3 */

. News3 {
Text-Decoration: underline;
Font-style: italic;
Color: yellow;
Background-color: Silver;/* conflict is subject to. new3 */
}

Note:When two class selectors conflict, the selector written after the CSS file prevails!

 

4. We can write a copy of the public part of the selector in a CSS file.

For example, CSS has three class selectors:. A,. B, and. C, but they have common attributes such as height, float, and margin. We can write them as follows:

.,. B,. C {/*(Note:Be sure to separate the values with commas (,). If commas (,) are missing, the result will be useless )*/

Height: 196px; Float: left; Margin: 5px 0 0 6px; } Pay attention to these details, and I believe that the content of Div + CSS is easier to understand and grasp.