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

New features of CSS3

Property selector

Attribute selectors can select elements based on element-specific attributes, eliminating the need for class or ID selectors

selector Introduction to the
E[attr] Select the E element with the attr attribute
E[attr=’val’] Select the E element with an attr attribute whose value is equal to val
E[attr^=’val’] Matches E elements with an attr attribute whose value begins with val
E[attr$=’val’] Matches E elements that have an attribute of attr and whose value ends in val
E[attr*=’val’] Matches E elements that have an attr attribute and whose value contains val

Note: Class selectors, attribute selectors, and pseudo-class selectors all have a weight of 10

Structure pseudo-class selector

Structure pseudo-class selectors mainly select elements based on the structure of the document, and are often used based on child elements within the parent selector

selector Introduction to the
E:first-child Matches E, the first child of the parent element
E:las-child Matches E, the last child of the parent element
E:nth-child(n) Matches the NTH child E of the parent element
E:first-of-type Specifies the first of type E
E:last-of-type Specifies the last of type E
E: the NTH – of – type (n) Specifies the NTH of type E.)

Nth-child (n) selects one or more specific children of a parent element

  • N can be a number, keyword, or formula

    • N If it’s a number, it’s the NTH child, and the numbers start at 1

    • N can be a keyword, such as nth-child(even)/nth-child(odd) to fetch even or odd rows

    • N can be a formula, such as nth-child(n): note that the letter must be n and no other letter must be used. N is incremented from 0 and evaluated later (the 0th element or the number of elements beyond it is ignored), so all child elements are selected

    • Commonly used formulas are as follows:

      The formula The values
      2n An even number
      2n + 1 An odd number
      5n 5 October 15… In multiples of 5
      n+5 Start with the fifth (including the fifth) to the end
      -n+5

Nth-child and nth-of-type are separated

  • Nth-child: Ordinates all boxes (regardless of whether they are of the same type), looking first at nth-Child (n) and then at the preceding label name
  • Nth-of-type: ordinates the specified elements and then looks at the number of children of nth-of-type(n).
<style>
	/* Cannot select element because first child is p and div is 2*/
	section div:nth-child(1) {}/* Select the first div*/
	section div:nth-of-type(1) {}</style>
<section>
	<p></p>
	<div></div>
	<div></div>
</section>
Copy the code

Pseudo element selector

Pseudo-element selectors can simplify HTML structure by helping you create new tag elements using CSS without the need for HTML tags

selector Introduction to the
::before Inserts content before the inside of the element
::after Insert content after the inside of the element
  • Before and after create an element, but are inline elements
  • The newly created element is not found in the document tree, so it is called a pseudo-element
  • Grammar: element: : before {}
  • Before and after must have content attributes
  • Before creates the element before the parent element content, and after inserts the element after the parent element content
  • Pseudo-element selectors have the same weight as tag selectors

Pseudo-element usage scenarios:

  • Use a font icon, such as a drop – down triangle after a text box
  • Mouse suspension box on the cover layer
  • Clear floats with pseudo-elements

The box model

In CSS3, box-sizing can be used to specify the box model. There are two values: content-box and border-box, which change the way to calculate the box size

  1. Box-sizing: content-box Width + padding + border
  2. Box-sizing: border-box size: width

Padding and border should not be larger than width== if box-sizing:border-box is changed to box-sizing:border-box

CSS 3 filters filter

The filter CSS attribute applies graphical effects such as blurring or color cheapness to elements. For example: the filter: the blur (5 px); Blur processing, the larger the value, the more blurred

CSS3 transition (emphasis)

Transition is one of the disruptive features of CSS3. We can add effects to elements as they transform from one style to another without using Flash animations or JavaScript. Transition animation: The gradual transition from one state to another makes our pages look better and more dynamic, although it is not supported in the lower versions of browsers, but does not affect the layout of the page

Transition: Attributes to be transitioned take time when the motion curve begins

  • Properties: The CSS properties you want to change, such as width, height, background color, inside and outside margins. If you want all properties to transition, write all
  • Time spent: unit is second (must be written in unit) e.g. 0.5s
  • Motion curve: The default is ease (can be omitted)
  • When to start: unit is second (must write unit) Delay trigger time can be set. Default is 0s (can be omitted)

== transition formula: who transitions to who, if you want to write multiple attributes separated by commas or use all ==

Transition case: Achieve progress bar effect

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title>Document</title> <style>. height: 15px; border: 1px solid red; border-radius: 7px; padding: 1px; } .bar_in { width: 50%; height: 100%; background-color: red; border-radius: 7px; transition: all .7s; } .bar:hover .bar_in { width: 100%; } </style> </head> <body> <div class="bar"> <div class="bar_in"></div> </div> </body> </html>Copy the code