CSS selector (details)

Source: Internet
Author: User

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.


<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.
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.