HTML标记用于封装不起任何作用的元素

我有一些元素（例如div或段落），我不想从它们的父元素继承样式

比如说

   <style>
      div{
         padding:3px;
       }
       /* and so many other basic tags styled like p, table, td, span, etc*/
   </style>
    <nonsensetag id="textToGrab">
       <div>Hello World</div>
       <p>Hi world</p>
    </nonsensetag>

现在什么是真正不起任何作用的html标记？或者我是否需要用有效的html标记包装它，并强制重置所有样式，因为css级联？或者创建自己的html标记是安全的？如果有可能我可以在标准html模式中添加一些内容？

我已经读过这个问题，但它不太适合我的情况

---

您可以使用

。这是一个HTML5标签，但所有现代浏览器都支持。

您可以使用任何元素来实现这一点。例如，尝试用

包装您想在JS中使用的代码。然后在样式表中只需执行以下操作

.jsOnly {
    display: none;
}

该元素中的所有内容都可以在DOM中访问，但您不会在页面上看到它

什么是真正不起作用的html标记

和

标记不表示特定含义，仅用于标记

或者我需要用有效的html标记包装它，并强制重置所有样式，因为css级联

强制重置所有样式需要一段时间。如果你觉得你需要这样做，你可能需要仔细地重新思考你在做什么。您应该使用级联样式，而不是反对它们

或者创建自己的html标记是安全的

永远不要这样做。虽然现代浏览器不会崩溃（它们非常宽容），但HTML已经标准化，以阻止每个人发明自己的标签

是否有可能在标准html模式中添加一些内容

从技术上讲，你可以。但这不值得这么麻烦

此外，引用：

别这样！文档不仅要有正确的语法，还要有意义。SGML和XML只定义语法。HTML和XHTML定义了含义。如果您添加的元素不是由标准定义的，只有您自己知道它们的含义。在20年或50年后，即使你可能不再知道

那怎么办呢？ 在我看来，这里的全部问题是你的CSS样式太宽泛了。如果可能，您应该将格式设置移动到

.class

。这使您能够更细粒度地控制每个

.class

的应用位置，并允许更大的代码重用。您将完全避开整个级联问题，并将能够在

标记中包装这些部分

---

注意：答案的其余部分并没有真正满足要求，但我宁愿保留而不是删除它，以防有人发现它有用

通过使用自定义属性，您可以使用

.class

标记标记，而不标记：

<div data-yank='field1'>Hello World!</div>
<p data-yank='field2'>Hi world</p>

---

我需要支持IE10及以下版本，当然不包括IE6:）

span

在我的整个页面中都是样式化的，我不能使用它，否则我需要重置它的样式，只是为了使用它来封装elements@BrandonBoone，如果包装的是块级别的元素，那就不正确了。问题：为什么你的css选择器这么宽？例如，为什么不能使用

#textToGrab div{…}

呢？第一句是指防止继承，但其余的是指完全不同的内容，即与CSS规则中的某些选择器匹配的元素。试着用一个真实的例子来解释真正的问题。如果你有一个

div

的规则，并且你不能改变它，那么你显然不能使用

div

作为包装器，然后你将需要丑陋的技巧，但你真的需要有这样的“广泛规则”吗？这个问题怎么可能不清楚，因为所有的具体问题都是粗体的？我用CSS设计了元素的样式，这样可以查看它，但在包装它时不能更改它…然后更改样式表，这样你就不会自己设计div的样式了。无论如何，您应该只使用类或id来设置样式。

<div data-yank='field1'>Hello World!</div>
<p data-yank='field2'>Hi world</p>

$( "input[data-yank='field2']" ).text()