Javascript 悬停状态下的锚定颜色不工作

Javascript 悬停状态下的锚定颜色不工作,javascript,html,css,css-selectors,Javascript,Html,Css,Css Selectors,我希望我的所有锚文本在悬停时变为绿色。 我希望a:hover{color:green;}能工作,但它没有工作。 有人能解释一下为什么吗? 多谢各位 这是我的密码: a:悬停{ 颜色:绿色; } 切换导航 提交 添加此!重要信息 a:hover{ color: green !important; } 默认情况下,它是白色的。为了覆盖它,您需要放置!重要信息 a:hover{ color: green !important; }

我希望我的所有锚文本在悬停时变为绿色。
我希望
a:hover{color:green;}
能工作,但它没有工作。
有人能解释一下为什么吗? 多谢各位

这是我的密码:

a:悬停{
颜色:绿色;
}

切换导航
提交

添加此
!重要信息

a:hover{
  color: green !important;
}
默认情况下,它是白色的。为了覆盖它,您需要放置
!重要信息

a:hover{
  color: green !important;
}
注意
只能使用
!重要信息
,如果您觉得需要,请覆盖它。否则,您需要将
a
更改为特定的类名

,因为您使用的是引导库navbar,它有自己的define css类,因此您无法看到更改

请使用

.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus{
  color: green;
}

-帮助:)

引导使用类来设置导航链接的样式。在使用样式时,样式的优先级是有权重的<代码>a:hover本身将被
.nav.navbar-nav li a:hover
覆盖,即使它是在代码之前定义的

请在此处阅读:

附言。 尽你最大的努力不要抓住
!重要信息
与您的风格相关。这会使后续的更改变得更加困难,使代码的可维护性变得难以置信的困难,并且会使像您这样从事项目工作的任何人都没有他们应该做的那么多:)

肯定有
的时候!重要的
是必需的,但我想说的是,在使用上要保守。

navbar类已经在对其内部的标记应用样式。它将覆盖您的自定义样式

add this

.navbar-inverse .navbar-nav > li > a:hover{
 color: green;
 }
CSS被解释。首先声明的样式将被其后声明的相同样式覆盖。因此,只需更改包含样式表的顺序即可。首先是插件和框架。自定义样式排在最后

<link rel="stylesheet" href="https://bootstrap.css" />
<link rel="stylesheet"href="mystyles.css" />
相对于

a {
    color : green;
}

您使用的是引导,它定义了锚上的颜色在不同的位置

不只是覆盖引导(在许多情况下,需要覆盖所有锚定),而是利用内置的引导

下载源代码,更新控制颜色的适用SASS变量,并在构建过程中包含源代码

对于Bootstrap pre-4,还有几个其他选项:下载现成的定制引导的工具(基本上是为您修改SASS变量和传输的工作)。或者使用引导主题。(覆盖
$navbar默认品牌悬停颜色将更改navbar中的悬停颜色。)


所有这些最初都需要更长的时间,但当下一个“只需更改该内容”需求出现时,您将能够快速完成它。

无论使用何种框架,要确定适合的css规则,请首先使用开发人员控制台检查该元素。在这种情况下,您会发现:
.navbar inverse.navbar nav>li>a:悬停{…

问题是,你的新规则必须甚至取代原来的规则。规则越具体,你的规则越具体,它就越能统治所有规则

根据文档,这里列出了按特定性增加的选择器类型

0-类型选择器(例如h1)和伪元素(例如::before)。
1-类选择器(例如,示例)、属性选择器(例如,[type=“radio”])和伪类(例如:hover)。
2-ID选择器(例如#示例)

您希望(页面?)的所有锚都难以辨认,那么为了避免规则过于冗长,您可能需要在所有锚都通用的最顶端的祖先上添加一个
id
属性!您必须有这样一个顶部容器块(也可以是html或body标记,但感觉很难看)

以下是在所有代码周围添加
时得到的结果:

#通用容器a:悬停{
颜色:绿色;
}

切换导航