Question

我在<a>标签中有CSS 为什么color未应用？

HTML：

＆＃13;

    <a href="example.com" style="
     .button {  
       color: red;  
     }
     .button:hover {
       color: blue;
     }">text</a>

＆＃13;

Answer 1

您无法为style属性上的按钮提供悬停状态。您可以插入样式标记，然后使用：hover伪选择器

关于.button类，只需添加另一个类或扩展它..

类似的东西：

<style>
/* Default button style */

.button {
    adding: 6px 16px;
    border: outset 5px #005072;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    /*............. insert the rest here */
}


/* hover style - only stuff that should be
    overriden when hovering goes here,
    the default will still be relavent */

.button:hover {
    background: red;
}


/* new button - it will inherit the default button
   properties and override some of them */

.button.special {
    background: green;
}
</style>
<a href="#" class="button">Default button</a>
<a href="#" class="button special">Special button</a>

Answer 2

在当前形式下，您的HTML无效，因为您的style属性正在尝试使用伪类（:active，:hover）和类选择器（.button）。 style属性只能包含声明块（没有大括号）。

style属性的值必须与CSS声明块内容的语法匹配（不包括分隔大括号）

CSS样式属性（http://www.w3.org/TR/css-style-attr/）

CSS声明块定义为：

声明块以左大括号（{）开头，以匹配的右大括号（}）结束。在它们之间必须有一个零或多个以分号分隔（;）声明的列表。

语法和基本数据类型（http://www.w3.org/TR/CSS21/syndata.html#rule-sets）

理想情况下，样式规则会移动到页面head中包含的单独样式表中，但您可以将规则提取到style标记中。

<style>
  .button {
    text-decoration: none;
    text-align: center;
    padding: 6px 16px;
    border: outset 5px #005072;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    font: 18px Verdana, Geneva, sans-serif;
    font-weight: bold;
    color: #000000;
    background-color: #a62152;
    background-image: -moz-linear-gradient(top, #a62152 0%, #4326b5 100%);
    background-image: -webkit-linear-gradient(top, #a62152 0%, #4326b5 100%);
    background-image: -o-linear-gradient(top, #a62152 0%, #4326b5 100%);
    background-image: -ms-linear-gradient(top, #a62152 0%, #4326b5 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4326b5', endColorstr='#4326b5', GradientType=0);
    background-image: linear-gradient(top, #a62152 0%, #4326b5 100%);
    -webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    text-shadow: 1px -1px 2px #ffffff;
    filter: dropshadow(color=#ffffff, offx=1, offy=-1);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
  }
  .button:hover {
    padding: 6px 16px;
    border: outset 5px #005072;
    font: 18px Verdana, Geneva, sans-serif;
    font-weight: bold;
    color: #ffffff;
    background-color: #573bc7;
    background-image: -moz-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    background-image: -webkit-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    background-image: -o-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    background-image: -ms-linear-gradient(top, #573bc7 0%, #a5194c 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a5194c', endColorstr='#a5194c', GradientType=0);
    background-image: linear-gradient(top, #573bc7 0%, #a5194c 100%);
    -webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    text-shadow: 1px -1px 3px #2fb5b1;
    filter: dropshadow(color=#2fb5b1, offx=1, offy=-1);
  }
  .button:active {
    padding: 6px 16px;
    border: inset 5px #005072;
    font: 18px Verdana, Geneva, sans-serif;
    font-weight: bold;
    color: #ffffff;
    background-color: #4326b5;
    background-image: -moz-linear-gradient(top, #4326b5 0%, #a62152 100%);
    background-image: -webkit-linear-gradient(top, #4326b5 0%, #a62152 100%);
    background-image: -o-linear-gradient(top, #4326b5 0%, #a62152 100%);
    background-image: -ms-linear-gradient(top, #4326b5 0%, #a62152 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a62152', endColorstr='#a62152', GradientType=0);
    background-image: linear-gradient(top, #4326b5 0%, #a62152 100%);
    -webkit-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    -moz-box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    box-shadow: 0px 0px 2px #d11abc, inset 0px 0px -1px #ffffff;
    text-shadow: 1px -1px 9px #36cfb0;
    filter: dropshadow(color=#36cfb0, offx=1, offy=-1);
  }
</style>
<a target="_blank" href="http://www.youtube.com/user/danielspringermusic?sub_confirmation=1" class="button">Subscribe</a>

总结一下，您需要：

在您的页面中添加style块（最好在head）
将CSS代码从style中的a属性移至此style块
将class="button"添加到a

将样式应用于元素是构建网页的基础之一，因此我建议您按照一些教程自学基础知识。 Learning the Web看起来是个好地方。

相反，您似乎正在使用Blogger。您可以按照以下步骤添加自定义CSS：

登录blogger.com。

点击您的博客。

在页面左侧，点击模板＆gt;自定义＆gt;高级。

从这里，您可以更改颜色和字体。

要使用自定义CSS进行更改，请单击“添加CSS”。

使用CSS更改博客格式（https://support.google.com/blogger/answer/41954?hl=en）

内联CSS不起作用

2 个答案: