About CSS priority and inheritance issues

CSS priority and inheritance issues

##★CSS conflict, that is, priority The settings of CSS itself can apply multiple styles to the same element at the same time. At this time, conflicts may occur between styles and the effect desired by the user cannot be achieved.

★Priority rules for resolving CSS conflicts: ● Priority of CSS cascading style sheet introduction methods: inline>embedded>linked >Imported
● Among multiple external styles, the style that appears later has a higher priority 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 (using 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 will be raised to the top level by default, and the global style 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 and wrap it layer by layer by adding more selectors of the parent element to narrow the selection range

★Style inheritance: Inheritance refers to our settings The CSS style of the upper level (parent), both the upper level (parent) and the following children (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 style="color:red;">如果你不知道自己<span>想做什么该做什么</span>，那你什么都做不好。</p>

Description: (1) I set the text color of the superior (parent: p) to red, and the child The text color is not set for the level (span), but the text has inheritance properties, so the text content of the child level 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 special weight - 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 attribute:

vertical-align: vertical text alignment

text- decoration: Specifies the decoration added to the text

text-shadow: Text shadow effect

white-space: White-space processing

unicode-bidi: Set the direction of the text

3. Attributes of the box model: 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. Generate 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 attributes1. Font family attributes

font: combined font

font-family: specifies the font family of the element

font-weight: Set the thickness of the font

font-size: Set the size of the font

font-style: Define the style of the font

font- variant: Sets the font in small caps to display the text, which means that all lowercase letters are converted to uppercase, but all letters in small caps have a smaller font size compared to the rest of the text.

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 , Text series attributes other than text-indent and text-align

5. Attributes that block-level elements can inherit

1. text-indent、text-align

The above is the detailed content of About CSS priority and inheritance issues. For more information, please follow other related articles on the PHP Chinese website!