- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
据我所知,没有可靠的方法来完成我的目标,但我想我还是会请教这里的专家,看看是否可以完成。
我正在寻求创建一种简化的样式设置方法,允许某人使用带有采用嵌套标签格式的类或 ID 的单个标签。例如,一个 DIV 看起来内部有另一个 DIV,允许使用目前只能通过使用嵌套元素实现的更复杂的样式。
我想做的一个例子是:
<div class="nesteddiv">{content}</div>
并使其呈现为:
<div class="outerdiv"><div class="innerdiv">{content}</div></div>
目标可能是让 outerdiv 和 innerdiv 拥有自己的边框、背景、边距和间距,以创建无法在单个 DIV 上完成的复杂样式(我认为单个 DIV 不可能实现DIV 有多个边框)
我知道::before 和::after 中有伪元素,允许您在内容前后的包含元素中插入原始文本或图像,但这些不能插入 html 标记并让它们呈现。有没有另一种方法可以将单个 html 元素转换为呈现为多个嵌套元素的东西?我试图避免使用 Javascript,因为我的一些观众禁用了 Javascript。我知道有一种方法可以在 Javascript 中创建自定义元素,也可以用更复杂的嵌套代码简单地用某个类替换所有 DIV,但如果纯 HTML 中已经有更简单的方法,我宁愿避免所有这些额外的编码/CSS。
最佳答案
没有什么好的方法可以做到这一点。
您可以在元素上使用display: table
。假设内容不是表格元素,table-row
和 table-cell
anonymous elements将被创建:
Generate missing child wrappers:
- If a child C of a 'table' or 'inline-table' box is not a proper table child, then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are not proper table children.
- If a child C of a 'table-row' box is not a 'table-cell', then generate an anonymous 'table-cell' box around C and all consecutive siblings of C that are not 'table-cell' boxes.
但是,问题是您不能使用 CSS 选择器来选择那些匿名元素。所以你不能设计它们。因此,这种方法通常是无用的。
另一种方法相反:生成所需元素的伪元素包装器。这可以通过 Generated and Replaced Content Module 提出的 ::outside
来完成。 :
An '::outside' pseudo-element is one that is generated immediately outside the pseudo-element's superior.
When given a parameter, '::outside(n)' represents an nth pseudo-element generated immediately around the n-1th pseudo-element.
For example, the following rules:
div { display: block; border: dashed; }
div::outside { display: block; border: dashed; }
div::outside(2) { display: block; border: dashed; }...would result in the following rendering objects:
,-----------------------. <-- border of ::outside(2)
| ,-------------------. | <-- border of ::outside
| | ,---------------. | | <-- border of DIV
| | | DIV | | |
| | `---------------' | |
| `-------------------' |
`-----------------------'
但是,这个模块是一个草案,自 2003 年以来就没有更新过,我认为它从未被实现过。
几个月前,我向 CSS WG 发送了一封电子邮件,建议使用 ::contents
伪元素来生成内容的包装器(不包括 ::before
也不是 ::after
)。这个伪元素默认有 display: contents
,因此除非你改变 display
,否则它不会被注意到。电子邮件被忽略。
但我希望将来有某种方法可以实现这一目标。能够使用 display: contents
“展开”内容但不能将内容包装在容器中是没有意义的。
关于HTML5/CSS3 : Any way to use pseudo elements to create a tag within a tag?(避免使用 Javascript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34711744/
我们与一位客户存在某种问题,该客户认为我们发送的 XML 文件中的两个版本的空标记之间存在语义差异(纯 XML 没有 HTML ..)。 他们期望: 我们发送: 我
我想计算文本中 pp/np/vp 的数量,但我不知道如何在 openNLP chunker 中识别 PP-tags/NP-tags/VP-tags?我已经尝试过这段代码,但它不起作用。 Chunker
从我正在阅读的代码的上下文来看,它看起来像 $("")创建一个标签,其中 $('')是一个搜索标签的选择器。这里发生了什么?实际上,我可能没有掌握第二个语法,但我确信我已经完成了 $('idName'
我正在使用 Builder::XmlMarkup 创建 xml。我想创建一个没有内容的标签,因为 api 强制我创建它。如果我使用博客 xml.tag do end 我得到了我想要的 但我希望它更短
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: Using the XHTML closing slash (/) on normal tags? Are
默认情况下, someXmlWriter.WriteElementString("my-tag", someString); 产生 我环顾四周XmlWriterSettings强制作者生成 的可能选
如何修改tag-it ui插件https://github.com/aehlke/tag-it (版本 v2.0)因此它只允许选择 x 个标签,以及如何仅允许“availableTags-option
我能够解析这样的内容: value 通过: File inputFile = new File("input.xml"); DocumentBuilderFactory dbFactory = Doc
我不太确定如何编写这个查询,它可以在一个查询中完成。案例如下: 我需要选择标签名称列表,并为每个标签获取最近标记的专辑信息。这意味着,如果用户创建名为“Pamela Anderson”的专辑并将该专辑
这个问题在这里已经有了答案: Where should I put tags in HTML markup? (21 个回答) JavaScript at bottom/top of web pa
Django 2 by Example 中的教程,我不明白: step (2): Why is `Count('tags')` **not** counting the total number of
我是 jekyll 的新手,正在构建我的网站。 我有一个“帖子”布局,我希望与帖子相关的所有标签都出现在左栏中。我遇到的问题是,使用 {{ page.tags }} 会返回一个未以逗号分隔且看起来很乱
如何将一个目录下的所有hash tag重写为slash tag? ( Apache ) http://www.domain.com/company/index#about => http://www.
在查询 Flickr API 并检查返回的标签时,我注意到我收到了未在 Web 界面上显示的其他标签。例如对于此图像: http://www.flickr.com/photos/77060598@N0
我有类似 的东西我想得到这个: <1> <2> 但我只想在 中应用它标签而不是其他任何地方。 我已经有了这个: $txt = $this->input->post('
我想删除 xxx yyyy zzz 用 php。但是,首先,我想控制字符串是否以 开头并以 结尾 是否有用于此目的的函数? if(string begins with '' and ends wi
在我的模板中加载自定义标签时出现此错误。我访问了许多关于此的主题,并且确保确认我没有犯一些常见错误: 包含标签的文件在 templatetags 中文件夹。 此 templatetags文件夹包含 _
API doc中没有关于构造函数的文档。我想了解SvgElement.tag()的用途/用例。 最佳答案 SvgElement.tag(String tag)构造函数为对应的SvgElement值创建
$('*').data('tag', "tagged"); $('li[tag=tagged]').length 返回零... 最佳答案 $('*').data('tag', "tagged"); $
下面的代码出错了。我该如何解决这个问题? {% block header %} {% endblock %} 错误输出: TemplateSyntaxError : Invalid bloc
我是一名优秀的程序员,十分优秀!