CSS selector summary

priority

! Important > Interline style > ID > class, attribute pseudo-class > wildcard

/ *! important */
background-color: skyblue ! important;
/* Inline style */
<div class="out" style="background-color: yellow;" >/* Wildcard (asterisk) */
* { color : red; }
Copy the code

! Important raises the priority to the highest, so use it with caution. Here are some precautions:

  • Always prioritize using style rule priorities to solve problems rather than! Important;
  • Use only on specific pages where you need to override site-wide or external CSS! Important;
  • Never use it in site-wide CSS code! important;

Base selector

  • Tag selectors: div, A, H1
  • Class selector:.checked
  • ID picker: #picker
  • Wildcard selector: *

A pseudo-class selector for the tag

The selector The sample annotation
:link a:link Mouse does not put up, do not do any operation
:visited a:visited Links that have been visited
:active a:active Changes when the mouse is pressed down on the link
:hover a:hover Changes when the mouse is placed on it

Target =”_self”/”_blank

<a href="http://www.w3school.com.cn" target="_blank">W3Sschool</a> 
// Open a new page jump
<a href="http://www.w3school.com.cn" target="_self">W3Sschool</a>  
// Go to this page
Copy the code

Subclass selector

The commonly used

The selector The sample annotation
ele > ele div > p Child selector that selects p elements whose parent is a div element
ele + ele div+p The adjacent sibling selector selects a p element immediately after the div element, after which p is ignored
ele ele div p Descendant selector that selects all p elements under the div element
ele ~ ele div ~ p The normal sibling selector selects all p elements after the div element

Property selector

It’s kind of like a regular way

The selector The sample annotation
[attr^=val] a[src^=https] Elements whose attribute begins with the specified value, select elements whose SRC attribute value begins with HTTPS
[attr=val] [target=_blank] Element whose attribute is equal to the specified value. Select the element that has the target attribute and whose value is _blank
[attr$=val] a[src$=.pdf] For elements whose attribute ends in the specified value, select elements whose SRC attribute value ends in.pdf
[attr*=val] a[src*=demo] Property contains the element with the specified value, and select the value of the SRC property to contain the element of the substring demo

Structure pseudo-class selector

The selector The sample annotation
:first-letter p:first-letter Element, select the first letter of each p element
:first-line p:first-line Element, select the first row of each p element
:nth-child(n) p:nth-child(2) Element specified inOrder indexFor each p element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Element specified inInverted indexThe element that selects each p element is the penultimate child of its parent
:first-child p:first-child For the first element of the element, select the element whose p element is the first child of its parent
:last-child p:last-child Element, and each p element is the last child of its parent
:only-child p:only-child The parent element has only elements of that element, and each p element is selected to be the only child of its parent
:nth-of-type(n) p:nth-of-type(2) Specified in the tagOrder indexFor each p element that is the parent of the second P element
:nth-last-of-type(n) p:first-letter Specified in the tagInverted indexThe tag for each p element is the penultimate p element of its parent
:first-of-type p:first-of-type For each p element that is the first p element of its parent
:last-of-type p:last-of-type Tags are tail tags, and each p element selected is the last P element of its parent
:only-of-type p:only-of-type The parent element has only the tag of that tag, and each p element selected is the only P element of its parent

: nTH-last-of type can be used for parity selection

  • Internet Explorer 8 and earlier browsers do not support the nTH-last-of-type () selector
/* HTML code */
<style>
    p:nth-last-of-type(odd) {
        background: #96b97d;
    }
    p:nth-last-of-type(even) {
        background: #00F5A0
    }
</style>
<body>
    <p>P1</p>
    <p>P2</p>
    <p>P3</p>
    <p>P4</p>
</body>
Copy the code

Effect:

And then to the end.

Mainly give yourself a summary, the content is also relatively simple