来自jqueryui css的.ui-state-hover a中的ovrreride锚样式答案

【问题标题】：ovrreride anchor style in .ui-state-hover a from jqueryui css来自jqueryui css的.ui-state-hover a中的ovrreride锚样式
【发布时间】：2014-09-29 17:21:45
【问题描述】：

我正在为我的表使用 Jquery UI css，使用 Jquery 函数应用样式。对于鼠标在所有 td 标签上的每一行，都会获得一个 css 类 ui-state-hover 并且该类定义了锚点的颜色

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
    color: #212121;
    text-decoration: none;
}

我不想在表格中为我的锚点设置颜色 #212121，并将其保留为来自我的 css 的默认蓝色

a,
    a:link,
    a:active {
        text-decoration: none;
        color: blue ;
        background-color: transparent;
    }
    a:visited {
        color: purple ;
        background-color: transparent;
    }
    a:hover {
        text-decoration: underline;
    }

我不想在我的 CSS 中添加 !important 来锚定颜色样式，因为它是全局的。告诉我如何覆盖 .ui-state-hover a color。 Plunker link

我的 hmtl 代码

<html>
<head>
    <!--<script  type="text/javascript"  src="../jquery-ui-1.11.1/external/jquery/jquery.js"/>
    <link type="text/css"  src="../jquery-ui-1.11.1/jqueryui.css">
    <script  type="text/javascript"  src="../jquery-ui-1.11.1/jqueryui.js"/>
        -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


    <style>
    body {
    font-family: 'Arial';
    font-size: 12px;
}
a,
    a:link,
    a:active {
        text-decoration: none;
        color: blue ;
        background-color: transparent;
    }
    a:visited {
        color: purple ;
        background-color: transparent;
    }
    a:hover {
        text-decoration: underline;
    }

    a.ui-state-hover{
        color: blue !important;
    }
</style>
<script>
    $(document).ready(function(){
        tblCss();
    });
    var tblCss =function(){
        $("table").each(function(){
            jqueryUITbl(this);
        });
    }

    var jqueryUITbl  =function(tbl){
         $this = $(tbl);
         $this.on('mouseover mouseout', 'tbody tr', function (event) {
              console.log('  mouseover')
             $(this).children('td').toggleClass("ui-state-hover", event.type == 'mouseover');
         });
         $this.find("caption").addClass("ui-widget-header ui-corner-all");
         $this.find("th").addClass("ui-widget-header  ui-corner-all");
         $this.find("td").addClass("ui-widget-content");
    }

</script>
</head>
<body>


<br/>
    <table>
        <tr>
            <th> Clumns1</th>
            <th> Column2</th>
        </tr>
        <tr>
            <td>
                Some text
            </td>
            <td>
                <a href=""> Test link </a>
            </td>
        </tr>
        <tr>
            <td>
                Some text
            </td>
            <td>
                <a href=""> Test link </a>
            </td>
        </tr>
        <tr>
            <td>
                Some text
            </td>
            <td>
                <a href=""> Test link </a>
            </td>
        </tr>


    </table>


</body>


</html>

【问题讨论】：

标签： css jquery-ui

【解决方案1】：

把你的css改成

a,
    a:link,
    a:active,  .ui-state-hover a {
        text-decoration: none;
        color: blue ;
        background-color: transparent;
    }
    a:visited, .ui-state-hover a:visited {
        color: purple ;
        background-color: transparent;
    }
    a:hover,  .ui-state-hover a:hover {
        text-decoration: underline;
    }

由于你的css在include之后，它会覆盖之前的css

【讨论】：