- 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/
我在优化 JOIN 以使用复合索引时遇到问题。我的查询是: SELECT p1.id, p1.category_id, p1.tag_id, i.rating FROM products p1
我有一个简单的 SQL 查询,我正在尝试对其进行优化以删除“使用位置;使用临时;使用文件排序”。 这是表格: CREATE TABLE `special_offers` ( `so_id` int
我有一个具有以下结构的应用程序表 app_id VARCHAR(32) NOT NULL, dormant VARCHAR(6) NOT NULL, user_id INT(10) NOT NULL
此查询的正确索引是什么。 我尝试为此查询提供不同的索引组合,但它仍在使用临时文件、文件排序等。 总表数据 - 7,60,346 产品= '连衣裙' - 总行数 = 122 554 CREATE TAB
为什么额外的是“使用where;使用索引”而不是“使用索引”。 CREATE TABLE `pre_count` ( `count_id`
我有一个包含大量记录的数据库,当我使用以下 SQL 加载页面时,速度非常慢。 SELECT goal.title, max(updates.date_updated) as update_sort F
我想知道 Using index condition 和 Using where 之间的区别;使用索引。我认为这两种方法都使用索引来获取第一个结果记录集,并使用 WHERE 条件进行过滤。 Q1。有什
I am using TypeScript 5.2 version, I have following setup:我使用的是TypeScript 5.2版本,我有以下设置: { "
I am using TypeScript 5.2 version, I have following setup:我使用的是TypeScript 5.2版本,我有以下设置: { "
I am using TypeScript 5.2 version, I have following setup:我使用的是TypeScript 5.2版本,我有以下设置: { "
mysql Ver 14.14 Distrib 5.1.58,用于使用 readline 5.1 的 redhat-linux-gnu (x86_64) 我正在接手一个旧项目。我被要求加快速度。我通过
在过去 10 多年左右的时间里,我一直打开数据库 (mysql) 的连接并保持打开状态,直到应用程序关闭。所有查询都在连接上执行。 现在,当我在 Servicestack 网页上看到示例时,我总是看到
我使用 MySQL 为我的站点构建了一个自定义论坛。列表页面本质上是一个包含以下列的表格:主题、上次更新和# Replies。 数据库表有以下列: id name body date topic_id
在mysql中解释的额外字段中你可以得到: 使用索引 使用where;使用索引 两者有什么区别? 为了更好地解释我的问题,我将使用下表: CREATE TABLE `test` ( `id` bi
我经常看到人们在其Haxe代码中使用关键字using。它似乎在import语句之后。 例如,我发现这是一个代码片段: import haxe.macro.Context; import haxe.ma
这个问题在这里已经有了答案: "reduce" or "apply" using logical functions in Clojure (2 个答案) 关闭 8 年前。 “and”似乎是一个宏,
这个问题在这里已经有了答案: "reduce" or "apply" using logical functions in Clojure (2 个答案) 关闭 8 年前。 “and”似乎是一个宏,
我正在考虑在我的应用程序中使用注册表模式来存储指向某些应用程序窗口和 Pane 的弱指针。应用程序的一般结构如下所示。 该应用程序有一个 MainFrame 顶层窗口,其中有几个子 Pane 。可以有
奇怪的是:。似乎a是b或多或少被定义为id(A)==id(B)。用这种方式制造错误很容易:。有些名字出人意料地出现在Else块中。解决方法很简单,我们应该使用ext==‘.mp3’,但是如果ext表面
我遇到了一个我似乎无法解决的 MySQL 问题。为了能够快速执行用于报告目的的 GROUP BY 查询,我已经将几个表非规范化为以下内容(该表由其他表上的触发器维护,我已经同意了与此): DROP T
我是一名优秀的程序员,十分优秀!