[CSS] Some commonly used CSS selectors

This is the 17th day of my participation in the August Text Challenge.More challenges in August

CSS selectors

First, the base selector

【 Write in front 】

• The CSS has multiple selectors with different weights. The higher the total weight, the higher the display preference.

• ! Portant > inline style > #id >.class > tag > * > Inheritance > default

• Numerical value:

  • Inline style — 1000;
  • ID selector — 100;
  • Class selector — 10;
  • Label selector — 1;
  • Property selector — 10;
  • Pseudo-class selector — 10;
  • Pseudo-element selector — 1;

01. Universal selector

* {style attribute1: Style property value1;
}

Copy the code

02. Label selector

Tag name {style property1: Style property value1;
}

Copy the code

03. Class selector

.class{style attribute name1: Style property value1;
}

Copy the code

04. ID selector

#id{style attribute name1: Style property value1;
}

Copy the code

05. Hierarchy selector

Dynamic pseudo-class selector

Three, anti-selection pseudo class

• Use :not() to match elements other than the specified element/selector

  The :not pseudo class cannot be nested, that is, the parenthesis () class cannot write to other pseudo classes

  You can use more than one at a time, such as div :not(.p):not(.span) : matches all non-p elements and non-span elements under div

/* :not(.not) matches all elements */ whose ul class name is not.not
ul li:not(.not) {background-color: red;
}

Copy the code

Structure pseudo-class selector

Attributes 01.

02. Grammar

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    
</ul>
Copy the code

/*1. Select the first child in ul */
ul li:first-child {
    
}

/* select the last child in ul */
ul li:last-child{}/*3. Select the NTH child in ul */
ul li:nth-child(2) {}/*4. Select an even number of children */ in ul
ul li:nth-child(even) {
    
}

/* select the odd number of children in ul */
ul li:nth-child(odd) {
    
}

/*6. Select all children in ul */
ul li:nth-child(n) {
    
}

/*7. Start from 0, increment by 2, select all even children */ in ul
ul li:nth-child(2n) {
    
}

/*8. Start from 1, increment by 2, select all odd children in ul */
ul li:nth-child(2n+1) {}/*9. Similarly, starting from 0, add 5 each time, select children in ul multiples of 5 */
ul li:nth-child(5n) {
    
}
/*10. Starting from 5, increment by 1 each time, select all children from ul starting from the 5th */
ul li:nth-child( n + 5) {}/*11. Starting from 5, subtract 1 each time to select the first 5 children in ul */
ul li:nth-child( -n + 5) {}Copy the code

/ * * /

/ * * /
ul li:first-of-type{
    
}

/ * * /
ul li:last-of-type{}/ * * /
ul li:nth-of-type{}Copy the code

3. Pay attention to

Nth-child has a defect:

<section>
	<p>001</p>
    <div>002</div>
    <div>003</div>
</section>

Copy the code

section div:nth-child(1) {
    color: red;
}
section div:nth-of-type(1) {color: blue;
}

Copy the code

• Here, nth-Child sorts all the boxes, selects the first child, and then goes back to match the label to be selected, finding that the section’s first child is not a div

  • So this pattern doesn’t work

• Nth-of-type, on the other hand, finds the specified div element and then arranges the found div elements to select the first child

04. Summary

• E:nth-child

  • Sort the selection by all the children in the parent element, find the NTH child first,
  • And then we’ll see if that’s the sumEmatching
  • It’s used a lot in unordered lists

• E:nth-of-type

  • Is to sort the children of the specified type in the parent element,
  • The first matchEAnd then according to theELet’s find the NTH child

Property selector

Attributes 01.

02. Grammar

• Weight = 10

• Grammar:

  /* Select the input tag */ with the value attribute
  input[value] {
      color: red;
  }
  
  /* Select the input tag */ for type=Text
  input[type=text] {
      color: blue;
  }
  
  /* Selects, first, a div with a class attribute whose name begins with the element */ with the same name icon
  div[class^=icon] {
      color: cyan;
  }
  
  /* Select, section, and have a class attribute whose name ends with the same name data */
  section[class$=data] {
      color: yellow;
  }
  
  
  Copy the code

Pseudoelement selectors

Using CSS to create new tag elements, two do not need HTML tags, thus simplifying THE HTML structure

Attributes 01.

02. Note

The element created is an inline element

They are not found in the document tree, so they are called pseudo-elements

Grammar: element: : before {}

Before and after must have content attributes

Pseudo-element selectors have the same weight as label selectors, with the weight =1

Application 03.

• Can be used to clear floats

.clearfix::before..clearfix::after {
    content: ' ';
    /* displays as a block-level element */
    /*display: block; * /
    /* displays as a table, */ on one line
    display: table;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{}Copy the code

I front-end side dish chicken, if there is wrong, please forgive