Wildcard selector

In CSS, an asterisk (*) is a wildcard selector. It can match any type of HTML element. In conjunction with other simple selectors, omitting the wildcard selector has the same effect. For example,*. Warning and. Warning have the same effect.

This selector is not recommended because it is one of the lowest-performing CSS selectors.

* {font-size:18px} // Special tags * can be handled in conjunction with attribute selectors[displayNone]{display:none}
Copy the code

Element selector

CSS element selectors (also known as type selectors) match elements by node node names. Therefore, when used alone, when looking for elements of a particular type, the element selector matches all elements of that type in the document.

span{font-size:14px}
Copy the code

Class selectors

In an HTML document, the CSS class selector matches elements based on the contents of their class attributes. A class attribute is defined as a whitespace separated list of items. For this style declaration to take effect, one of the items in this set of class names must exactly match the class name in the class selector.

The class selector is probably the one we use most in our real business

.active{color:red} // Can be combined with element selectors (more common)span.active{color:red} // Can also be written like this, the same effectspan[class="active"]{color:red} // Or so.active.blueColor{color:blue} // You can also add pseudo-classes.active.blueColor:hover{color:pink}
Copy the code

The ID selector

In an HTML document, the CSS ID selector matches elements based on the contents of the element’s ID attribute. The element ID attribute name must match exactly the ID attribute name in the selector for this style declaration to take effect.

#test{font-size:14px} // Element selectors combine with id selectorsspan#test{color:red} // with the property selectorspan[id="test"]{color:red}
Copy the code

Property selector

CSS property selectors match elements with existing property names or property values.

/* The  element with the title attribute */ exists
a[title] {
  color: purple;
}

/* The  element */ where the href attribute exists and the value matches "https://example.org"
a[href="https://example.org"] {
  color: green;
}

/* The  element */ where the href attribute exists and the attribute value contains "example"
a[href*="example"] {
  font-size: 2em;
}

/*  element */ that has an href attribute and whose value ends with ".org"
a[href$=".org"] {
  font-style: italic;
}

/* The class attribute exists and the attribute value contains the  element of "logo" separated by Spaces */
a[class~="logo"] {
  padding: 2px;
}
Copy the code

Syntax description

  • [attr]

    • Represents withattrThe element of the named attribute.

  • [attr=value]

    • Represents withattrNamed property, and the property value isvalueThe element.

  • [attr~=value]

    • Represents withattrThe element of the named property, and the property is a whitespace separated list of values, with at least one of the valuesvalue.

  • [attr|=value]

    • Represents withattrThe element of a named attribute that is either “value” or prefixed with “value-” (“-“Begins with a hyphen (U+002D) encoded in Unicode. The typical application scenario is to match the language shorthand code (for example, zh-cn, zh-TW can use zh as value).

  • [attr^=value]

    • Represents withattrNamed property, and the property value isvalue The opening element.

  • [attr$=value]

    • Represents withattrNamed property, and the property value isvalue The ending element.

  • [attr*=value]

    • Represents withattrNamed property, and the property value contains at least onevalue The value of the elements

Selector list

The CSS selector list (,), often called a union selector or union combinator, selects all nodes that can be selected by any of the selectors in the list.

// We can use it to initialize the stylebody.p.h1.h2{margin:0} // Multi-line grouping is also possiblebody.p.h1{
    margin:0
}
Copy the code

Descendant selector

A descendant combinator (usually represented by a single space () character) combines two selectors, and they are selected if the element matched by the second selector has an ancestor (parent, parent’s parent, parent’s parent, parent’s parent, etc.) that matches the first selector. A selector that utilizes a descendant combinator is called a descendant selector.

This is also a common selector, especially in CSS preprocessing languages (less, sass).

/ / selectbodyUnder all thespan
body span{color: red} / / optionsspanUnder all theiThe labelspan i{color:pink} // Combine class selectorsspan.active a{color:yellow}
Copy the code

Direct descendant selector

When the > selector is used to separate two elements, it only matches those second elements that are direct descendants (children) of the first element. By contrast, when two elements are linked by a descendant selector, it matches all existing second elements that have the first element as an ancestor (but not necessarily a parent), no matter how many times it “jumps” in the DOM.

/ / only choicebodyThe direct descendant of isspanThe elements of thebody>span{color:red}
Copy the code

Universal sibling selector

Sibling selectors do not need to be adjacent to each other, but only at the same level. A~B selects all elements of the same level after A element.

// Will choose withspanBut at the same level inspanAll the restaTags (not includedspanThe label)span ~ a{color:red}
Copy the code

Adjacent sibling selectors

The adjacent sibling selector (+) is between two selectors, and the second element is selected when the second element follows the first and both elements are children of the same parent.

Span +a{color:pink}Copy the code

Pseudo selectors (pseudo classes)

It’s a bit too much here, let’s have another chapter