css - 如何为从某个类到某个类的范围内的元素添加 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 border-left:1px solid blue;到从开始内容到结束内容范围内的所有元素。

它应该看起来像盒子，只寻找 css 解决方案..我知道 javascript，jquery 解决方案...

Answer 1

您可以像这样使用兄弟选择器:

[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;
}

这将选择开始内容之后的所有段落元素并应用左右边框。