如何更改 CSS 中的链接样式？答案

【问题标题】：How do I change link style in CSS?如何更改 CSS 中的链接样式？
【发布时间】：2017-04-29 15:36:01
【问题描述】：

我知道这听起来像是一个显而易见的问题和答案，但我花了很长时间试图弄清楚这一点，并且由于某种原因，没有一个答案对我不起作用。老实说，这可能是一个我无法理解的简单而明显的答案。但问题是：我正在用 HTML5、CSS 和一些 PHP 制作网站。

问题是，我的链接显示为蓝色和紫色并带有下划线。我知道它们应该是这样的，但我尝试了许多不同的方法来重新设置带有text-decoration: none 和不同颜色等的链接样式。

这是我的 CSS 和带有链接的 HTML 部分：

* {
	padding: 0;
	margin: 0;
}

html, body {
	height: 100%;
	width: 100%;
}

a {
	text-decoration: none;
	color: brown;
}

.sidebar {
	width: 25%;
	height: 100%;
	float: left;
	background-color: #BC986A;
	overflow-y: scroll;
}

.side-option {
	width: 100%;
	height: 155px;
	background-color: #BC986A;
}

.side-option:hover, .side-option:focus {
	background-color: #DAAD86;
}

.side-name {
	font-family: "Indie Flower", cursive;
	font-size: 1.8em;
	margin: 2px 2px 0px 7px;
	padding: 5px 5px 0px 5px;
}

.side-image {
	width: 150px;
	height: 97px;
	margin: 0px 0px 0px 15px;
	border: 0.3em solid #FBEEC1;
}

.info {
	background-color: #659DBD;
	width: 75%;
	height: 100%;
	float: right;
}

#name {
	font-family: "Gloria Hallelujah", cursive;
	font-size: 50px;
	text-align: center;
	color: #FBEEC1;
}

#s-name {
	font-family: "Gloria Hallelujah", cursive;
	font-size: 20px;
	text-align: center;
	color: #FBEEC1;
}

#image {
	display: block;
	width: 384px;
	height: 256px;
	margin-left: auto;
	margin-right: auto;
	border: 0.5em solid #BC986A;
	margin-top: 10px;
}

#desc {
	font-family: "Rock Salt", cursive;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	color: #DAAD86;
}

<div class="sidebar">
	<a href="index.php?page=0"><div class="side-option">
		<h2 class="side-name">Brown Bear</h2>
		<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants.">
	</div></a>

我不确定你是否需要所有这些，但无论如何都需要。

【问题讨论】：

</div></a> ==> </a></div> 开始
他在 a 中有一个 div，所以我认为他最后需要一个额外的 </div>。他可能会将side_option 类移动到a 并丢失内部div，但显然不能确定。
首先在.css文件中做 --> a { text-decoration: none; } 然后应用其他样式
@mumu text-decoration: none 可能仅用于丢弃链接中的默认下划线。
它将丢弃所有默认样式。

标签： html css

【解决方案1】：

对于悬停颜色更改，您可以使用此 css

.sidebar a:hover{color:red; }

点击后保持颜色焦点

.sidebar a:focus{color:blue; }

【讨论】：

【解决方案2】：

1) 您需要将代码从末尾的</div></a> 更改为：</div></a></div>
2）链接的样式可以根据它们所处的状态而有所不同。：

    a:link - a normal, unvisited link
    a:visited - a link the user has visited
    a:hover - a link when the user mouses over it
    a:active - a link the moment it is clicked

您可以在以下网址阅读更多相关信息：https://www.w3schools.com/css/css_link.asp

* {
	padding: 0;
	margin: 0;
}

html, body {
	height: 100%;
	width: 100%;
}

a, a:link, a:visited{
	text-decoration: none;
	color: brown;
}

a:hover, a:active{
  color: green;
}

.sidebar {
	width: 25%;
	height: 100%;
	float: left;
	background-color: #BC986A;
	overflow-y: scroll;
}

.side-option {
	width: 100%;
	height: 155px;
	background-color: #BC986A;
}

.side-option:hover, .side-option:focus {
	background-color: #DAAD86;
}

.side-name {
	font-family: "Indie Flower", cursive;
	font-size: 1.8em;
	margin: 2px 2px 0px 7px;
	padding: 5px 5px 0px 5px;
}

.side-image {
	width: 150px;
	height: 97px;
	margin: 0px 0px 0px 15px;
	border: 0.3em solid #FBEEC1;
}

.info {
	background-color: #659DBD;
	width: 75%;
	height: 100%;
	float: right;
}

#name {
	font-family: "Gloria Hallelujah", cursive;
	font-size: 50px;
	text-align: center;
	color: #FBEEC1;
}

#s-name {
	font-family: "Gloria Hallelujah", cursive;
	font-size: 20px;
	text-align: center;
	color: #FBEEC1;
}

#image {
	display: block;
	width: 384px;
	height: 256px;
	margin-left: auto;
	margin-right: auto;
	border: 0.5em solid #BC986A;
	margin-top: 10px;
}

#desc {
	font-family: "Rock Salt", cursive;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
	color: #DAAD86;
}

<div class="sidebar">
	<a href="index.php?page=0"><div class="side-option">
		<h2 class="side-name">Brown Bear</h2>
		<img src="http://maxpixel.freegreatpicture.com/static/photo/1x/Animal-Brown-Bear-Beast-Bear-Teddy-Bear-Mammal-422682.jpg" class="side-image" alt="Brown bear standing in tall plants."/>
    </div>
	</a>
</div>

【讨论】：

【解决方案3】：

a {
    text-decoration: none;
    color: brown;
}

是您需要更改以编辑 <a href=""></a> 链接的地方

更改悬停选项：

a:hover {
    style it here
}

对于您网站上已经访问过的链接：

a:visited {
    style it here
}

【讨论】：

【解决方案4】：

你问如何样式化链接。

a{
    color: red;
    cursor: wait;
    font-size: 24px;
    transition: color 0.3s, text-shadow 0.3s;
    text-decoration: none;
}
a:hover{
    color: green;
    text-shadow: 1px 2px 3px #000;
    text-decoration: overline;
}
a:active{
    font-weight: 900;
}

&lt;a href="https://example.com" title="Does this annoy you?"&gt;Working link.&lt;/a&gt;

【讨论】：