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

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标签？如果有可能我可以在标准的html架构中添加一些东西？

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

如何打破CSS继承？

Answer 1

什么是html标签,什么都不做？

在<span>和<div>标记表示没有特定的含义,并仅用于标记.

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

强行重置所有样式需要一大堆CSS.如果您觉得需要这样做,您可能需要仔细重新考虑您正在做的事情.你应该使用级联样式,而不是它们.

或者可以安全地创建自己的html标签？

永远不要这样做.虽然现代浏览器不会破坏(它们非常宽松),但HTML已经标准化,以阻止每个人发明自己的标签.

如果有可能我可以在标准的html架构中添加一些东西？

嗯,从技术上讲,你可以.但这不值得麻烦.

另外,引用w3.org:

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

那怎么办呢？

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

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

您可以使用自定义属性标记标记而不使用a :.classdata-*

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

该attributeEquals选择允许您选择合适的元素:

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

Answer 2

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