返回

CSS选择器小游戏通关挑战（下）——轻松拿下32个关卡

前端

1️⃣ 前言

上一篇笔记记录了这个选择器小游戏的前16个关卡 ，今天把剩下的16个补充完。

游戏链接

2️⃣ 17. 隐藏所有
元素中的文本，除了带有“important”类的
元素。

div:not(.important) {
  color: transparent;
}

3️⃣ 18. 将所有
  • 元素的背景色设置为绿色，但排除
      元素的第一个
    • 元素。

    • li:not(:first-child) {
  background-color: green;
}

    4️⃣ 19. 为所有

    元素添加一个上边距，但排除带有“special”类的

    元素。

    p:not(.special) {
  margin-top: 1em;
}

    5️⃣ 20. 将所有元素的文本颜色设置为蓝色，但不包括带有“external”类的元素。

    a:not(.external) {
  color: blue;
}

    6️⃣ 21. 使所有元素的边框为虚线，但排除带有“responsive”类的
    元素。
    table:not(.responsive) {
  border-style: dotted;
}

    7️⃣ 22. 将所有元素的宽度设置为200px，但不包括带有“large”类的元素。

    img:not(.large) {
  width: 200px;
}

    8️⃣ 23. 为所有
    元素添加一个红色边框，但排除带有“inline”类的元素。

    form:not(.inline) {
  border-color: red;
}

    9️⃣ 24. 将所有元素的文本设置为大写，但排除带有“password”类的元素。

    input:not(.password) {
  text-transform: uppercase;
}

    🔟 25. 将所有

    button:not(.disabled) {
  background-color: green;
}

    1️⃣1️⃣ 26. 将所有元素。

    select:not(.multiple) {
  font-style: italic;
}

    1️⃣2️⃣ 27. 为所有