样式问题：text-decoration none 不起作用

Question

所以我正在尝试创建一个页脚并且我有几个链接，但是链接上的默认文本装饰奇怪地没有响应文本装饰。除了 text-decoration none 之外，所有其他 text-decoration 选项都在工作。我什至尝试对 bootstrap.min.css 文件进行更改，因为我认为它是一种解决方案，但它没有奏效。

.custom-footer{
  background-color: tomato;
}
 
.list-items{
  list-style: none;
  margin: 0;
  padding: 0;
  
}

.company-item{
  text-decoration: none;
  color: inherit;
}

<footer>
     <div class="container-fluid custom-footer">
       <div class="row footer-logo">
         <div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
         </div>
       </div>
       <div class="row">
         <div class=" col footer-column px-4">
           <h6>Company</h6>
           <ul class="list-items">
             <li class="company-item"><a href="">Become a rider</a></li>
             <li class="company-item"><a href="">Our Story</a></li>
             <li class="company-item"><a href="">Our Team</a></li>
             <li class="company-item"><a href="">Contacts</a></li>
             <li class="company-item"><a href="">Partners</a></li>
           </ul>
         </div>
         <div class="col footer-column">
          <h6>Product</h6>
          <ul class="list-items">
            <li class="product-item"><a href="">Ride safely</a></li>
            <li class="product-item"><a href="">How it works</a></li>
            <li class="product-item"><a href="">testimonials</a></li>
          </ul>
         </div>
         <div class="col footer-column contacts">
          <p>+254 111 220 055</p>
          <p>info@tissboda.com</p>
          <p>Nairobi, Kenya</p>
         </div>
       </div>
       <div class="row">
         <div class="col px-4">
           <ul class="list-items">
             <li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
             <li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
             <li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>

           </ul>
         </div>
         <div class="col"></div>
         <div class="col">
           <img src="/images/google-play-badge.png" alt="" width="150px">
         </div>

       </div>
       <div class="row">
        <div class="col px-4">
          <p>©2021 TissBoda. All Rights Reserved</p>
        </div>
        <div class="col"></div>
        <div class="col d-flex">
          <ul class="list-items">
            <li class="legal-link"><a href="">Privacy</a></li>
            <li class="legal-link"><a href="">Terms</a></li>
          </ul>
        </div>
       </div>
     </div>
   </footer>

“无”选项。

Answer 1

把它交给a-element

.company-item a {
  text-decoration: none;
  color: inherit;
}

---

这将是您的代码：

.custom-footer{
  background-color: tomato;
}
 
.list-items{
  list-style: none;
  margin: 0;
  padding: 0;
  
}

.company-item a{
  text-decoration: none;
  color: inherit;
}

<footer>
     <div class="container-fluid custom-footer">
       <div class="row footer-logo">
         <div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
         </div>
       </div>
       <div class="row">
         <div class=" col footer-column px-4">
           <h6>Company</h6>
           <ul class="list-items">
             <li class="company-item"><a href="">Become a rider</a></li>
             <li class="company-item"><a href="">Our Story</a></li>
             <li class="company-item"><a href="">Our Team</a></li>
             <li class="company-item"><a href="">Contacts</a></li>
             <li class="company-item"><a href="">Partners</a></li>
           </ul>
         </div>
         <div class="col footer-column">
          <h6>Product</h6>
          <ul class="list-items">
            <li class="product-item"><a href="">Ride safely</a></li>
            <li class="product-item"><a href="">How it works</a></li>
            <li class="product-item"><a href="">testimonials</a></li>
          </ul>
         </div>
         <div class="col footer-column contacts">
          <p>+254 111 220 055</p>
          <p>info@tissboda.com</p>
          <p>Nairobi, Kenya</p>
         </div>
       </div>
       <div class="row">
         <div class="col px-4">
           <ul class="list-items">
             <li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
             <li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
             <li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>

           </ul>
         </div>
         <div class="col"></div>
         <div class="col">
           <img src="/images/google-play-badge.png" alt="" width="150px">
         </div>

       </div>
       <div class="row">
        <div class="col px-4">
          <p>©2021 TissBoda. All Rights Reserved</p>
        </div>
        <div class="col"></div>
        <div class="col d-flex">
          <ul class="list-items">
            <li class="legal-link"><a href="">Privacy</a></li>
            <li class="legal-link"><a href="">Terms</a></li>
          </ul>
        </div>
       </div>
     </div>
   </footer>

Answer 2

