Question

我的div里面有table。在表格的td元素内，我有文本和一些“actionLink”类分配的链接。

使用JQuery，我将一些属性值更改为父td内的p和div元素。一切正常，但链接的属性值也会改变。

有没有办法在不影响a元素的情况下更改此属性。

这就是我所拥有的

的JavaScript

    $('.sectionContent').css("color", $('#ParagraphForegroundColor').val());
    $('.sectionContent').css("background-color", $('#ParagraphBackgroundColor').val());
    $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-family", $('#ParagraphFontFamily').val());
    $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-size", $('#ParagraphFontSize').val());
    $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-style", $('#ParagraphFontStyle').val());
    $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-weight", $('#ParagraphFontWeight').val());
    $('.sectionContent p, .sectionContent td').not(".addColumn").css("text-decoration", $('#ParagraphTextDecoration').val());

Answer 1

更新：仔细查看您的选择器，您显示的选择器根本不匹配任何 a元素，除非他们有类“sectionContent”，在这种情况下，它们与前两行适用于所有元素的“sectionContent”类相匹配。但其余五行明确选择仅 p和td元素，因此根本不会对a元素产生任何（直接）影响。< / p>

当然，他们可能会产生间接影响。如果a元素继承了他们所在的p或td的字体设置（他们经常这样做），那么当然会更改{{1}上的字体设置或p会间接影响td，因为它会继承它们。除了在a元素上明确设置字体设置以便它们不再继承之外，没有其它方法。

例如：

CSS：

HTML：

p {
    font-family: serif;
}
a.actionLink {
    font-family: sans-serif;
}

JavaScript的：

<p>This is the paragraph with <a href="#" class="actionLink">an 'actionLink' link in it</a>.

现在链接以粗体显示，因为它从其父元素继承了它的$("p").css("font-weight", "bold");。相反：

font-weight

这对$("p").css("font-family", "Comic Sans"); // Hey, I had to do it元素没有影响，因为它有自己的 a设置。

原始回答：

很难在没有看到标记的情况下专门回答，但通常：您可以将选择器设置为仅匹配类和具有特定标记名称的元素，例如：

font-family

jQuery几乎支持所有CSS3选择器，然后是一些。详细说明：

jQuery Selectors
CSS3 Selectors
CSS2.1 Selectors（但CSS3的东西取代了这个）

Answer 2

实际上，我认为你只需要在css中定义类actionLink，这样它就不会继承包含它的TD的属性。

像

这样的东西

.actionLink{
 font-family:vlaue;
 font-size:vlaue;
 font-weight:vlaue;
 font-style:vlaue;
 text-decoration:vlaue;
}

编辑：

对于Instance，这很好用：

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
    <script type="text/javascript">
        $(function(){
             $('.sectionContent').css("color", 'blue');
            $('.sectionContent').css("background-color", 'red');
            $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-family", '"Times New Roman",Georgia,Serif');
            $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-size", '11pt');
            $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-style", 'normal');
            $('.sectionContent p, .sectionContent td').not(".addColumn").css("font-weight", 'normal');
            $('.sectionContent p, .sectionContent td').not(".addColumn").css("text-decoration", 'none');
        });
    </script>
    <style>
        .actionLink{
             font-family:Arial;
             font-size:6pt;
             font-weight:bold;
             font-style:normal;
             text-decoration:underline;
             background-color:white;
             color:black;
        }
    </style>
  </head>
  <body>
    <div class="sectionContent">
        <table>
            <tr>
                <td>
                    Some Test
                    <a class='actionLink'>Action</a>

                </td>
            </tr>
        </table>
        <p>Some Content</p>
    </div>
  </body>
</html>

不将css属性设置为子元素。 jQuery的

2 个答案: