Question

我想将CSS类washes_times_links应用于下面的html，但由于某种原因它不起作用。

.washes_times_links a {
  display: block;
  padding: 15px;
  padding: 13px;
  text-align: center;
  color: #3b524b;
  font-size: 15px;
  text-transform: capitalize;
}

.washes_times_links a:nth-child(odd) {
  background-color: #fff;
}

.washes_times_links a:last-child {
  border-radius: 0 0 5px 5px
}

.washes_times_links a:hover {
  color: #fff;
  background-color: #12be9c;
}

<p class="washes_times_links">
  <a href="http://hairactivation.com/male-hairloss-treatment/#wash-hair-less-5-days-week">1 time a week</a>
  <a href="http://hairactivation.com/male-hairloss-treatment/#wash-hair-less-5-days-week">2 times a week</a>
</p>

Answer 1

看起来很好。检查这个[https://jsfiddle.net/nf0a5gq7/][1]中的css属性，你会发现所有的css属性都已应用，但是你已经错过了边界＆＃39;属性（在.washes_times_links a：last-child中），这就是为什么你看不到边框..

Answer 2

一般来说，这对于在这里过路的人来说是有用的。

在奇数/偶数选择器中应用样式：

.class_name a:nth-child(odd) {
  background-color: #ffff99;
}
.class_name a:nth-child(even) {
  background-color: #b8d1f3;
}

为第一个/最后一个选择器应用半径/样式：

.class_name a:first-child {
    border-radius: 5px 5px 0 0;
}
.class_name a:last-child {
    border-radius: 0 0 5px 5px;
}

所有在一起：

<强> HTML

<p class="class_name">
    <a href="#1">1st row</a>
    <a href="#2">2nd row</a>
    <a href="#3">3rd row</a> 
    <a href="#4">4th row</a> 
</p>

<强> CSS

.class_name a {
    /* default links styles */
}
.class_name a:nth-child(odd) {
  background-color: #ffff99;
}
.class_name a:nth-child(even) {
  background-color: #b8d1f3;
}
.classname a:first-child {
    border-radius: 5px 5px 0 0;
}
.class_name a:last-child {
    border-radius: 0 0 5px 5px;
}
.class_name a:hover {
    color: #fff;
    background-color: #12be9c;
}

Tip: How do I ask a good question?

CSS类不适用于

2 个答案: