相关疑难解决方法(0)

带有类的第一个元素的CSS选择器

我有一堆带有类名的元素red,但我似乎无法class="red"使用以下CSS规则选择第一个元素:

.red:first-child {
    border: 5px solid red;
}
Run Code Online (Sandbox Code Playgroud)
<p class="red"></p>
<div class="red"></div>
Run Code Online (Sandbox Code Playgroud)

这个选择器有什么问题,我该如何纠正?

感谢这些评论,我发现该元素必须是其父母的第一个孩子才能被选中,这与我的情况不同.我有以下结构,这条规则失败,如评论中所述:

.home .red:first-child {
    border: 1px solid red;
}
Run Code Online (Sandbox Code Playgroud)
<div class="home">
    <span>blah</span>
    <p class="red">first</p>
    <p class="red">second</p>
    <p class="red">third</p>
    <p class="red">fourth</p>
</div>
Run Code Online (Sandbox Code Playgroud)

我怎样才能让第一个孩子上课red

css css-selectors

883
推荐指数
12
解决办法
93万
查看次数

居中和右对齐flexbox元素

我想有A BC中间对齐.

我怎样才能D完全走向正确?

之前:

在此输入图像描述

后:

在此输入图像描述

这样做的最佳做法是什么?

ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
li:last-child {
  background: #ddd;
  /* magic to throw to the right*/
}
Run Code Online (Sandbox Code Playgroud)
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/z44p7bsx/

html css css3 flexbox

94
推荐指数
4
解决办法
4万
查看次数

标签 统计

css ×2

css-selectors ×1

css3 ×1

flexbox ×1

html ×1