This is the 27th day of my participation in the August Genwen Challenge.More challenges in August

preface

Hello everyone, today we are going to talk about CSS3 and CSS3 selector, big god please detour, because this article is excerpted from my notes when I just started

CSS 3 introduces

As Darwinian evolution, CSS3 is the “evolution” version of CSS2. On the basis of CSS2, many features are enhanced or added to make up for the shortcomings of CSS2, making Web development more efficient and convenient.

CSS 3 status quo

Some browsers on the PC do not support private prefixes

Mobile support is better than PC

On the mend

Wide application, high efficiency and strong realization

About private prefixes:

When the standard is not yet determined, some browsers have implemented some functions according to the initial draft, in order to be compatible with the standard later determined, so each browser uses its own private prefix and standard to distinguish, when the standard is established, the major browsers will gradually support the new CSS3 attributes without prefix

There are a lot of private prefixes that can be left out, but for compatibility with older browsers, you can continue to use private prefixes and the standard approach.

In general, mobile updates iterate quickly and CSS3 support is good, so we don’t need to write too many prefixes on mobile because both ios and Android browsers on mobile are webKit kernel.

The private prefixes are as follows:

For Google and Apple browsers: - WebKit - Firefox: - Moz - IE: -ms- Auburn: - O -Copy the code

For example, if we want to achieve a box rotation of 45deg with a private prefix, we should read:

div { width: 200px; height: 200px; background-color: pink; margin: 100px auto; /* Webkit -*/ -webkit-transform: rotate(45deg); Rotate (0) rotate(0) rotate(0) rotate(0); /* Internet Explorer prefix -ms-*/ -ms-transform: rotate(45deg); /* Opera prefix -o-*/ -o-transform: rotate(45deg); /* transform: rotate(45deg); }Copy the code

CSS 3 selector

With basic CSS3 understood, let’s move on to the selector in CSS3

Relational selector

Property selector

Pseudo class selector

Syntax for pseudo-class selectors: all with a colon:

Child Series (emphasis)

With these selectors in mind, let’s think about the following questions to deepen our memory:

1. First column turns red 2. Last column turns red 3. Penultimate column turns redCopy the code

Other pseudo-class selectors

The oftype series is similar to the child series, but uses the subscript of the corresponding type in the child element. Check: Disabled: Disabled :enabled: available :not(selector) Select elements that do not match the selector :target gets the currently active cable connectionCopy the code

Pseudo element selector

Before and after

Note: //1. The content attribute must be specified. Text can be written to the Content attribute, but it is usually an empty string. Display :block or position:absolute E::before: Add a content to the front of the element's child node. E::after: Adds a content at the end of the element's child node.Copy the code
On single and double colons:

The difference between :before and :before is as follows:

:before is the way to write pseudo-elements in CSS2, but in CSS3 it is strictly required that pseudo-classes use single colons and pseudo-elements use double colons. To be compatible with older code, the browser automatically converts ::before to ::before when it encounters :before.

If you need to be compatible with older browsers, such as IE678, use :before

If you do not need older compatible browsers, such as mobile, use ::before

Other pseudo-element selectors

::first-letter: retrieves the first character of the element ::first-line: retrieves the first line of the element :: Selection: retrieves the selected elementCopy the code

Afterword.

Hello, I am the South Pole ice cube, a technology and appearance level proportional to the front-end engineer, advocating to solve front-end problems, I hope my blog has helped you.

Pay attention to me and walk together on the front road. Hey ~ 😛