Question

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

A
  B
  B
  C
  C

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

使用Stylish你不能改变页面的HTML，只是css，我知道我可以将它嵌套在HTML中，但这不是一个选项。

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

Answer 1

这是你想要实现的吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

唯一＆＃34;技巧＆＃34; 是我必须在.c之后使用紧跟在后的元素的顶部边框才能放置＆＃34;底部＆＃34; .c组中最后一个.c的边框。目前，没有办法选择一组具有特定班级的直接兄弟姐妹。当您知道组中.c的最后一个元素时，评估的最后一点是当您评估下一个项目并看到它没有.c时。但是在那时，你不能在之前设置元素的样式，因为CSS只能向前解析，而不能向后解析。

简而言之，如果元素之间有余量，则只能使用CSS（ * 参见注释）。对于javascript来说这是微不足道的（如果有任何帮助，我可以提供它。）

* 实际上，即使在元素之间有边距，null - .c之间的边距也可以使这项工作正常工作:not(.c)并将差异应用于:not(.c)的第一个孩子。找到一种在任何情况下都能起作用的神奇解决方案是很麻烦的。大多数情况下，对这些内容进行编码，查看现有元素并找到技巧，使其＆＃34;看起来像<＃34; 它的工作原理。
这就是我们现在所拥有的一切。：）

Answer 2

假设<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底部有边距，则需要将边距添加到边框宽度并在顶部应用负边距。

Answer 3

如果您想要一个能够解释任意数量的.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>

{{1}}

在Css中，如何选择儿童元素？

3 个答案: