CSS priority and inheritance issues

CSS priority and inheritance issues

★CSS conflict, that is, priority
The setting of CSS itself can apply multiple styles to the same element at the same time, and conflicts between styles may occur at this time. And cannot achieve the effect that users want.
★Priority rules for resolving CSS conflicts:
● Priority of CSS cascading style sheet introduction methods: Inline > Embedded > Linked > Imported
● In multiple external In the style, the priority of the style that appears later is higher than the style that appears first, which is commonly known as override
● In the style, the priority of the selector: ID style>class style>mark style (with weight metaphor : The weight of id is 100, the weight of class is 10, and the weight of tag name is 1)
● Add an !important after the style, for example: .abc {background:#fff !improtant;} The priority of this style The level will be raised to the top level by default, and global styles will not be able to affect it.
✪Note: !important should be written in front of the semicolon
Priority:
Proximity principle (the closer to the code, the higher the priority)
The smaller the selection range, the higher the priority. Refine the CSS, wrap it layer by layer by adding more selectors of the parent element, and narrow the selection range

★Style inheritance:
Inheritance means that we set the CSS style of the superior (parent), and the superior (parent) level) and the children below (subordinates) have this attribute. Generally, only text text has inherited properties, such as text size, text boldness, text color, font, etc. But note that some CSS styles are not inherited. For example, border: 1px solid red;

demo:

<p>如果你不知道自己<span>想做什么该做什么</span>，那你什么都做不好。</p>

Description: (1) I set the text of the superior (parent: p) The color is red, and the text color of the child (span) is not set, but the text has inheritance properties, so the child text content is still red.
(2) If after setting the parent text color style, its multiple children will be the same as the parent due to inheritance. If the color of some children does not want to be the same as the parent, then you only need to set the required color for the corresponding child. Can.
✪Note: There is another weight that is special - inheritance also has a weight but it is very low. Some literature suggests that it is only 0.1, so it can be understood that inheritance has the lowest weight.

Benefits of inheritance: You can only set the upper-level CSS style sheet properties, and the children (subordinates) do not need to set them. They all have this CSS property, which can reduce CSS code and facilitate maintenance.

★Attributes that can and cannot be inherited in CSS
1. Properties without inheritance

1. display: Specifies the type of box that the element should generate

2. Text attributes:

vertical-align: Vertical text alignment

text-decoration: Specifies the decoration added to the text

text-shadow: Text shadow effect

white-space: processing of whitespace characters

unicode-bidi: setting the direction of text

3. Box model attributes: width, height, margin, margin-top, margin- right, margin-bottom, margin-left, border, border-style, border-top-style, border-right-style, border-bottom-style, border-left-style, border-width, border-top-width, border-right-right, border-bottom-width, border-left-width, border-color, border-top-color, border-right-color, border-bottom-color, border-left-color, border-top, border-right, border-bottom, border-left, padding, padding-top, padding-right, padding-bottom, padding-left

4, background attributes: background, background-color, background-image, background-repeat, background-position, background-attachment

5, positioning attributes: float, clear, position, top, right, bottom, left, min-width, min-height, max-width, max- height, overflow, clip, z-index

6, generated content attributes: content, counter-reset, counter-increment

7, outline style attributes: outline-style, outline-width, outline-color, outline

8, page style attributes: size, page-break-before, page-break-after

9, sound style attributes: pause-before, pause-after, pause, cue-before, cue-after, cue, play-during

2. Inherited properties

1. Font series properties

font: combined font

font-family: Specify the font family of the element

font-weight: Set the thickness of the font

font-size: Set the size of the font

font- style: Defines the style of the font

font-variant: Sets the font in small caps to display the text, this means that all lowercase letters will be converted to uppercase, but all letters using small caps font will be different from the rest of the text Its font size is smaller compared to .

font-stretch: Stretch and transform the current font-family. Not supported by all major browsers.

font-size-adjust: Specify an aspect value for an element so that the x-height of the preferred font is maintained.

2. Text series attributes

text-indent: text indent

text-align: text horizontal alignment

line-height: line height

Word-spacing: Increase or decrease the space between words (i.e. word spacing)

letter-spacing: Increase or decrease the space between characters (character spacing)

text- transform: Control text case

direction: Specify the writing direction of text

color: Text color

3. Element visibility: visibility

4. Table layout attributes: caption-side, border-collapse, border-spacing, empty-cells, table-layout

5, list Layout attributes: list-style-type, list-style-image, list-style-position, list-style

6, generated content attributes: quotes

7, cursor attributes: cursor

8. Page style attributes: page, page-break-inside, windows, orphans

9. Sound style attributes: speak, speak-punctuation, speak-numeral, speak-header, speech- rate, volume, voice-family, pitch, pitch-range, stress, richness,, azimuth, elevation

3. Attributes that can be inherited by all elements

1. Element visibility: visibility

2. Cursor attribute: cursor

4. Attributes that can be inherited by inline elements

1. Font family attributes

2.Except text-indent. Text series attributes other than text-align

5. Attributes that can be inherited by block-level elements

1. text-indent, text-align

More CSS is preferred For related articles on level and inheritance issues, please pay attention to the PHP Chinese website!