Html5 knowledge point: New selector in CSS3, html5css3

Html5 knowledge point: New selector in CSS3, html5css3

Css3 selector is an innovation in modification based on css2.0. It adds some pseudo-class selectors of UI element states, structure pseudo-class selectors, and attribute selectors. Many of the new selectors in Css3 are powerful, and their appearance brings a lot of convenience to our front-end.

I,Make our webpage code more concise and clear in StructureThe clear structure will be conducive to SEO (search engine) optimization. The code is concise and indicates that the Code will be less, the code will be smaller with fewer files, and the network bandwidth will be less occupied, the webpage loading speed will be faster and the user experience will be better. For example, first-child is used to select the first child element of an element. For example, if you want "1" in the list to have a distinctive style, we can use: first-child:

Li: first-child {background: # ff0 ;}

Before this selector appears, we need to add a different class name to the first li, for example, "first", and then apply different styles to him.

Li. first {background: # ff0 ;}

In fact, the two final effects are the same, but we need to add an additional class name in html, which is not required in the previous one:

 

 

Ii. Exemption from naming troublesBefore using css2.0 to write a website, we need to add the id or class name to the tag to distinguish different labels. The name of the id or class name must start with an English letter, numbers, letters, underscores, hyphens, and special characters can be connected to the backend. We recommend that you use English letters, underscores, and connections as much as possible. Words must be meaningful, and names must reflect usage and related information, it should also be brief. This requirement is difficult for most of us who are not specialized in English and are not good at English. If the name is not very standard, it is easy to think that you are not professional enough. The unprofessional naming will also cause unnecessary troubles for later development and maintenance. The emergence of structure pseudo-class selectors in css3 brings us benefits, we can easily control a tag without adding a class or id name. For example, nth-child () can select one or more specific child elements, you can select as follows:

: Nth-child (length);/* the parameter is a specific number */

: Nth-child (n);/* the parameter is n, and n is calculated from 0 */

: Nth-child (n * length)/* n multiple selection, n starts from 0 */

: Nth-child (n + length);/* select an element greater than length */

: Nth-child (n * length + 1);/* Indicates selecting one of the following values */

// The length above is an integer

: Nth-child () can define its value (the value can be an integer or expression), as shown above, used to select a specific sub-element, for example: nth-child (3): select the third child element under an element (here 3 can be the number you need), for example, I need to select the third li element in the list, so we can directly use it like this:

Li: nth-child (3) {background: # f00 ;}

 

 

: Nth-child (n), where n is a simple expression, so "n" is calculated from "0", and I do not know when it will end, if you use this method in actual applications, all child elements will be selected. For example, in our demo, you use ": nth-child (n)" In li) ", all" li "will be selected, such:

Li: nth-child (n) {background: # ff0;} equals to li {background: # ff0 ;}

He actually calculated it like this.

N = 0 -- no element selected

N = 1 -- select the first li,

N = 2 -- "select the second li, and then push it in the same way. In this way, all li

See the results:

 

Please note that the "n" here can only be "n" and cannot be replaced by other letters, otherwise it will have no effect.

There is no need to start a name. For our front-end staff, we do not need to think about various names, whether they comply with naming conventions, whether they are conducive to SEO optimization, and so on. You do not need to consider your own English level.

III,Avoid style conflicts and improve work efficiency.We often encounter conflicts when using id or class names. For example, if you are used to naming the top div as top, your colleagues may not see your document, he also habitually starts a top name, so his style is written behind, and your style will be overwritten by his style at the front, because the parsing order of our css style sheets is effective before and after the clustering. At this time, when you find that the style you have written is incorrect, you will need to spend time adjusting it. This will affect our work efficiency due to the waste of work time caused by conflicts. Without a name, there will be no conflict, and the work efficiency will naturally increase.

Although many Browsers Do not support css3 selectors, such as ie6 ~ 8. But with the development of time and the slow sunset of IE browser, the arrival of css3 is an inevitable trend for future development. Therefore, we still need to be familiar with and understand the various selectors added by css3, prepare for the coming of the css3 era.