Question

我具有以下用于隐藏/取消隐藏按钮的代码

.row {
  vertical-align: top;
  height: auto !important;
}

.list {
  display: none;
}

.show {
  display: none;
}

.hide:target+.show {
  display: inline;
}

.hide:target {
  display: none;
}

.hide:target~.list {
  display: inline;
}

\ @media print {
  .hide,
  .show {
    display: none;
  }
}

<div class="row">

  <a href="#hide1" class="hide" id="hide1">Group 1 text</a>
  <a href="#show1" class="show" id="show1">Group 1 text</a>
  <div class="list">
    <hr>
    <ul>
      <li><a href="link1" target="frame1">Link 1 text</a></li>
      <li><a href="link2" target="frame1">Link 2 text</a></li>
    </ul>
    <hr>
  </div>
</div>

好吧，所以我的问题是我该如何向其中添加一些设计，例如我希望按钮为黑色，文本为红色。.什么是最好的方法？任何帮助将非常感谢！

Answer 1

开始阅读有关CSS的文章。这是一个开始的好地方：
MDN web docs - How CSS works

还有一个非常基本的示例，该示例带有红色文本和黑色背景的链接以及其他一些样式设置属性：

.btn {
  background: black;
  color: red;
  font-family: sans-serif;
  font-weight: bold;
  padding: .5em;
}

<a class="btn" href="https://google.com">Google.com</a>

Answer 2

在CSS中，有四个链接状态：

a：link-正常的未访问链接
a：visited-用户访问过的链接
a：hover-用户将鼠标悬停在其上时的链接
a：active-单击后即为链接

此外，还有一些排序规则：

a：hover必须在a：link和a：visited之后
a：active必须在a：hover之后进行

您可以在CSS中为每个状态设置属性：

a:link, a:visited {
    background-color: #000000;
    color: #ff0000;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}


a:hover, a:active {
    background-color: red;
    color: black;
}

Answer 3

这可能会有所帮助。

<style type="text/css">
 .row { vertical-align: top; height:auto !important; }
 .list {display: none; }
 .show {display: none;  }
 /* add css for hide class*/
 .hide{display: inline-block;padding:10px 15px; background-color: #000; border-radius: 5px; box-shadow:1px;text-decoration: none; color:red; text-align:center;box-shadow: 0 1px 4px rgba(0, 0, 0, .6);}
 /* add css for show class*/
 .hide:target + .show {display: inline-block;padding:10px 15px; background-color: #000; border-radius: 5px; box-shadow:1px;text-decoration: none; color:red; text-align:center;box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
 .hide:target {display: none; }
 .hide:target ~ .list {display:inline; }
 @media print { .hide, .show { display: none; } }
</style>

<div class="row">

            <a href="#hide1" class="hide" id="hide1">Group 1 text</a>
            <a href="#show1" class="show" id="show1">Group 1 text</a>
            <div class="list">
            <hr>
                <ul>
<li><a href="link1" target="frame1">Link 1 text</a></li>
<li><a href="link2" target="frame1">Link 2 text</a></li>
</ul>
            <hr>
            </div>
</div>

Answer 4

检查代码并尝试使用它，将为您提供带有黑色背景和红色文本的btn

  <a href="#show1" class="show" id="show1">Group 1 text</a>


<style type="text/css">
    .show{
      color: red;
      padding: 10px 10px;
      margin: 10px 10px;
      background-color: black;
    }
</style>

Answer 5

为标签添加一个额外的类，这里是“ btn”。

<div class="row">
<a href="#hide1" class="hide btn" id="hide1">Group 1 text</a>
<a href="#show1" class="show btn" id="show1">Group 1 text</a>
<div class="list">
  <hr>
  <ul>
    <li><a href="link1" class="btn" target="frame1">Link 1 text</a></li>
    <li><a href="link2" class="btn" target="frame1">Link 2 text</a></li>
  </ul>
  <hr>
</div>

为您的CSS添加.btn样式。

.btn{
  color: red;
  background-color: black;
}

将设计添加到按钮

5 个答案: