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删除"-"？我不确定该怎么做。

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

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删除<?php $last=20; $current=8; $first=1; $output=""; $show_limit=3; if($show_limit==$last){ for($i=1;$i<=$last;$i++){ if(empty($output)) $output.="$i"; else $output.=",$i"; } $output="first,$output,last"; }else{ if($current-ceil($show_limit/2) <=$first){ for($i=1;$i<=$show_limit+1;$i++){ $output.=",$i"; } $output="first$output,..,$last,last"; }else if($current+ceil($show_limit/2)>=$last){ for($i=1;$i<$show_limit+1;$i++){ $output=",". intval($last-$i). $output; } $output="first,1,..".$output. ",$last,last"; }else{ $output="first,1,..,"; $start=$current-floor($show_limit/2); for($i=0;$i<$show_limit;$i++){ $cursor=intval($start+$i); if($cursor==$last) break; $output.=$cursor.","; } $output.="..,$last,last"; } } echo $output."\n";，因为它不单独属于任何元素。在{当前驻留的标签}中，还有更多元素都将受CSS影响。将"-"放入"-"

span

Answer 3

您无法真正将其删除，但可以将其隐藏。如果您将其颜色设为与背景相同的颜色，然后将选项稍微向左移动，则它看起来应该已被删除。

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 4

您无法删除它，但是您可以对其进行破解，如果您可以将其包装在一个跨度中，则很简单，请参阅第二部分，或者Hacki解决方案将字体大小更改为0，然后恢复其他所有字体的大小。 / p>

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>

Answer 5

您不能单独管理“-”，因为它不能单独用html标记包裹。可能是您可以用与背景或其他技巧匹配的颜色在视觉上隐藏它。但是然后，您必须再次将反向css应用于兄弟元素，例如span，input等。

Answer 6

您可以通过将-放入跨度并添加此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>

CSS不显示HTML元素之间的文本

6 个答案: