Is the class name selector new to CSS3?

The class name selector is not new to css3. The class name selector is used to select elements with specified classes. The syntax is ".class{css code;}"; the class name selector is in css3. It has been used before, and it is not new to CSS3. New selectors in CSS3 include attribute selectors, structural pseudo-class selectors, etc.

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

Class name selector

Class selector

Use the class attribute to call the class class

Example:

 <p class="one">类选择器</p>

 .one {
       color: yellow;
        }

The p tag class name here is called one, which is used when CSS adds styles to it. One (his class name) selects it. This is the class selector.

Extended knowledge: css3 new selector

Attribute selector

• input[value] { }(input and With value attribute)

• input[type=text] {} {The value of the input attribute is text and needs to be changed}

• ##div[ class^=icon] { } (Select elements that are first a div and then have a class attribute and the attribute value must start with icon)

• section[class$=data] {} (Select The class name ends with data)

Structure pseudo-class selector

• ul li:first-child { } (select the first child in ul A child li)

• ul li:last-child { } (Select the last child li in ul)

##ul li:nth-child(2) { } (Select the second child li in ul)
ul li:nth-child(6) { } (Select the second child in ul The sixth child is small li)
ul li:nth-child(even/2n) { } (Select all even-numbered children)
ul li:nth-child(odd/2n 1) { } (Select all odd-numbered children)
ol li:nth-child(n ) { } (Start from 0 and add 1 each time. Calculating backward must be n. It cannot be other letters. Select all children
ul li:nth-child(n 5) { } (Select starting from the fifth child)

• ##ul li:nth-child(-n 5) { } (Select starting from the fifth child and counting forward)

• ul li:first-of-type { } (first child)

• ul li:last-of-type { } (last child child)

• ul li:nth-of-type(even) { } (even number of children)

• section div:nth-child( 1) { } (nth-child will arrange all the boxes with serial numbers. When executing, first look at: nth-child(1) and then go back and look at the previous div)

• section div:nth -of-type(1) { } (nth-of-type will arrange the boxes of the specified element by serial number; when executing, first look at the element specified by div and then go back to see: nth-of-type(1) which child)

• Pseudo element selector (not found on the page, often used for font labels) [Same as label selector, weight is 1]

::before inserts content in front of the element (in front of the inside of the parent box)

• ::after inserts content after the element (in front of the inside of the parent box)

• Must have content attribute

• div::after { content: 'I';}

• .tudou:hover::before { } (When our mouse passes over the potato box, the before mask layer inside is displayed)

• Pseudo elements clear floating

• (Learning video sharing:
css video tutorial

,

html video tutorial)

The above is the detailed content of Is the class name selector new to CSS3?. For more information, please follow other related articles on the PHP Chinese website!