Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the abbreviation of CSS attributes and the priority of the selector. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Short Writing of several commonly used CSS attributes

There are many ways to simplify CSS code, but perhaps the most common one is to use a short form of attributes.

There are many CSS attributes with short writing, but the commonly used attributes are nothing more than font, list, background, border, transparency and so on, so here is a summary and memo of the short writing of these attributes.

Font attribute

The font attribute involves several attributes, such as font, font size, line height, and so on, and you can save a lot of code when using short writing. Although not all properties need to be defined, font-size and font-family are generally necessary. Here are the default values for several properties of font:

/ * font attributes and default values * /

Font-variant: normal

Line-height: normal

Font-family: varies

Font-weight: normal

Font-style: normal

Font-size: medium

The above six attributes can be merged into a row. According to the W3C specification, the order of each attribute is as follows:

/ * the order of the attributes of the font * /

Font: [font-style] [font-variant] [font-weight] [font-size] / [line-height] [font-family]

Take a look at the following examples:

Font: 14px Georgia, serif

Font: 14px/1.4 Georgia, serif

Font: italic lighter 14px/1.4 Georgia, serif

Font: italic small-caps lighter 14px/1.4 Georgia, serif

As you can see, a single line of code can replace a piece of code, and it looks more elegant, but it's a little inconvenient to find an attribute alone.

List attribute

List has three properties, which are defined as type, image, and position, and their property names and default values are as follows:

List-style-type: disc

List-style-image: none

List-style-position: outside

List has only three attributes, which are not complicated, but we can still merge these three attributes into one line, according to the W3C specification, as follows:

/ * abbreviated list attribute * /

List-style: [list-style-type] [list-style-position] [list-style-image]

/ * example * /

List-style: none

List-style: disc

List-style: disc outside

List-style: disc outside url (bg.png)

As simple as ever, basically abbreviate the name of the list attribute, and then arrange the values of the attributes in order.

Background attribute

Many stylesheets define the background attribute multiple times, and if you repeat its five attributes each time, the amount of code will increase exponentially. Here are its five attribute names and their default values:

/ * attributes of background and their default values * /

Background-attachment: scroll

Background-color: transparent

Background-position: top left

Background-repeat: repeat

Background-image: none

According to the W3C specification, the five attributes are combined as follows:

/ * abbreviated background attribute * /

Background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position]

/ * example * /

Background: # 777

Background: url (images/bg.png) 0 0

Background: # 777url (images/bg.png) repeat-x 0 0

Background: # 777url (images/bg.png) repeat-x fixed 0 0

For background short writing, there are some slight differences in the use and effect of different tags. For more information, please refer to the official documentation.

Border attribute

The border property is simpler, with three properties and default values as follows:

/ * border attributes and their default values * /

Border-width: none

Border-style: none

Border-color: none

According to the W3C specification, it is briefly written as follows:

/ * abbreviated border attribute * /

Border: [border-width] [border-style] [border-color]

/ * example * /

Border: 1px solid # 111

Border: 2px dotted # 222

Border: 3px dashed # 333

Of course, you can also define different styles for the four borders:

Border-bottom: 1px solid # 777

Border-right: 2px solid # 111

Border-left: 2px solid # 111

Border-top: 1px solid # 777

Priority problem of CSS Selector

CSS means cascading style sheets. The so-called cascading, that is, you can use multiple CSS declarations to act on the same element, such as a CSS to define the color of the text, another CSS to define the size of the text, and finally achieve the effect of style superposition.

To some extent, this feature makes it easier for CSS to define styles, but it also brings some complexity. For example, when multiple styles act on the same element and still act on the same attribute, how does the element end up rendering the style?

Refer to the following example:

P {

Color: black

Background-color: white

}

Div.warning p {

Color: red

}

Div#caution p {

Color: yellow

}

Body#home div p {

Color: white

}

There are four sets of selectors in this stylesheet, all of which eventually point to the p element, and each set of styles has a color attribute. As a result, it is possible that there will be multiple color attributes that will be applied to the same p element. The question is, in what way will the browser eventually render the color of p? Will the defined color overwrite the previously defined color?

This involves the priority of a CSS selector. If there are multiple selectors acting on the same attribute of an element, the browser will calculate the priority of the corresponding selector and eventually apply the style of the highest priority selector to the element.

How to calculate the priority?

The calculation of priority usually follows the following rules:

If an element is set with the style attribute, that is, the inline style is set, then the inline style will have the highest priority and cannot be overridden by any other external style. If the inline style is not set, refer to rule 2 below.

Count the number of ID selectors in the selector. The one with the largest number has the highest priority. If the number of ID selectors is the same, or there is no ID selector at all, refer to rule 3 below.

Count the number of class selectors (such as .test), the number of attribute selectors (such as [type= "submit"]), and the number of pseudo-class selectors (such as hover). Then add up the number, and this group of selectors has the highest priority. If there are always the same number, or both are 0, then refer to rule 4 below.

Count the number of tag selectors (such as p), as well as the number of pseudo-element selectors (such as: first-letter). If you add up, the one with the largest total will have the highest priority.

If the priority is still the same after the above calculation, then follow the rules that the later styles override the ones that appear first.

Looking back at the previous example, the priorities of the four sets of selectors are 0001, 0012, 0102, and 0103, respectively. The priority is digitized because it is easier to compare. According to the law of natural numbers (in fact, they are not natural numbers), 1 < 12 < 102 < 103, so that it is clear at a glance whether their priority is higher or lower.

After reading the above, do you have any further understanding of the abbreviation of CSS attributes and the priority of selectors? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.