How to replace styles in bootstrap

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 (eg: class)

3. ID selector (eg: id)

4. Global selector (eg: * number)

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

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

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

8. Inherit selector (such as: div p, note that the two selectors are separated by the space bar)

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

10. Attribute selectors for string matching (^ $ *Three types, corresponding to start, 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 a plus sign)

Related recommendations: "bootstrap Getting Started Tutorial"

2. Priority

When When you use the !important rule on a style declaration, the style declaration overrides any other declarations in CSS. IE6 does not support this attribute

The maximum weight of the inline style sheet is 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 will override the class selector.classname{margin:3pxl}

Class class selector has a weight of 10; it is composed of one or more class selectors, Attribute selector and pseudo-class selector definitions. 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;} overrides *{margin:10px;}

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

Browser customization or inheritance weight value is 0.1

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

3. ! 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

Only when you need to cover the whole site or external css (such as referenced ExtJs or YUI ) in a specific page using !important

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 How to replace styles in bootstrap. For more information, please follow other related articles on the PHP Chinese website!