Question

我想定位课程名称divs内uk-width-的所有indicesCursos <{1}}

这就是我正在尝试而且它无法正常工作：

.indicesCursos .[class^="uk-width"]{
    width: 50%;
}

以下作品，虽然它不是我想要实现的方法：

.indicesCursos .uk-width-medium-1-3 {
    width: 50%;
}

.indicesCursos .uk-width-medium-1-4 {
    width: 50%;
}
.indicesCursos .uk-width-medium-1-5 {
    width: 50%;
}
etc...

Answer 1

您可以使用以下选择器：

.indicesCursos div[class^="uk-width"]

＆＃13;

.indicesCursos div[class^="uk-width"]{
    color:red;
}

＆＃13;

<div class="indicesCursos">
    <div class="uk-width-medium-1-3">
        1-3
    </div>
</div>
<div class="indicesCursos">
    <div class="uk-width-medium-1-4">
        1-4
    </div>
</div>
<div class="indicesCursos">
    <div class="uk-width-medium-1-5">
        1-5
    </div>
</div>
<div class="indicesCursos">
    <div>
        don't select me
    </div>
</div>

＆＃13;

Answer 2

您只需要从.[class^="uk-width"]

中删除句点

JS Fiddle

成功：

.indicesCursos [class^="uk-width"]{
    width: 50%;
}

Answer 3

删除.并替换为*：

.indicesCursos *[class^="uk-width"]{
    width: 50%;
}

Answer 4

还有

.indicesCursos [class|="uk-width"] {
  color: red;
}

当属性值以连字符分隔，而不是以空格分隔时，垂直线符号|可以在属性名称和等号之间的选择器的方括号内使用。垂直线表示属性值可以用连字符分隔，但连字符分隔的单词必须以所述值开头。

.indicesCursos [class|="uk-width"] {
  color: red;
}

<div class="indicesCursos">
  <div class="uk-width-medium-1-3">
    Selected 1-3
  </div>
</div>
<div class="indicesCursos">
  <div class="uk-width-medium-1-4">
    Selected 1-4
  </div>
</div>
<div class="indicesCursos">
  <div class="ukwidthmedium-1-5">
    1-5 but not selected
  </div>
</div>
<div class="indicesCursos">
  <div>
    Not selected
  </div>
</div>

在div中使用以类名开头的div来定位div

4 个答案: