如何在CSS中选择纯文本HTML？

Question

你们中有人知道如何在CSS中选择纯HTML文本吗？

我有以下结构：

       <div id="A">
       <p class="caption"> caption1 </p>

        <div class="tabs">
             <div class='moving_bg'></div>

             <p class="text tab_item"> content</p>
             <p class="text tab_item"> content</p>
             <p class="text tab_item"> content</p>
             <p class="text tab_item"> content</p>
             <p class="text tab_item"> content</p>
             <p class="text tab_item"> content</p>

             caption2

             <p class="standardtext tab_item">content</p>
             <p class="standardtext tab_item"> content</p>
             <p class="standardtext tab_item"> content</p>


        </div>

如何在CSS中选择caption2？

只要我给它分配一个类或p标签，它就会破坏我正在使用的选项卡插件的结构。

编辑： 我使用了这个插件，并稍微进行了修改：

var TabbedContent = {
init: function() {  
    $(".tab_item").mouseover(function() {

        var background = $(this).parent().find(".moving_bg");

        $(background).stop().animate({
            top: $(this).position()['top']
        }, {
            duration: 300
        });

        TabbedContent.slideContent($(this));

    });
},

slideContent: function(obj) {

    var margin =      $(obj).parent().parent().parent().parent().find(".slide_content").width();
    margin = margin * ($(obj).prevAll().size() - 1);
    margin = margin * -1;

        $(obj).parent().parent().parent().parent().find(".tabslider").stop().animate({
        marginLeft: margin + "px"
    }, {
        duration: 300
    });
}
}

$(document).ready(function() {
TabbedContent.init();
});

- BlueHorizon

Answer 1

你无法这样做。你只能选择元素和伪元素/类。

你可能可以通过为.tabs添加样式，然后覆盖.tabs > *上的样式来解决问题。

一旦我给它分配一个类或p标签，它就会破坏我正在使用的选项卡插件的结构。

编辑插件即可。

- Quentin

---

谢谢，回复得相当快 :O。在CSS中最好的样式标题的方法是什么？我应该把caption2放在外面某个地方，在那里我可以给它分配一个标签，并通过绝对位置强制它到我想要的位置吗？ - BlueHorizon

不要破坏文档的逻辑结构，然后使用绝对定位来伪装它。这永远不是一个好主意。请使用适当的标记，并编辑任何无法处理它的现有代码。 - Quentin

我一开始想让它变得简单一些，但也许更好的方法是改变jQuery插件。我使用了这个插件，并像您在上面编辑的帖子中看到的那样进行了一些修改。 - BlueHorizon

Answer 2

您可以在CSS顶部使用*选择器。它会最初为您的页面上的所有元素进行样式设置，甚至包括纯文本，然后应用其余选择器的规则。 注意：已知此选择器速度较慢，并且您将不得不覆盖其中任何有问题的规则。（请查看CSS Lint）

* {
    font-size: 13px;
    color:red
}
(...)

- DuckN'Bear

Answer 3

.tabs { foo:bar; jim:jam }
.tabs > * { foo:original; jim:original } /* Every child element of tabs */

这需要您知道继承/原始值是什么，可能需要重新指定已声明的样式，但它会起作用。

如果这是一大堆样式，您可以修改规则，例如：

#a, #a .tabs > * { ...many styles applying generally ... }
.tabs { ...specific styles for just this element... }

CSS的特异性规则会导致你为子元素指定的规则优先于在父元素上指定的规则。

- Phrogz

Answer 4

你需要将它作为 <div class="tabs"> 的一部分进行选择，这样

div.tabs{
    /* whatever */
}

就像它在那个 div 中一样存在。

您可能需要覆盖 p.tab_item 中的一些样式。

- Jason Gennaro

---

这也会选择 div 内的所有其他元素。 - Madara's Ghost

确切地说，@Truth。但是您可以在随后的“p”中覆盖样式。 - Jason Gennaro

是的，但如果我选择了一个有20个不同元素的元素呢？那么我将需要一个非常大的规则，或者更糟糕的是，20个不同的规则。事实上，在CSS中无法选择文本节点。试图对其进行黑客攻击是没有意义的。 - Madara's Ghost

根据代码的来源，有时候需要一些技巧。在这种情况下，我会为整个 div 设定样式，然后重新为其子元素 p 设定样式。看起来最多只需要3条规则。 - Jason Gennaro