我正在设计我的第一个站点...页脚部分要具体。我正在尝试将<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/