css content属性是否会破坏内容和分离规则,因为css用于表示不生成内容？
css content属性的其他好用途是什么？我只在clearfix黑客中见过它.
在LaTeX中创建交叉引用的常用方法是在\label内部放置一些您想要引用的内容,然后使用\ref.因此,例如,as we saw in Section~\ref{intro}在LaTeX源代码中写入可能会产生"正如我们在第1节中所见"的最终输出.是否可以仅使用HTML和CSS获得相同的效果？CSS的新功能允许部分等自动编号,但我没有找到任何允许您从文档中的其他位置引用这些计数器值的内容.
这是一个具体的例子:
<!DOCTYPE html>
<html>
<head>
<title>Cross references</title>
<meta charset="utf-8">
<style type="text/css">
body {
counter-reset: section;
}
section > h1::before {
counter-increment: section;
content: counter(section) ". ";
}
</style>
</head>
<body>
<section>
<h1 id="intro">Introduction</h1>
<p>Pineapples contain essential vitamins.</p>
</section>
<section>
<h1>Further discourse on pineapples</h1>
<p>As we saw in Section ??, pineapples contain essential vitamins.</p>
</section>
</body>
</html>
在此示例中,所有章节标题前面都有一个自动生成的数字.我想知道是否有任何HTML标记或CSS样式,我可以使用??它来插入对应的数字#intro.
我意识到我可以使用<a href="#intro">创建一个交叉超链接到引言,但我也想在链接文本中包含节号.
如果仅使用HTML和CSS无法做到这一点,是否有任何用于在文档中添加交叉引用的JavaScript库？
我的CSS伪代码不被jQuery识别:这是我的代码
CSS:
h1 {
background: red;
width: 100px;
display: inline-block;
}
h1:after {
content:" | ";
background:blue;
display: inline-block;
}
然后在jQuery我做:
console.log($('h1').css('backgroundColor'));
显示:
rgb(255, 0, 0)
但当我这样做时:
console.log($('h1:after').css('backgroundColor'));
显示:
undefined
这是一个非常快速的问题:)
只是想知道这里是否有可能让javascript选择不属于DOM的对象...比如选择CSS创建的内容:after或:before内容？
例如...如果我有一个div并通过创建一个框
div:after{
content: '.';
display: block;
width: 200px;
height: 200px;
background: green;
}
我仍然很难理解这些元素是如何创建的,因为它们可以在屏幕上绘制元素但不是DOM的一部分,这是否意味着它不可能与它们交互？
干杯
有没有办法获取有序列表项的数字的内容？
var list = document.getElementById('list');
list.style.listStyleType = 'upper-roman';
<ol class="list" id="list">
<li class="list__item">apple</li>
<li class="list__item">banana</li>
<li class="list__item" id="target">orange</li>
<li class="list__item">pear</li>
</ol>这将产生这样的项目列表.
I. apple
II. banana
III. orange
IV. pear
III的文本字符串#target？这里的罗马字符只是一个例子.我希望能够访问任何list-style-type选项提供的内容.
我正在将75页的工作能力指数数字化.用户需要能够链接到每个能力,能力有意义地分组,并且能力通常是句子长.因此,我不是将每个能力的文本用作锚点,而是创建标签方案并为每个项目创建锚点.能力"从左边知道你的右手"可以给出标签"E.1.A.2.2".这很乏味.
我试图保护自己不再手动将标签添加到每个能力中(因为我已经在锚中添加了一次.)为了显示标签,我可以使用伪元素:before从锚点生成标签,{content: attr(name);}.
这很好用,但生成的文本不可选.要创建指向特定能力的链接,用户必须手动输入"#E.1.A.2.2",这会引起比我想要的更多用户错误.
是否可以使伪元素生成的文本可选？我也对其他建议持开放态度.如果在HTML中创建每个标签是获得所需结果的唯一方法,我会这样做.但是哎哟.