html - 文本装饰规则不起作用?

标签 html css

我正在设计我的第一个网站……具体来说是页 footer 分。我正在尝试设置 <a> 的样式在没有默认 webkit 样式的情况下将标签变成白色,但我无法这样做。

我做错了什么,我该如何更改样式?

* {
  margin: 0px;
  padding: 0px;
}

div {
  display: block;
}

.header {
background-color: #333333;
}

.nav {
  padding:  0px auto;
  margin: 0px auto;

}

.nav ul {

}

.nav ul li {
  color: #e6e6e6;
  display: inline-block;
  padding: 20px 30px 20px 20px ;
  font-family: 'raleway', sans-serif;
  font-weight: 20px;

}

.nav ul li a {
  text-decoration: none;
  color: #efefef;
  padding: 20px 20px 20px 20px ;
  font-family: 'raleway', sans-serif;
  font-weight: 20px;

}

.nav ul li a:hover {
  color: #efefef;
  background-color: #191919;
  transition: background .5s;

}

.second_section .container {
  
  background-image: url(http://1.bp.blogspot.com/-I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg);
  height: 900px;
  width: 100%;
}

.copy {
  position: absolute;
  margin: 100px 50px 500px 500px;
  color: white;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: 2px

}

.copy {
  text-align: center;
}

.btn_section {
  top: 400px;
  text-align: center;
  position: relative;
}

.btn {
  position: relative;
  margin-top: 100px
  color: white;
  border: solid 2px fixed;
}

.btn_section a {
  border: 1px solid white;
  padding: 20px 40px;
  text-decoration: none;
  background-color: #191919;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.33em;
  letter-spacing: 2px;
  text-transform: uppercase;

}

.btn_section a:hover {
  background-color: #e6e6e6;
  color: #191919;
  transition: background .5s;
  cursor: pointer;

}

.third_section a: hover {
  background-color: black;

}

.third_section {
  height: 20px;
  background-color: black;
}

.fourth_section .col {
    display: inline-block;
    padding-top: 50px;
    padding-bottom: 75px;
    padding-left: 6%;
    padding-right: 6%;
    text-align: center;
    font-family: 'Raleway';
    width: 20%;
    vertical-align: top;
}

.fourth_section img {
  padding: 5px 5px 10px 5px;
    height: 32px
}

.fourth_section > h2 {
  font-family: 'Raleway';
  font-size: 1.33em;
}

  .col > p {
  font-size: 1.12em;
}

.col a {

  text-decoration: none;
  color: #323232;
}

.col {
    text-align: center;
    font-family: Garamond;
}

.footer {
    height: 100px;
    background-color: #333;
    padding: 20px;
}

.footer a {
  text-decoration: none;
}

.footer_info {
  position: relative;
  text-decoration: none;
  margin-bottom: 10px;
  color: white;
}
<div class="header">

  <div class="nav">
  <ul>
    <li><a href="#">ABOUT</a></li>
    <li><a href="#">WORK</a></li>
    <li><a href="#">TEAM</a></li>
    <li><a href="#">CONTACT</a></li>
  </div>
</div>

<div class="second_section">
  <div class="container">
    <div class="copy">
    <h1>ACTUATE CONTENT</h1>
      <br>
      <h3>Expert content for every business</h3>
    </div>
    <div class="btn_section">
      <a href="www.actuatecontent.com/contact" class="btn">Write For Me!</a>

    </div>
  </div>

<div class="third_section">
  </div>

<div class="fourth_section">

  <div class="col">
    <a href="#"><img src="https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-17-256.png"><h2>RESEARCH</h2></a>
    
    <br>
    <p>Our meticulous research methods will uncover the most relevant information for your project. </p>
  </div>

  <div class="col">
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png">
    <h2>WRITING</h2></a>
    <br>
    <p>Our seasoned, handpicked writers craft stellar content for your specific needs.</p>

  </div>

  <div class="col">
    <a href="#"><img src="http://i.imgur.com/AinCaug.png">
    <h2>EDITING</h2></a>
    <br>
    <p>Our editors work with leading authors and publishers to bring out the best in their writing.</p>
  </div>
  
</div>

<div class="footer">
  <div class="footer_info">
    <a href="#"><p>Terms of Use / Privacy Policy</p></a>
</div>
</div>

最佳答案

将你的样式添加到这里:

.footer .footer_info a {
    ...
}

关于html - 文本装饰规则不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35578061/

相关文章:

javascript - 如何使自定义滚动条仅应用于特定的 DIV 标记

html - 如何定位 float 在其兄弟元素上方的元素

css - 选择器中的数字会出现在哪里?

html - 并排对齐div - Angular

html - 如何使用 laravel ajax 将另一个文件中的模态显示到我的 html 中

javascript - 旋转后调整大小时如何计算平移x和y值..?

javascript - 我如何实现自动建议,如浏览器搜索字段(不是自动完成下拉菜单)?

javascript - 鼠标悬停时如何更改段落文本?

javascript - 固定标题覆盖滚动条

html - 用css排列div