用於無子元素的標籤的CSS選擇器

首先，該問題的解決方案：CSS selector to bold only labels without child elements不能解決我的問題。用於無子元素的標籤的CSS選擇器

我只有文本標籤，其他文本和子輸入，選擇和textarea窗體的元素。

即：

<label class="control-label">State 
      <select name="status" id="status" class="form-control"> 
       <option value="">Choose..</option> 
           ... 
          </select> 

     </label>

和其他類似：

<label for="defect" class="control-label">Error</label>

我需要設置white-space: nowrap到只和對上述問題的回答說，我嘗試以下沒有子HTML元素的標籤：

label{ 
    white-space: nowrap; /* Label without HTML*/ 
} 
label + label { 
    white-space: normal; /* Label with HTML */ 
}

但是，它不起作用。

來源

2017-09-21 SaidbakR

我敢肯定，有沒有簡單的方法來做到這一點。 –

你可以修改標記嗎？ – hungerstar

我不認爲有一種方法可以用選擇器來做到這一點。 JS解決方案是可以接受的嗎？ – jfeferman

一種解決方案是向元素添加一個類並使用CSS對其進行相應的格式化。

label.empty { white-space: nowrap; }

鏈接到文件：https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors

其他評論指向使用:empty但在你的情況下，<label>包含一些文本和空不適

來源

2017-09-21 20:19:03 faabiopontes

AFAIK有沒有使用CSS選擇器的解決方案。 @FabioPontes提出的通過一個額外的類名進行控制的解決方案將是最直接的。

以下是一個JavaScript解決方案，用於驗證元素的子節點，並在以下情況下應用white-space:nowrap（1）只有一個子節點和（2）此節點的類型爲文本。請查看node types。

var elements = document.getElementsByClassName("control-label"); 
 

 
for (i = 0; i < elements.length; i++) { 
 
    if (elements[i].childNodes.length == 1 && elements[i].childNodes[0].nodeType == 3) { 
 
    elements[i].style.whiteSpace = "nowrap"; 
 
    } 
 
}

<div> 
 

 
    <label class="control-label">State - we need a really long text to check if the white-space nowrap is actually working so lets place this text here. 
 
    <select name="status" id="status" class="form-control"> 
 
     <option value="">Choose..</option> 
 
    </select> 
 

 
    </label> 
 
</div> 
 

 
<div style="margin-top:20px;"> 
 

 
    <label for="defect" class="control-label">Error - we need a really long text to check if the white-space nowrap is actually working so lets place this text here.</label> 
 
</div>

來源

2017-09-21 20:34:08 jfeferman

添加類的選項已經提出由法比奧·龐特斯，是一個很好的，但如果你不想添加類，這裏有幾個選項。

您可以做的第一件事是修改您的標記以將每個label包含在div中，然後利用:only-child僞選擇器。爲了達到這個目的，你必須包含select元素作爲label的兄弟，而不是它的孩子。

.control-label-wrapper label:only-child { 
 
    white-space: nowrap; 
 
}

<div class="control-label-wrapper"> 
 
    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label> 
 
    <select name="status" id="status" class="form-control"> 
 
    <option value="">Choose..</option> 
 
    </select> 
 
</div> 
 

 
<div class="control-label-wrapper"> 
 
    <label for="defect" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label> 
 
</div>

這可能不是需要修改你的makup在所有是使用attribute selector另一種選擇。也許你已經爲所有這些無子標籤使用了一個屬性。您問題中的示例HTML表明您可能是。

label[for="defect"] { 
 
    white-space: nowrap; 
 
}

<label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis. 
 
    <select name="status" id="status" class="form-control"> 
 
    <option value="">Choose..</option> 
 
    </select> 
 
</label> 
 

 
<label for="defect" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut tellus massa. Phasellus dictum mollis lobortis.</label>

來源

2017-09-21 21:20:23 cjl750

用於無子元素的標籤的CSS選擇器

回答

相關問題