Can bootstrap change the style?

Change the default style of bootstrap

I haven’t used bootstrap for a long time and have forgotten to modify the style according to my own needs. .

I added a new class as soon as I started, and rewritten the css style to overwrite the original style, but it actually didn't work. Because the priority of the selector is not considered. Some of these questions will be asked during interviews, but I have never been able to connect theory and practice.

My solution is to increase the weight through sub-selectors. Seeing that others also use IDs, I don’t like adding selectors with IDs.

Recall a wave of selectors and their priorities.

1. css selector

1. Tag selector (such as: body, div, p, ul, li)

2. Class Selector (such as: class)

3. ID selector (such as: id)

4. Global selector (such as: * number)

5. Combination selection Selector (such as: .head .head_logo, note that the two selectors are separated by the space bar)

6. Descendant selector (such as: #head .nav ul li Selector from parent set to descendant set)

7. Group selector div, span, img {color:Red} means that tags with the same style are displayed in groups

8. Inherit the selector (such as: div p, note that the two selectors use the space bar Separate)

9. Pseudo-class selector (for example: link style, pseudo-class of a element, 4 different states: link, visited, active, hover.)

10. Attribute selectors for string matching (^ $ * three types, corresponding to the beginning, end, and inclusion respectively)

11. Sub-selector (such as: div>p, with greater than sign>)

12.CSS adjacent sibling selector (such as: h1 p, with plus sign)

Related recommendations: "bootstrap Getting Started Tutorial"

2. Priority

When using the !important rule on a style declaration, the style declaration will override any other declaration in CSS. IE6 does not support this attribute.

The weight of the inline style sheet is up to 1000; that is, adding style to the element tag in HTML, that is, inline style. This method will make the css difficult to manage, so it is not recommended.

The ID selector has a weight of 100; defined by one or more id selectors. For example, the #id{margin:0;}id selector overrides the class selector .classname{margin:3pxl}.

Class The weight of the class selector is 10; it is defined by one or more class selectors, attribute selectors, and pseudo-class selectors. For example, .classname{margin:3px} will cover div{margin:6px;}.

The label selector weight is 1: defined by one or more type selectors. For example, div{marigin:6px;} covers *{margin:10px;}.

Wildcard selector: such as *{marigin:6px;}.

The browser customization or inheritance value is 0.1.

Summary sorting: !important > Inline style > ID selector > Class selector > Tag > Wildcard > Inheritance > Browser default properties

三,! important

Using !important is a bad habit and should be avoided as much as possible, because it breaks the inherent cascading rules in the style sheet and makes debugging and finding bugs more difficult. When two conflicting declarations with the !important rule are applied to the same element, the declaration with greater precedence will be used.

Query experience:

Never use !important on site-wide css.

Use !important only in specific pages that need to cover the entire site or external css (such as referenced ExtJs or YUI).

Never use !important in your plugins.

To optimize consider using style rule priority to solve the problem instead of !important.

The above is the detailed content of Can bootstrap change the style?. For more information, please follow other related articles on the PHP Chinese website!