如何添加css元素的範圍從某個類到某些類

Question

如何添加css元素的範圍從某個類到某些類？

我有以下要素：

[roletype~='start-content']{ 
 
    border-top: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
    margin:0; 
 
} 
 
[roletype~='start-content']~* { 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
    margin:0; 
 
} 
 
[roletype~='end-content']{ 
 
    border-bottom: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
    margin:0; 
 
}

<p roletype="role start-content">sdfdfsdddsd</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div> 
 
<div>any div which does not want border<br>but the border is still vissible to this also</div> 
 
<p>any div which does not want border<br>but the border is still vissible to this also</p> 
 
<p>any div which does not want border<br>but the border is still vissible to this also</p> 
 
<div roletype="role start-content">sdfdfsdddsd</div> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div>

我要添加CSS左邊框：1px的固體藍色;到從開始內容到結束內容範圍內的所有元素。

它應該看起來像箱子，尋找CSS解決方案only..I瞭解JavaScript，jQuery的解決方案......

Answer 1

您可以使用屬性選擇器來實現。從/到是不可能的。

[roletype~='start-content']{ 
 
    border-top: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
} 
 
[roletype~='end-content']{ 
 
    border-bottom: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
} 
 
[roletype~='start-content']~*{ 
 
    border-left:1px solid blue 
 
}

<p roletype="role start-content">sdfdfsdddsd</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div> 
 
<br> 
 

 
<br> 
 
<div roletype="role start-content">sdfdfsdddsd</div> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div>

Answer 2

可以使用兄弟選擇這樣的：

[roletype~='start-content']{ 
    border-top: 1px solid blue; 
    border-left:1px solid blue; 
    border-right:1px solid blue; 
    margin:0; 
} 
[roletype~='start-content']~p { 
    border-left:1px solid blue; 
    border-right:1px solid blue; 
    margin:0; 
} 
[roletype~='end-content']{ 
    border-bottom: 1px solid blue; 
    border-left:1px solid blue; 
    border-right:1px solid blue; 
    margin:0; 
} 

這將選擇所有的內容開始後的段落元素，並應用左手和右手邊。

Answer 3

爲了您可以使用同級css slector（+ ou〜），但爲什麼不添加和封閉div來繪製一個像這個例子中的盒子？ ：

[roletype='role'] { 
 
    border: 1px solid blue; 
 
}

<div roletype="role"> 
 
    <p roletype="role start-content">sdfdfsdddsd</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <div roletype="role end-content">sdfdfsdddsd</div> 
 
</div> 
 
<br> 
 

 
<br> 
 
<div roletype="role"> 
 
    <div roletype="role start-content">sdfdfsdddsd</div> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <p>sdfsddfsdds</p> 
 
    <div roletype="role end-content">sdfdfsdddsd</div> 
 
</div>

Answer 4

您可以使用sibling選擇~。爲了不破壞邊界，請將margin刪除至p，並添加padding。

如果你的內容同胞不僅p那麼你可以使用*

[roletype~='start-content']{ 
 
    border-top: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
    margin:0; 
 
    padding: 1em 0; 
 
} 
 
[roletype~='end-content']{ 
 
    border-bottom: 1px solid blue; 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
} 
 
[roletype~='start-content']~* { 
 
    border-left:1px solid blue; 
 
    border-right:1px solid blue; 
 
    margin:0; 
 
    padding: 1em 0; 
 
} 
 
.other { 
 
    border: none; 
 
}

<p roletype="role start-content">sdfdfsdddsd</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div> 
 
<div class="other">any div which does not want border<br>but the border is still vissible to this also</div> 
 
<div roletype="role start-content">sdfdfsdddsd</div> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<p>sdfsddfsdds</p> 
 
<div roletype="role end-content">sdfdfsdddsd</div>