您必须在样式设置时使用company-item a，因为链接默认设置样式，因此您必须直接调用该元素。此外，添加了!important; 以获得良好的措施。

.custom-footer{
  background-color: tomato;
}
 
.list-items{
  list-style: none;
  margin: 0;
  padding: 0;
  
}

.company-item a {
  text-decoration: none !important;
  color: inherit;
}

<footer>
   <div class="container-fluid custom-footer">
      <div class="row footer-logo">
         <div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
         </div>
      </div>
      <div class="row">
         <div class=" col footer-column px-4">
            <h6>Company</h6>
            <ul class="list-items">
               <li class="company-item"><a href="">Become a rider</a></li>
               <li class="company-item"><a href="">Our Story</a></li>
               <li class="company-item"><a href="">Our Team</a></li>
               <li class="company-item"><a href="">Contacts</a></li>
               <li class="company-item"><a href="">Partners</a></li>
            </ul>
         </div>
         <div class="col footer-column">
            <h6>Product</h6>
            <ul class="list-items">
               <li class="product-item"><a href="">Ride safely</a></li>
               <li class="product-item"><a href="">How it works</a></li>
               <li class="product-item"><a href="">testimonials</a></li>
            </ul>
         </div>
         <div class="col footer-column contacts">
            <p>+254 111 220 055</p>
            <p>info@tissboda.com</p>
            <p>Nairobi, Kenya</p>
         </div>
      </div>
      <div class="row">
         <div class="col px-4">
            <ul class="list-items">
               <li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
               <li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
               <li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>
            </ul>
         </div>
         <div class="col"></div>
         <div class="col">
            <img src="/images/google-play-badge.png" alt="" width="150px">
         </div>
      </div>
      <div class="row">
         <div class="col px-4">
            <p>©2021 TissBoda. All Rights Reserved</p>
         </div>
         <div class="col"></div>
         <div class="col d-flex">
            <ul class="list-items">
               <li class="legal-link"><a href="">Privacy</a></li>
               <li class="legal-link"><a href="">Terms</a></li>
            </ul>
         </div>
      </div>
   </div>
</footer>

Answer 3

.custom-footer{
  background-color: tomato;
}
 
.list-items{
  list-style: none;
  margin: 0;
  padding: 0;
  
}

.company-item a{
  text-decoration: none;
  color: inherit;
}

<footer>
     <div class="container-fluid custom-footer">
       <div class="row footer-logo">
         <div class="col"><img src="/images/Logo_White.png" alt="" width="150px">
         </div>
       </div>
       <div class="row">
         <div class=" col footer-column px-4">
           <h6>Company</h6>
           <ul class="list-items">
             <li class="company-item"><a href="">Become a rider</a></li>
             <li class="company-item"><a href="">Our Story</a></li>
             <li class="company-item"><a href="">Our Team</a></li>
             <li class="company-item"><a href="">Contacts</a></li>
             <li class="company-item"><a href="">Partners</a></li>
           </ul>
         </div>
         <div class="col footer-column">
          <h6>Product</h6>
          <ul class="list-items">
            <li class="product-item"><a href="">Ride safely</a></li>
            <li class="product-item"><a href="">How it works</a></li>
            <li class="product-item"><a href="">testimonials</a></li>
          </ul>
         </div>
         <div class="col footer-column contacts">
          <p>+254 111 220 055</p>
          <p>info@tissboda.com</p>
          <p>Nairobi, Kenya</p>
         </div>
       </div>
       <div class="row">
         <div class="col px-4">
           <ul class="list-items">
             <li class="social-icons"><a href=""><i class="fab fa-facebook-square"></i></a></i></li>
             <li class="social-icons"><a href=""><i class="fab fa-twitter-square"></i></a></i></li>
             <li class="social-icons"><a href=""><i class="fab fa-instagram-square"></i></a></i></li>

           </ul>
         </div>
         <div class="col"></div>
         <div class="col">
           <img src="/images/google-play-badge.png" alt="" width="150px">
         </div>

       </div>
       <div class="row">
        <div class="col px-4">
          <p>©2021 TissBoda. All Rights Reserved</p>
        </div>
        <div class="col"></div>
        <div class="col d-flex">
          <ul class="list-items">
            <li class="legal-link"><a href="">Privacy</a></li>
            <li class="legal-link"><a href="">Terms</a></li>
          </ul>
        </div>
       </div>
     </div>
   </footer>

我认为问题在于选择列表项而不是链接 无论如何这有效