如何添加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>