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

Question

我的div里面有一张table 。 在表格的td元素中，我有文本和一些具有'actionLink'类分配的链接。

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

有没有一种方法可以更改此属性而不影响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在所有元素。

当然，它们可能会产生间接影响。 如果a元素从其所在的p或td继承其字体设置（并且经常这样做），那么当然更改p或td的字体设置将间接影响a因为它继承了它们。 除了在a元素上显式设置字体设置之外，其他方法无济于事。

例如：

CSS：

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

HTML：

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

JavaScript：

$("p").css("font-weight", "bold");

现在，该链接为粗体，因为它是从其父元素继承其font-weight 。 相反：

$("p").css("font-family", "Comic Sans"); // Hey, I had to do it

这对a元素没有影响，因为它具有自己的 font-family设置。

原始答案 ：

很难明确地回答而不看到您的标记，但是通常：您可以将选择器设置为仅匹配具有类且具有特定标签名称的元素，例如：

// Matches *all* elements with the class "className"
$(".className")

// Only matches `p` elements with "className"
$("p.className")

// Only matches `td` and `p` elements with "className"
$("p.className, td.className")

jQuery支持几乎所有的CSS3选择器，还有一些。 细节：

jQuery选择器
CSS3选择器
CSS2.1选择器（但是CSS3替代了它）

Answer 2

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

就像是

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

编辑：

对于实例，这可以正常工作：

<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 个解决方案

解决方案1
1 2011-06-22 16:45:47

解决方案2
1 已采纳 2011-06-22 16:50:40

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

问题描述

2 个解决方案

解决方案1 1 2011-06-22 16:45:47

解决方案2 1 已采纳 2011-06-22 16:50:40

解决方案1
1 2011-06-22 16:45:47

解决方案2
1 已采纳 2011-06-22 16:50:40