Question

我想同时使用[href * =“foo”]和：last-of-type。我找不到有效的组合。输出如下：

艺术家姓名类型类型话题话题主题

.tags a[href*="genre"]:last-of-type { margin-bottom: 1rem; }

我想在最后一个“艺术家”和最后一个“流派”上设置一些底部边距。这是一个小提琴：https://jsfiddle.net/40whp0ph/。请注意，艺术家和最后一个类型的边距底部是我想要的，但不是第一个类型的边距底部。

有人能指出如何从除最后一个类型之外的所有区域移除边距底部吗？

谢谢！

Answer 1

解决方案是完全被低估的+组合子有了这个，我们可以给一些选择器一个样式，然后重置同一选择器的样式，如果它直接再次出现。换句话说，只将样式赋予此类的第一个元素。

＆＃13;

.tags a { display: block; }
.tags a[href*="genre"] { margin-top: 1rem; }
.tags a[href*="genre"] + a[href*="genre"] { margin-top: 0; }
.tags a[href*="topic"] { margin-top: 1rem; }
.tags a[href*="topic"] + a[href*="topic"] { margin-top: 0; }

＆＃13;

<div class="tags">
  <h3>Tags</h3>
  <a href="https://awesomechristianmusic.com/tag/artist-glad/" rel="tag">Artist: Glad</a>
  <a href="https://awesomechristianmusic.com/tag/genre-a-capella/" rel="tag">Genre: A Capella</a>
  <a href="https://awesomechristianmusic.com/tag/genre-hymns/" rel="tag">Genre: Hymns</a>
  <a href="https://awesomechristianmusic.com/tag/topic-faith/" rel="tag">Topic: Faith</a>
  <a href="https://awesomechristianmusic.com/tag/topic-god/" rel="tag">Topic: God</a>
  <a href="https://awesomechristianmusic.com/tag/topic-prayer/" rel="tag">Topic: Prayer</a>
</div>

＆＃13;

或者，如果你确定在除了元素之外的div中没有其他东西，你可以将css缩短为这样的东西：

.tags a {display: block;}
.tags a:not([href*="genre"]) + a[href*="genre"],
.tags a:not([href*="topic"]) + a[href*="topic"] {margin-top: 1rem;}

将CSS Selector *与last-of-type结合使用

1 个答案: