如何从多个样式表中选择特定的 CSS 选择器

Question

I have 2 stylesheets -1. bootstrap 4.0 2. materialize 4.0

now I want to select specific selectors from both of these but how to override the same selected style from the other.

for example: I want to select the header navigation(navbar) style from bootstrap css but the navbar style in material is also activated at the same time and the output is garbage. So how to disable the same selector from the other stylesheet.

Thanks.

Answer 1

Bootstrap and Materialize classes/markup are/is not same. What i mean is: In materialize for navbar the markup is:

<nav>
  <div class="nav-wrapper">
    .....
  <div/>
</nav>

while in Bootstrap:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  ...
</nav>

So for selecting a specific element it won't be that hard.Either use class name or tag name for accessing the elements.

Answer 2

Firstly, one of the two stylesheets will overwrite the other anyway. The stylesheet which is loaded last, overwrites all previously loaded stylesheets. Example:

Bootstrap: header { color: white; } header { color: white; }

Materialize: header { color: black; } header { color: black; }

If Materialize CSS is loaded last, it will overwrite the CSS of Bootstrap.

In your case, you have to cover all attrubutes from both stylesheets, if you want to reach your goal. Example:

Bootstrap: header { color: white; background: white; } header { color: white; background: white; }

Materialize: header { color: black; font-size: 14px; } header { color: black; font-size: 14px; }

Then you will have to modify all three used attibutes, to reach your goal:

Custom CSS: header { color: blue; background: yellow; font-size: 20px; } header { color: blue; background: yellow; font-size: 20px; }

Answer 3

if you are going to call both CSS files, it might cause overlapping. and last called stylesheet will override the previous CSS styles.

Therefore the best and the easiest way is,

1. Unminify both CSS files first.
2. Then add a unique CSS class to the body if you want ( for more assurance ).
3. Get the required CSS from both of the files and paste them in a new CSS file and make sure to add the class that you used in the body accordingly ( if you gave the body a CSS class).
4. do not call the bootstrap 4.0 2. materialize 4.0 CSS files . just call the newly created CSS style sheet. ( but still, you will have to be careful about the orders of the CSS classes because sometimes classes will get overridden )