Question

我正在玩CSS选择器，我想知道我是否可以构建一个自定义css选择器，仅在只有一个类.widget-button时才能工作，示例代码;

<div class='container a'>
  <div class='widget-a' />
  <div class='widget-b' />
  <div class='widget-button' /> 
  <div class='widget-b' />
</div>

所以你会认为这是＆＃39;伪选择器（:only-child ?）的组合到这个工作，将适用于上述？然而，下面的示例应该没有选择/样式应用，因为那里有更多的类。

<div class='container b'>
  <div class='widget-a' />
  <div class='widget-b' />
  <div class='widget-button' />
  <div class='widget-z' />
  <div class='widget-x' />
  <div class='widget-button' />
  <div class='widget-z' />
</div>

这里有一个JSFiddle https://jsfiddle.net/2L593m3x/

Answer 1

我可以构建一个自定义css选择器，仅在只有一个类
时才能工作

长话短说：不。

我们在此处不断提出有关如何选择nth-of-class的问题。

您无法选择nth-of-class。

您可以选择儿童。

您可以按元素输入。

进行选择

您无法按元素类选择。

在某些点，nth-match（以及互补选择器）可能到达：

<强> e.g。

.widget-button:nth-match(2n+1)
.widget-button:first-match
.widget-button:last-match
.widget-button:only-match

Answer 2

如果您可以创建自定义标记（或Web Components得到广泛支持），您可以使用:only-of-type：

div>* {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: red;
}

widget-button:only-of-type {
  background-color: blue;
}

<div>
  <widget-a></widget-a>
  <widget-b></widget-b>
  <widget-button></widget-button>
  <widget-b></widget-b>
</div>
<div>
  <widget-a></widget-a>
  <widget-b></widget-b>
  <widget-button></widget-button>
  <widget-z></widget-z>
  <widget-x></widget-x>
  <widget-button></widget-button>
  <widget-z></widget-z>
</div>

Answer 3

.wrapper {
  margin: 50px 0;
  padding: 0 10px;
  border: 1px solid #555;
}

.wrapper div {
  border: 1px solid #555;
  padding: 0px 5px 10px 5px;
  margin: 10px 0;
}

.wrapper div:not(:first-child:last-child) {
  background-color: gold;
}

<div class="wrapper">
  <div class="container">Container #1</div>
  <div class="container">Container #2</div>
  <div class="container">Container #3</div>
  <div class="container">Container #4</div>
  <div class="container">Container #5</div>
</div>

<div class="wrapper">
  <div class="container">Container #1</div>
</div>

Answer 4

父母中只有一个孩子：

p:has(br:first-child:last-child)

奖金

p:has(br:only-child)

Answer 5

肯定是的，你可以通过链接两个不同的选择器来实现：

是第一个直接的孩子。
是它的最后一个孩子的类型。

.container > .widget-button:nth-child(1):last-child

编辑： 显然我误解了这个问题，但在其他一些情况下这可能会有所帮助。

父节点中只有一个子节点的选择器

5 个答案: