CSS selector details

Time:2022-4-30

Tools and Resource Center
Help developers work more efficiently and provide tools and resources around the whole life cycle of developers
https://developer.aliyun.com/…

1、 CSS selector introduction

brief introduction

CSS selectors are a pattern used to match elements in HTML documents. The associated style rule is applied to elements that match the selector pattern.
Selectors are one of the most important aspects of CSS because they are used to select elements on Web pages so that they can be styled. You can define selectors in a number of ways.

2、 Universal selector

1. Introduction

The universal selector (indicated by * or asterisk) matches each individual element on the page. If there are other conditions on the target element, you can omit the general selector. This selector is often used to remove default margins and padding from elements for quick testing.

2. Cases

* {
    margin: 0;
    padding: 0;
  }

3、 Element type selector

1. Introduction

The element type selector matches each example of an element in the document tree with the corresponding element type name.

2. Cases

p {
color: blue;
  }

4、 ID selector

1. Introduction

The ID selector is used to define style rules for a single or unique element.
The ID selector is defined as a pound sign (#) followed by an ID value.

2. Cases

#p{
    color: red;}

5、 Class selector

1. Introduction

The class selector can be used to select any HTML class attribute. All elements with this class will be formatted according to the defined rules.
Use a full stop (.) The class values that follow define the class selector.

2. Cases

.blue {
color: blue;
  }

6、 Descendant selector

1. Introduction

You can use these selectors when you need to select that one element is a descendant of another. For example, if you want to locate only those anchor points contained in the unordered list, not all anchor elements.

2. Cases

    ul.menu li a {
    text-decoration: none;
    }
    h1 em {
    color: green;
    }

7、 Sub selector

1. Introduction

Child selectors can only be used to select those elements that are direct children of certain elements. A sub selector consists of two or more selectors separated by a greater than sign (i.e. >). For example, you can use these selectors to select the first level of a list element in a nested list with multiple levels.

2. Cases

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

8、 Adjacent sibling selector

1. Introduction

Adjacent sibling selectors allow you to select sibling elements. The syntax of the selector is similar to: E1 + E2, where E2 is the target of the selector.

2. Cases

    h1 + p {
    color: blue;
    font-size: 18px;
    }
    ul.task + p {
    color: #f0f;
    text-indent: 30px;
    }

9、 Universal brother selector

1. Introduction

The generic peer selector is similar to the adjacent peer selectors (E1 + E2), but not too strict. The generic sibling selector consists of two simple selectors separated by the tilde (∼) character. It can be written as follows: E1 ~ E2, where E2 is the target of the selector.

2. Cases

    h1 ∼ p {
    color: blue;
    font-size: 18px;
    }
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
    }

10、 Group selector

1. Introduction

Multiple selectors in a style sheet typically share the same style rule declaration. You can group them into a comma separated list to minimize the code in the stylesheet. It also prevents you from repeating the same style rules over and over again.

2. Cases

h1 {
    font-size: 36px;
    font-weight: normal;
   }
h2 {
    font-size: 28px;
    font-weight: normal;
   }
h3 {
    font-size: 22px;
    font-weight: normal;
   }

This article is transferred from:https://developer.aliyun.com/…