Question

我有元素（例如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>

基本上我不能使用div或p来包装HelloWorld和Hiworld，因为它将被css规则格式化，但我想将它们包装成真正的原因一个标签，所以我可以使用javascript抓住它们，同时不影响它的当前风格。

alert($('#textToGrab').text());

现在什么是 html标签并不是什么都不做？或者我需要用有效的html标签包装它并强行重置所有样式因为css级联？或者安全地创建我自己的html标签？如果有＆＃39 ; 我可以在标准html架构中添加内容吗？

我已经阅读了这个问题，但它并不适合我的情况

How to break CSS inheritance?

Answer 1

什么是html标签实际上什么都不做？

<span>和<div>标记表示没有特定含义，仅适用于标记。

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

强行重置所有样式需要boatload of CSS。如果您觉得需要这样做，您可能需要仔细重新考虑您正在做的事情。您应该使用级联样式，而不是反对它们。

或者创建我自己的html标签是安全的吗？

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

如果我有可能在标准html架构中添加内容吗？

嗯，技术上，你可以。但这不值得麻烦。

另外，引用w3.org：

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

那怎么办呢？

IMO，这里的问题是你的CSS样式太宽泛了。您应该尽可能将格式设置为.class。这使您可以更精细地控制应用每个.class的位置，并允许更多的代码重用。您将完全回避整个级联问题，并且能够将这些部分包装在<span>标记中。

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

您可以使用自定义data-*属性使用.class标记不带标记：

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

attributeEquals选择器允许您选择适当的元素：

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

Answer 2

您可以使用<section>。这是一个HTML5标签，但所有现代浏览器都支持。

Answer 3

您可以使用任何元素。例如，尝试使用<div class="jsOnly">包装要在JS中使用的代码。然后在样式表中执行

.jsOnly {
    display: none;
}

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

HTML标记可以安全地封闭无效的元素

3 个答案:

那怎么办呢？