Detailed explanation of CSS advanced selectors-HTML Tutorial-php.cn

Detailed explanation of CSS advanced selectors

零下一度

Release： 2017-07-26 18:00:23

Original

1786 people have browsed it

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

Copy after login

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:

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><title>CSS 高级选择器使用</title><style>* {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;}</style></head><body><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li></ul></body></html>

Copy after login

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!