Question

如何为以下CSS创建styleClass？我希望它只用于表单的一个特定部分 - 选项卡式菜单 - 而不会影响其他任何内容。如果我按原样保留，表单上的所有内容都会受到影响。

a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ff9c2a;
}

Answer 1

您需要在链接中添加class，并在CSS中引用它。

使用标记：

<a href="..." class="myClass">My Link</a>

使用CSS：

a.myClass:link,a.myClass:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a.myClass:hover,a.myClass:active
{
background-color:#ff9c2a;
}

Answer 2

您可以在html中设置类，如下所示：

<a href="/url" class="someclass">hello world</a>

然后你可以在css中将样式限制为这个类：

a.someclass:link, a.someclass:visited {
    ...
}

a.someclass:hover, a.someclass:active {
    ...
}

Answer 3

您需要添加一个类或ID才能这样做。

对于您的标签，您可以使用如下ID：

<div id="specialTab">
    <a href="#">Lorem Ipsum</a>
</div>

并像这样更改你的CSS：

#specialTab a:link, #specialTab a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#specialTab a:hover, #specialTab a:active
{
background-color:#ff9c2a;
}

Answer 4

有两种方式。

1）给每个元素一个类（在这种情况下为“tab”）：

a.tab:link, a.tab:visited { ... }

2）使用容器组。说你的标签菜单有id“tabMenu”：

#tabMenu a:link, #tabMenu a:visited { ... }

Answer 5

我会将菜单放在带有'菜单'

的div中

然后只是

#menu a:link, #menu a:visited 
{ 
display:block; 
width:120px; 
font-weight:bold; 
color:#ffffff; 
background-color:#5576A7; 
text-align:center; 
padding:4px; 
text-decoration:none; 
text-transform:uppercase; 
} 
#menu a:hover,#menu a:active 
{ 
background-color:#ff9c2a; 
}

Answer 6

使用specificity，指定一个类或使用最接近的父级来设置<a>标记的样式。 e.g。

.tabbed-menu a:link, .tabbed-menu a:visited {
    display:block;
    width:120px;
    font-weight:bold;
    color:#ffffff;
    background-color:#5576A7;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
.tabbed-menu a:hover, .tabbed-menu a:active {
    background-color:#ff9c2a;
}

.tabbed-menu将是您的菜单使用的类。

Answer 7

如果您只想在表单部分中设置某个部分的样式，则可以在此处为此部分添加ID：

<form>
  <fieldset>
     <ul>
       <li id="style-me"> </li>
       <li> </li>
      </ul>
   <fieldset>
</form>


#style-me a:link, #style-me a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#ffffff;
background-color:#5576A7;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#ff9c2a;
}

Answer 8

要在html的特定部分应用样式，必须使用选择器：

首先添加div或其他标记，并在需要更改的元素周围设置唯一ID。

<div id="zone_name">
  <a href="#">link</a>
  <span>text</span>
</div>

在样式中添加id选择器和标签名称

#zone_name a {
/*style attributes for a tag in zone_name*/
}

#zone_name span {
/*style attributes for span tag in zone_name*/
}

如何创建一个styleClass来使用这个CSS？

8 个答案: