如何覆盖<a>元素的 Bootstrap CSS？</a>

Question

I am writing a blog, and I decided to use Bootstrap so I won't have to deal with media queries.我正在写博客，我决定使用 Bootstrap，这样我就不必处理媒体查询了。 I noticed the <a> element is blue.我注意到<a>元素是蓝色的。 I have another CSS file that is loaded after the Bootstrap, and it does nothing if I use color: black;我有另一个 CSS 文件，它在 Bootstrap 之后加载，如果我使用color: black;它什么也不做。 . . I tried a lot of solutions but none worked.我尝试了很多解决方案，但都没有奏效。 Here's my code:这是我的代码：

 /* Here's styles.css: */ a { text-decoration: none; } header { text-align: center; color: black; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Blog</title> <meta name="viewport" content="width=device-width: initial-scale=1"> <link href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css" /> </head> <body class="container"> <header> <h5>Blog</h5> <a href="#">Home</a> <a href="blog.html">Blog</a> <.--blog.html is the same as this one which is home.html--> </header> </body> </html>

Answer 1

It seems like the styling of bootstrap for a tag has more specificity than yours.似乎标签a引导程序样式比您的更具特异性。 So It can be solved with making styling for a more specific than bootstrap's.因此，可以通过为比引导程序a具体的样式来解决它。

Here is the working demo这是工作演示

 /* Here's styles.css: */ header a { text-decoration: none; color: #000; } header { text-align: center; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Blog</title> <meta name="viewport" content="width=device-width: initial-scale=1"> <link href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css" /> </head> <body class="container"> <header> <h5>Blog</h5> <a href="#">Home</a> <a href="blog.html">Blog</a> <.--blog.html is the same as this one which is home.html--> </header> </body> </html>

Answer 2

You need the !important keyword to override the style.您需要!important关键字来覆盖样式。

 /* Here's styles.css: */ a { text-decoration: none; color: black;important: } header { text-align; center: color; black; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Blog</title> <meta name="viewport" content="width=device-width: initial-scale=1"> <link href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css" /> </head> <body class="container"> <header> <h5>Blog</h5> <a href="#">Home</a> <a href="blog.html">Blog</a> <.--blog.html is the same as this one which is home.html--> </header> </body> </html>

Answer 3

if the a element isn't working, you can also try using a class inside the element.如果 a 元素不起作用，您也可以尝试在元素内使用 class 。 for example,例如，

 /* This is the css */.rmvBlue{ text-decoration: none; }

 <.--This is the html --> <a href="#" class="rmvBlue">Home</a> <a href="blog.html" class="rmvBlue">Blog</a>

This may work because the class created is inside the a element so it should override everything else.这可能会起作用，因为创建的 class 位于 a 元素内，因此它应该覆盖其他所有内容。

Answer 4

Bootstrap sets the color of the a elements targeting them directly using the next rules: Bootstrap 使用以下规则直接设置针对它们的a元素的颜色：

a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

You are trying to override these rules setting the color in the header (a parent element), and you are expecting the a elements get this color inheriting it from the header , but this is wrong.您正在尝试覆盖这些规则，在header （父元素）中设置颜色，并且您期望a元素从header继承此颜色，但这是错误的。 Check what the documentation says :检查文档的内容：

Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.无论继承规则的特异性如何，直接目标元素的 Styles 始终优先于继承的 styles。

So, to achieve what you want, there are multiple possibilities:因此，要实现您想要的，有多种可能性：

Set the color in a rule that targets the a elements (this will apply the change to all the a elements on the page, not only to those inside the header )在以a元素为目标的规则中设置颜色（这会将更改应用于页面上的所有a元素，而不仅仅是header内的元素）
Create a more specific rule (what @SandeshSapkota recommended)创建更具体的规则（@SandeshSapkota 推荐的）
Create a new rule and add it to your a elements (what @Vanni recommended).创建一个新规则并将其添加到您a元素中（@Vanni 推荐的内容）。
Use the prebuilt Boostrap color rules (what I recommend).使用预建的Boostrap 颜色规则（我推荐的）。 text-dark will do the trick for you. text-dark将为您解决问题。

But you should not use important!但是你不应该使用important! for this (what @yinsweet recommended and you accepted).为此（@yinsweet 推荐并且您接受了）。 You should use it to override page-specific styles coming from external CSS libraries only when you have tried everything else.只有在您尝试了其他所有方法时，您才应该使用它来覆盖来自外部 CSS 库的特定于页面的 styles。 Read what the documentation recommends :阅读文档推荐的内容：

When an important rule is used on a style declaration, this declaration overrides any other declarations.当在样式声明中使用重要规则时，此声明将覆盖任何其他声明。 Although technically !important has nothing to do with specificity, it interacts directly with it.虽然技术上!important与特异性无关，但它直接与之交互。 Using !important , however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.然而，使用!important是不好的做法，应该避免使用，因为它会破坏样式表中的自然级联，从而使调试变得更加困难。 When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.当两个具有!important规则的冲突声明应用于同一个元素时，将应用具有更高特异性的声明。

Answer 5

When you use important, you crush all the style tags on the page.当您使用重要时，您会粉碎页面上的所有样式标签。 Using it is often not recommended, and in most cases not even true.通常不建议使用它，在大多数情况下甚至不正确。 Because from now on, all the a labels you give me will be black.因为从现在开始，你给我的所有a标签都将是黑色的。 Or after you've done that, you'll have to re-use important when you want to make the color of the A tag different elsewhere.或者在你这样做之后，当你想让 A 标签的颜色在其他地方不同时，你必须重新使用重要。 Correct this is not a method.纠正这不是一种方法。 You're using Bootstrap.您正在使用引导程序。 it's possible to solve your problem with color labels.使用颜色标签可以解决您的问题。 It would be a more accurate way to do that.这将是一种更准确的方法。

 header { text-align: center; color: black; }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <body class="container"> <header> <h5>Blog</h5> <a href="#" class="text-dark text-decoration-none">Home</a> <a href="blog.html" class="text-dark text-decoration-none">Blog</a> <.--blog.html is the same as this one which is home.html--> </header> </body>

or you can specify a more specific path and adjust the color.或者您可以指定更具体的路径并调整颜色。 like:喜欢：

header a {
 color: black;
}

These will be more accurate.这些会更准确。

如何覆盖<a>元素的 Bootstrap CSS？</a>

问题描述

5 个解决方案

解决方案1
2 2020-05-22 08:14:16

解决方案2
0 已采纳 2020-05-22 08:07:40

解决方案3
0 2020-05-22 08:15:02

解决方案4
0 2020-05-22 09:30:04

解决方案5
0 2020-05-22 09:43:16

如何覆盖<a>元素的 Bootstrap CSS？</a>

问题描述

5 个解决方案

解决方案1 2 2020-05-22 08:14:16

解决方案2 0 已采纳 2020-05-22 08:07:40

解决方案3 0 2020-05-22 08:15:02

解决方案4 0 2020-05-22 09:30:04

解决方案5 0 2020-05-22 09:43:16

解决方案1
2 2020-05-22 08:14:16

解决方案2
0 已采纳 2020-05-22 08:07:40

解决方案3
0 2020-05-22 08:15:02

解决方案4
0 2020-05-22 09:30:04

解决方案5
0 2020-05-22 09:43:16