我目前正在制作一个自定义网站CSS但遇到了一个我无法在网上找到的问题。我试图删除span
的值但显示其中的元素,在本例中为a
。
示例中的期望结果是单词Foo!
&没有Bar!
的{{1}}。
-
这不起作用,相当明显,但无论如何都会显示我的尝试,(它会删除所有内容)。
<style>
span
{display: none;}
span a
{display: block}
</style>
<span>
- <a href="#">Foo!</a>
- <a href="#">Bar!</a>
</span>
我的第二次尝试,也没有用,但我想不到更多。 (还删除所有内容)。
删除<style>
span:not(a)
{display: none;}
</style>
<span>
- <a href="#">Foo!</a>
- <a href="#">Bar!</a>
</span>
不是问题,但反过来似乎很难。我要么愚蠢,要么尝试不可能的事情?
它为a
构建,因此任何Firefox
解决方案都可以。
提前致谢。
答案 0 :(得分:3)
最简单的方法是:
span {
font-size: 0;
}
span a {
font-size: 16px;
}
<span>
- <a href="#">Foo!</a>
- <a href="#">Bar!</a>
</span>
或者,使用rem
('root em')而不是px
:
span {
font-size: 0;
}
span a {
font-size: 1rem;
}
<span>
- <a href="#">Foo!</a>
- <a href="#">Bar!</a>
</span>
您的解决方案无法正常运行,因为在您第一次尝试的情况下:
span {
display: none;
}
span a {
display: block;
}
无法显示将“display”属性设置为“none”的元素的子元素。而且,你的第二个解决方案:
span:not(a) {
display: none;
}
将匹配任何<span>
元素,因为<span>
无法(在任何情况下)都可以成为<a>
元素。
如果JavaScript是一个选项 - 它不是一个要求,只是一个选项 - 那么以下也可以工作:
function removeSpanText(span) {
// getting the childNodes of the <span>:
var children = span.childNodes,
// a counter to keep track of where we
// are in the (following) while loop:
count = 0,
// the 'current' element upon which we'll
// acting within said while loop:
current = children[count];
// while the live NodeList of the <span> element's
// childNodes still contains a number of elements
// AND the count variable is still less than that
// number of elements (accidental infinite loops are
// frustrating):
while (children.length && count < children.length) {
// if the current node has a nodeType of 3
// and is therefore a textNode:
if (current.nodeType === 3) {
// we remove the current node:
current.parentNode.removeChild(current);
} else {
// otherwise we increment the count variable:
count++;
}
// and reset the current variable to
// hold either the element at the current
// count number (if we removed the Node) or
// or to the incremented count number
// (if the Node was not a textNode):
current = children[count];
}
}
// getting a reference to <span elements within the
// document:
var spans = document.getElementsByTagName('span');
// using Array.prototype.forEach(), with
// Function.prototype.call(), to iterate
// over that NodeList:
Array.prototype.forEach.call(spans, function(span) {
// the name of the first argument (here: 'span') is
// user-defined, but is always the current array-element
// of the array over which we're iterating.
// calling the function, passing the span variable
// as the argument:
removeSpanText(span);
});
function removeSpanText(span) {
var children = span.childNodes,
count = 0,
current = children[count];
while (children.length && count < children.length) {
if (current.nodeType === 3) {
current.parentNode.removeChild(current);
} else {
count++;
}
current = children[count];
}
}
var spans = document.getElementsByTagName('span');
Array.prototype.forEach.call(spans, function(span) {
removeSpanText(span);
});
<span>
- <a href="#">Foo!</a>
- <a href="#">Bar!</a>
</span>