Detailed explanation of CSS advanced selectors

CSS is one of the most powerful tools available to web designers. Using it we can change the interface of a website in a few minutes without changing the page tags. But despite the fact that each of us realizes that it is useful, CSS selectors are far from reaching their potential, and sometimes we tend to use excessive and useless classes, ids, divs, spans, etc. Our HTML is very messy.

The best way to avoid letting these "plagues" spread in your tags and keep them clean and semantic is to use more complex CSS selectors that can target specific elements without using extra class or id, and in this way we can also make our code and style more flexible.

CSS Priority

Before delving into the realm of advanced CSS selectors, it’s important to understand how CSS priorities work so we know how to use our selectors appropriately. selector and avoid wasting a lot of time debugging some problems that can be easily solved if we pay attention to priorities

When we write CSS we must pay attention to some selectors on the cascade (cascade) Higher than other selectors, the selector we write at the end will not necessarily overwrite the styles we wrote earlier on the same element.

So how do you calculate the priority of a specified selector? It's fairly simple if you consider that priorities are expressed as four numbers separated by commas, like: 1, 1, 1, 1 or 0, 2, 0, 1

first number ( a) is usually 0, unless the style attribute is used on the tag;

The second number (b) is the sum of the number of ids on the selector;

The third number ( c) is the sum of other attribute selectors and pseudo-classes used on this selector. This includes class (.example) and attribute selectors (such as li[id=red]);

The fourth number (d) calculates elements (like table, p, div, etc.) and pseudo-elements (Like: first-line, etc.);

Universal selector (*) has 0 priority;

If two selectors have the same priority, the latter one in the style sheet That works.

Let’s look at a few examples so it might be easier to understand:

#sidebar h2 — 0, 1, 0, 1

h2.title — 0, 0 , 1, 1

h2 + p — 0, 0, 0, 2

#sidebar p:first-line — 0, 1, 0, 2

below In the example, the first one will work because it has a higher priority than the second one:

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2

It's important to have at least a basic understanding of how priorities work, but some tools like Firebug, in When we inspect a specific element, it is useful to list all the CSS selectors in order of selector priority to let us know which selector is valid on the specific element.

The following examples mainly explain the use of nth-child, first-child, last-child, nth-of-type, first-of-type and last-of-type.

Sample code:

76c82f278ac045591c9159d381de2c57f2fff6a208c3e290698f287c1c0e7a5393f0f5c25f18dab9d176bd4f6de5d30e03fc48c6e8e131d94ca98b8e034341f4b2386ffb911b14667cb8f0f91ea547a7CSS 高级选择器使用6e916e0f7d1e588d4f442bf645aedb2fc9ccee2e6ea535a969eb3f532ad9fe89* {padding: 0;margin: 0;}/*IE8不支持 IE9支持*/
            li:nth-child(3n+1) {color: red;}/*IE7+以上浏览器均支持*/
            li:first-child {color: blue;}/*IE8不支持 IE9以上支持*/
            li:last-child {color: green;}/*IE8不支持 IE9以上支持*/
            li:nth-of-type(odd) {color: #8D8D8D;}/*IE8不支持 IE9以上支持*/
            li:first-of-type {color: #92B8B1;}/*IE8不支持 IE9以上支持*/
            li:last-of-type {color: #2E2D3C;}531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6Item 1bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 2bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 3bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 4bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 5bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 6bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 7bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b94468936cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

Summary:

Except the first-child selector is compatible with IE7+ and above, all other selectors require IE9 Only the above browsers are compatible .

The above is the detailed content of Detailed explanation of CSS advanced selectors. For more information, please follow other related articles on the PHP Chinese website!