css不显示html元素之间的文本[重复]

Question

设置

我有一段 HTML，看起来像，

<label for="offeringID_0">
        <input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
        <span class="product-name">
            This product: JSDA JD6500                         
        </span>
        "-"
        <span class="price">
            <del>
                <span class="woocommerce-Price-amount amount">
                    # irrelevant span content
                </span>
            </del>
        </span>
    </label>

渲染得很好。

---

问题

是否可以使用 CSS 删除 "-"？我不知道该怎么做。

我已经在<label for="offeringID_0"> 元素上尝试了display:none;，但是没有显示元素内的任何内容。

Answer 1

将font-size:0px 与label 一起使用，如下所示

label {  
  font-size: 0;  
}
label>* {  
  font-size: 16px;  
}
label del{
  text-decoration:none;
}

<label for="offeringID_0">
    <input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
    <span class="product-name">
        This product: JSDA JD6500                         
    </span>
    "-"
    <span class="price">
        <del>
            <span class="woocommerce-Price-amount amount">
                # irrelevant span content
            </span>
        </del>
    </span>
</label>

Answer 2

您不能使用 CSS 删除 "-"，因为它不属于任何单独的元素。在标签{当前所在的位置}内，还有更多元素都会受到 css 的影响。 将"-" 放入span

<span class="removeThis">"-"</span>


.removeThis
{
display:none;
}



 or



label > .removeThis
{
display:none;
}

Answer 3

你不能单独管理“-”，因为它不是单独用 html 标签包裹的。也许您可以使用与背景匹配的颜色或其他一些技巧在视觉上隐藏它。但是你必须再次将反向 css 应用于跨度、输入等兄弟元素。

Answer 4

您可以通过将 - 放入跨度并添加此 css！

希望这会有所帮助！

span:nth-of-type(2) {
  display: none;
}

<label for="offeringID_0">
    <input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
    <span class="product-name">
        This product: JSDA JD6500                         
    </span>
    <span>"-"</span>
    <span class="price">
        <del>
            <span class="woocommerce-Price-amount amount">
                # irrelevant span content
            </span>
        </del>
    </span>
</label>

Answer 5

你不能真正删除它，但你可以隐藏它。 如果你将它的颜色与背景相同，并将 proice 稍微向左移动，它应该看起来像是被移除了。

label{
  color: #FFFFFF;  /* make all label text white, hiding everything, including the dash */
}

label>*{
  color: #000000; /* revealing all elements except the dash */
}

label .price{
  margin-left: -20px; /* move the price slightly to the left, to accomodate for the hidden dash */
}

<label for="offeringID_0">
    <input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
    <span class="product-name">
        This product: JSDA JD6500                         
    </span>
    "-"
    <span class="price">
        <del>
            <span class="woocommerce-Price-amount amount">
                # irrelevant span content
            </span>
        </del>
    </span>
</label>

Answer 6

你不能删除它，但你可以破解它，如果你可以将它包装在一个跨度中，那么它很简单，请参见第二部分，或者 hacki 解决方案将字体大小更改为 0，然后恢复其他所有内容的字体大小。

label {
  display: block;
  font-size: 0;
}

label * {
  font-size: 15px;
}





label .hide {
  display: none;
}

<label for="offeringID_0">
    <input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
    <span class="product-name">
        This product: JSDA JD6500                         
    </span>
    <span class="hide">"-"</span>
    <span class="price">
        <del>
            <span class="woocommerce-Price-amount amount">
                # irrelevant span content
            </span>
        </del>
    </span>
</label>


<label for="offeringID_0">
    <input type="checkbox" name="offeringID[]" id="offeringID_0" class="active" value="4268" checked="checked">
    <span class="product-name">
        This product: JSDA JD6500                         
    </span>
    "-"
    <span class="price">
        <del>
            <span class="woocommerce-Price-amount amount">
                # irrelevant span content
            </span>
        </del>
    </span>
</label>