Question

我在css元素的<a>中遇到问题，此页面正在使用Bootstrap Tab组件。所有选项卡均通过其相应的链接进行连接。默认情况下，页面的css具有<a>元素的一些基本样式，即

a {
    color: black;
}

a:hover {
    color: red;
}

在Tab上有ul元素，该元素具有一些链接。我更改了ul元素中链接的颜色。但是，为什么链接的hover颜色没有更改为其基础hover颜色？我只更改normal颜色而不更改hover状态颜色为什么会发生这种情况？

<!DOCTYPE html>
<html lang="en">
<head>
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<style>
	      a {
	      color: black;
	   }

	   a:hover {
	      color: red;
	   }

	   .list > li > a {
	      color: yellow;
	   }
	</style>
	<title></title>
</head>
<body>
	<ul class="nav">
		<li class="nav-item">
			<a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" data-toggle="tab" href="#tab4">Tab 4</a>
		</li>
	</ul>
	<div class="tab-pane active show fade" id="tab1">
		<ul class="list">
			<li>
				<a href="#">Apple</a>
			</li>
			<li>
				<a href="#">Banana</a>
			</li>
			<li>
				<a href="#">Orange</a>
			</li>
			<li>
				<a href="#">Apricot</a>
			</li>
		</ul>
	</div>
	<div class="tab-pane active show fade" id="tab2"></div>
	<div class="tab-pane active show fade" id="tab3"></div>
	<div class="tab-pane active show fade" id="tab4"></div>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
	</script> 
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
	</script>
</body>
</html>

在此处输入代码

Answer 1

在放置color: yellow之后放置color: red，这意味着CSS将解释color: yellow更重要。因此您可以将color: red放在后面或添加!important（例如color: red !important）。

希望这对您有所帮助！

Answer 2

选择器.list > li > a在a和a:hover两个选择器上都有precedence。

您可以执行以下操作：

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
  <style>
    a {
      color: black;
    }
    
    a:hover {
      color: red;
    }
    
    .list > li > a:not(:hover) {
      color: yellow;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
  </script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
  </script>

  <title></title>
</head>

<body>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab4">Tab 4</a>
    </li>
  </ul>
  <div class="tab-pane active show fade" id="tab1">
    <ul class="list">
      <li>
        <a href="#">Apple</a>
      </li>
      <li>
        <a href="#">Banana</a>
      </li>
      <li>
        <a href="#">Orange</a>
      </li>
      <li>
        <a href="#">Apricot</a>
      </li>
    </ul>
  </div>
  <div class="tab-pane active show fade" id="tab2"></div>
  <div class="tab-pane active show fade" id="tab3"></div>
  <div class="tab-pane active show fade" id="tab4"></div>
</body>

</html>

为什么基本悬停颜色不适用

2 个答案: