0

嘿伙计们，我正在尝试使用 Stylish（Chrome 扩展程序）在此页面上的一些元素周围设置边框。这是页面的结构，代表不同类的字母..

A
  B
  B
  C
  C

我想在“C”周围放置边框，如果我只是通过调用 C 类来做到这一点，我最终会在两个 C 类之间使用边框。那么有没有一种方法可以将两个 C 一起选择为一个元素。

使用 Stylish，您无法更改页面的 HTML，只能更改 css，我知道我可以将其嵌套在 HTML 中，但这不是一个选项。

编辑：C 也出现在页面的其他区域。

4

3 回答 3

2

Is this what you want to achieve? 

.a>.c {
  border: solid red;
  border-width: 0 1px;
}
.a>*:not(.c) + .c,
.a>.c:first-child {
  border-top-width: 1px;
}
.a>.c + *:not(.c) {
  border-top: 1px solid red;
}
.a>.c:last-child {
  border-bottom-width: 1px; 
}
<div class="a">
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<hr />
<div class="a">
  <div class="c">C</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="d">D</div>
</div>
<hr />
<div class="a">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="d">D</div>
  <div class="c">C</div>
</div>
<hr />
<div class="a">
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
</div>
<hr />
<div class="a">
  <div class="c">C</div>
</div>

The only "trick" is that I have to use the top border of an immediately following element after a .c in order to place the "bottom" border of the last .c in a group of .cs. Currently there's no way to select a group of immediate siblings with a certain class. The point in evaluation when you know the last element with .c in a group is the last is when you evaluate the next item and see it doesn't have .c. But at that point, you can't style the element before, because CSS only parses forward, never backwards.

In short, if you have a margin between elements, there is no way to do only with CSS (* see note). It would be trivial with javascript (I can provide it, if of any help).

* Actually, you could make this work even if with margins between elements, by null-ing the margins between .c and any :not(.c) and applying the difference to the first child of the :not(.c) instead. It's cumbersome to find a magical solution that would work in any case. Most times, these things are coded looking at the existing elements and finding tricks to make it "look like" it works.
That's all we have right now. :)

于 2017-03-17T20:59:28.527 回答
0

如果您想要一个解决任意数量.c元素的解决方案，您需要申请：

  • .c所有元素的左边框和右边框
  • .c第一个元素的边框顶部
  • .c最后一个元素的边框底部

但。没有:nth-of-class伪选择器。

所以：

  • 第一个.c元素可以选择（而不是）.b + .c。
  • 最后一个.c元素可以选择（而不是）:last-of-type

工作示例：

section {
width: 120px;
text-align: center;
background-color: rgb(191, 191, 191);
}

div {
padding: 3px;
}

.c {
border-right: 2px solid rgb(255, 0, 0);
border-left: 2px solid rgb(255, 0, 0); 
}

.b + .c {
border-top: 2px solid rgb(255, 0, 0);
}

div:last-of-type.c {
border-bottom: 2px solid rgb(255, 0, 0);
}
<section>
<div class="a">a</div>
<div class="b">b</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="c">c</div>
</section>

于 2017-03-19T11:21:57.837 回答
0

假设您的 和 之间没有空间<div>

div{
  border: 1px solid #dadada;
  min-height: 50px;
}
.c{
  border: 1px solid red;
}
.c + .c{
  border-top-color: white;
  margin-top: -1px;
}
<div class="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="c"></div>
  <div class="b"></div>
</div>

您需要将 设置border-top-color为.c- 如果底部有边距，.c则需要将该边距添加到边框宽度并在顶部应用负边距。

于 2017-03-17T20:53:53.063 回答