如何在Bootstrap4中替換卡片鏈接顏色？

如何在不影響同一 HTML 頁面上其他卡片的鏈接顏色的情況下將鏈接顏色更改為此 Bootstrap 4 卡片？

/* I've tried this but it affects all cards on the HTML page: */

.card a:link {
  color: white;
}

.card a:visited {
  color: white;
}

.card a:hover {
  color: white;
  text-decoration: none;
}

.card a:active {
  color: white;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="col-md-6">
  <div class="card py-4 card-container">
    <a href="#">
      <div class="card-body">
        <i class="fa-light fa-book-open my-4" style="font-size: 36px"></i><br/>
        <p class="card-text text-center">CODE SAMPLES</p>
      </div>
    </a>
  </div>
</div>

uj5u.com熱心網友回復：

這是一個自定義類的教科書案例。你可以把它放在你想定制的卡片上并相應地撰寫 CSS。或者，使用 Bootstrap 的文本顏色實用程式直接使用主題顏色設定鏈接樣式，這會自動添加懸停顏色偏移。我將在這里演示這兩種方法。

.card.orangy a {
  color: orange;
}

.card.orangy a:hover,
.card.orangy a:active {
  color: darkorange;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container-fluid">
  <div class="row mt-2">
    <div class="col-4">
      <div class="card py-2 card-container">
        <a href="#">
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Common card with no link styles</p>
          </div>
        </a>
      </div>
    </div>

    <div class="col-4">
      <div class="card orangy py-2 card-container"> <!--------------- HERE -->
        <a href="#">
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Card with custom class</p>
          </div>
        </a>
      </div>
    </div>

    <div class="col-4">
      <div class="card py-2 card-container">
        <a href="#" class="text-danger"> <!-------------------------- HERE -->
          <div class="card-body">
            <i class="fa-light fa fa-book-open mb-4" style="font-size: 36px"></i><br/>
            <p class="card-text text-center">Card with a text color class</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

將代碼粘貼到您需要更改p標簽中焦點顏色的 CSS 檔案中

.card a:link {
  color: #333;
}

.card a:visited p {
  color: white;
}

.card a:hover p {
  color: green;
  text-decoration: none;
}

.card a:active p {
  color: white;
}

.card a:focus p {
  color: #f00;
}

<div class="col-md-6">
  <div class="card py-4 card-container">
    <a href="#">
      <div class="card-body">
        <i class="fa-light fa-book-open my-4" style="font-size: 36px"></i><br/>
        <p class="card-text text-center">CODE SAMPLES</p>
      </div>
    </a>
  </div>
</div>

uj5u.com熱心網友回復：

撰寫焦點和懸停模式下圖示顏色更改的 CSS 代碼 該代碼將影響您的所有卡片樣式 如果您想將其分開，您需要在 HTML 標記中使用單獨的類

.card a:hover i,
.card a:focus i{
    color: #f00;
}

標籤：css 推特引导 引导程序 4 超链接

上一篇：JavascriptBootstrapMultiselect-如果沒有可用選項，則顯示搜索下拉選單

下一篇：打開時粘手風琴頭