是否有處理選擇「的元素包含類的元素」

Question

我有HTML這樣的：

<div class="form-group"> 
    <input type="email" class="form-control> 
    <div class="form-error">This is not valid email address</div> 
</div> 

我打印div.form-error動態如果輸入有錯誤。

如果在div.form-group中有div.form-error，我需要CSS代碼才能使輸入的邊框變紅。

我正在與SASS合作，也許它有一個功能來做到這一點。我正在尋找這樣的東西：

.form-group { 
    &:contains('.form-error') { 
     input { 
      border: 1px solid red; 
     } 
    } 
} 

我該怎麼辦？

Answer 1

好了，而我的意見仍然有效–這是不可能使用CSS樣式以前的兄弟姐妹，或祖先的基礎上，後續的兄弟姐妹或後代–有一個方法。雖然它確實需要改變你的HTML，它仍然會模擬你在問題中發佈的元素順序。

這就是說，HTML從改變後：

<div class="form-group"> 
    <input type="email" class="form-control" /> 
    <div class="form-error">This is not valid email address</div> 
</div> 

要：

<div class="form-group"> 
    <div class="form-error">This is not valid email address</div> 
    <input type="email" class="form-control" /> 
</div> 

.form-group { 
 
    /* to use the flex layout model: */ 
 
    display: flex; 
 

 
    /* to have the elements arranged 
 
    in a column instead of a row 
 
    (which you may or may not want): */ 
 
    flex-direction: column; 
 

 
    /* aesthetics, adjust to taste: */ 
 
    width: 50%; 
 
    border: 1px solid #000; 
 
    margin: 0 0 0.5em 0; 
 
} 
 

 
.form-group .form-error { 
 
    /* places the .form-error element(s) 
 
    at the end of the layout in position 
 
    2, which causes the <input> to take 
 
    position 1; note that the elements 
 
    are still in the same place for CSS 
 
    selection: */ 
 
    order: 2; 
 
} 
 

 

 
/* This styles the email <input> element if 
 
    it follows the .form-error element: */ 
 
.form-error + input[type=email] { 
 
    border-color: red; 
 
}

<div class="form-group"> 
 
    <div class="form-error">This is not a valid email address</div> 
 
    <input type="email" class="form-control" /> 
 
</div>

另外值得注意的是，根據caniuse.com，Flexbox的目前全部可用瀏覽器;儘管您的用戶可能沒有將自己的瀏覽器更新爲當前（或之前）版本。

有，當然，你可以做到這一點只需使用:invalid僞類的其他方式：

/* Selects any <input> element whose value is invalid: */ 
 
input:invalid { 
 
    border-color: red; 
 
}

<div class="form-group"> 
 
    <input type="email" class="form-control" /> 
 
    <div class="form-error">This is not a valid email address</div> 
 
</div>

，當然，你甚至可以用衰落來顯示或隱藏錯誤消息：

/* Selects any <input> element whose value is invalid: */ 
 

 
input:invalid { 
 
    border-color: red; 
 
} 
 

 
/* hides the .form-error element using the opacity 
 
    property which takes a value, which allows it 
 
    to be animated from hidden (opacity: 0) to shown 
 
    (opacity: 1): */ 
 
.form-error { 
 
    /* visually hidden: */ 
 
    opacity: 0; 
 
    /* specifies that the opacity property should be 
 
    transitioned over a 0.3 second time in a linear 
 
    animation: */ 
 
    transition: opacity 0.3s linear; 
 
} 
 
/* Selects the .form-error element that immediately 
 
    follows an <input> which is :invalid */ 
 
input:invalid+.form-error { 
 
    opacity: 1; 
 
}

<div class="form-group"> 
 
    <input type="email" class="form-control" /> 
 
    <div class="form-error">This is not a valid email address</div> 
 
</div>

參考書目：

• 「Using CSS Flexible Boxes」。

Answer 2

正如人們在評論中正確指出的那樣，您需要改變標記以使其發揮作用。您可以使用sibling選擇： https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors

.form-group { 
    .form-error + input { 
     border: 1px solid red; 
    } 
} 

.form-error + input { 
 
    border: 1px solid red; 
 
}

<div class="form-group"> 
 
    <div class="form-error">This is not valid email address</div> 
 
    <input type="email" class="form-control" /> 
 
</div>

Answer 3

您可以使用child selectors和sibling selectors。

對於示例：

.form-group { 
    .form-error ~ input { 
     border: 1px solid red; 
    } 
}