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

The selector The name of the describe
E F Descendant selector Delimited by [space], match those in the corresponding label of the E elementAll descendant labelsF (regardless of the number of nested layers)
E>F Parent and child selector Delimit with [>] and match the nested tags of E elementThe first layer of child tagsF
E+F Adjacent sibling selectors Delimited by [+], matching the same level as the E elementImmediately following the next tag
E~F Subsequent sibling selector Separated by [~],Under the same parent, matches with the E elementAt the same levelAll F elements after E

Dynamic pseudo-class selector

The selector describe
E:link Sets the style of hyperlink A before it is accessed
E:visited Sets the style of hyperlink A when its link address has been accessed
E:hover Sets the style of the element when it is hovered over
E:active Sets the style of the element when activated by the user (events that occur between mouse click and release)
E:focus Sets the element in the input focus (the element’sonfocusWhen the event occurs

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.

The selector describe
E:first-child Select the first child of the parent element, E
E:last-child Select E, the last child of the parent element
E:nth-child(n) Select E, the [n] child of the parent element

** If the NTH child is not E, it is an invalid selector

** Can also be calculated with [n] :

For example, [2n] indicates that 2,4, and 6 digits are selected, that is, even digits

[2n+1] represents the selection of elements with 1,3, and 5 digits, that is, elements with odd digits

[3n] represents the element that selects a multiple of 3

[-n+5] selects the top five elements
E:nth-child(even) E:nth-child(2n)
E:nth-child(odd) E:nth-child(2n+1)
————————– ————————————————————————————
E:first-of-type Select the first child element of type E in the parent element
E:last-of-type Select the parent element whose last child element is of type E
E:nth-of-type(n) Select the [n] child element of type E in the parent element
————————– ————————————————————————————
E:empty Select element E, which has no child elements and does not contain any text nodes
E:only-of-type Select E, the unique child of all the children of the parent element
E:only-child Select E, the only child of the parent element
E:root Select the root element of the document that matches element E.

In AN HTML document, the root element is always HTML, and the selector matches what the HTML type selector matches

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.

The selector describe
E[attr] Select the E element with the attr attribute
E[attr="val"] Select the E element that has the [attr] attribute and the value of the attribute is [val]
E[attr^="val"] Select the E element that has an attr attribute and begins with val
E[attr$="val"] Select E elements that have an attr attribute and end with val
E[attr*="val"] Select the E element that has the [attr] attribute and whose value contains [val]
E[attr~="val"] Select a list of words with the attr attribute separated by space.

The list contains the E element of [val] (e.g. List val)
E[attr|="val"] Select the E element that has the [attr] attribute and the attribute value is a string (e.g., val-list) that begins with [val] and is separated by a hyphen [-]

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.

selector Introduction to the
E::before The elementInterior frontInsert content
E::after The elementBack of the interiorInsert content
E::first-letter Sets the value within the elementThe first characterThe style of the
E::first-line Sets the value within the elementThe first lineThe style of the
E::placeholder Set elementText placeholdersThe style of the
E::selection Set the elementWhen the selectedThe style of the

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