CSS Diner

2025年1月31日 | 阅读18分钟

引言

CSS Diner是一个非常好的地方，可以让你快速学习CSS。只需完成所有32个挑战，并确保你理解其原理。如果遇到困难，请阅读下方内容，并再次确保你理解其原理。

本文中提供的所有内容都基于CSS Diner游戏。这个Diner的主要目标是让开发者熟悉CSS选择器。

这个游戏的主要目标是借助CSS选择器来选择摇摆的物品。

要获取CSS选择器，我们必须前往CSS选择器描述部分，然后刷新该部分，然后我们就会得到CSS选择器。

用途

对于这个Diner，我们得到了一个GIF，我们将要选择它。借助以下内容，我们应该与同伴一起，然后我们只需选择游戏，然后我们必须开始游戏。

观看：在这个游戏中，首先，我们必须观看gif以了解什么在摇摆。
HTML查看器：然后我们必须点击HTML文件打开它，然后我们必须思考如何制作我们在步骤1中看到的gif。重要的是要定位或选择名称元素，以便我们可能需要推断HTML代码中可用的元素名称、类或属性。
提示：在提示部分，如果我们在编码过程中遇到任何困难，它将提供一些提示以进入正确的路径。我们可以在提示部分找到CSS选择器描述和示例部分的具体内容。
CSS查看器：当我们点击CSS查看器时，我们可能会看到一个问题的多个解决方案。我们也可能会从CSS查看器中找到一个完全不同的解决方案。如果我们遇到这种情况，那么我们必须向仓库提交一个拉取请求，并附上我们的额外解决方案。

CSS Diner的类型

让我们逐一讨论所有类型的CSS Diner。

1. 类型

动画

描述

在这里，我们必须选择A类型的所有元素。这种A类型指的是<div>、<p>和<ul>标签。

示例

这种类型的一些元素示例是

div {
    /* style all <div> elements */
}
 
p {
    /* style all <p> elements */
}

HTML 代码

在这里，我们必须编写HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <plate />
    <plate />
  </div>
  
</div>
</body>
</html>

提示

在HTML中，我们看到每个盘子都由<plate />表示。

CSS解决方案

这类问题的解决方案是，我们必须借助“plate”。

2. 类型

动画

描述

在这里，我们必须选择A类型的所有元素。这种A类型指的是<div>、<p>和<ul>标签。

示例

这种类型的一些元素示例是

div {
    /* style all <div> elements */
}
 
p {
    /* style all <p> elements */
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <bento />
    <plate />
    <bento />
  </div>
  
  
</div>
</body>
</html>

提示

在HTML中，我们看到每个便当盒都由<bento/>表示。

CSS解决方案

这类问题的解决方案是，我们必须借助“bento”。

3. ID选择器

动画

描述

在这里，我们必须借助ID来选择元素。

示例

/* EXAMPLES */
 
#cool {
    /* style the element with id="cool" */
}
 
/* you can also combine the ID selector with the type selector */
 
ul#long {
    /* style the element <ul id="long"> */
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <plate id= "fancy"/>
    <plate />
    <bento />
  </div>
  
  
  
</div>
</body>
</html>

提示

所有元素只有一个唯一的ID，我们必须只借助ID来定位元素。

CSS答案

/* solution 1 */
#fancy /* select any element with id="fancy" */
 
/* solution 2 */
plate#fancy /* select the plate element with id="fancy" */

4. 后代选择器

动画

描述

在这里，我们必须选择B的所有元素，这些元素是A的子元素。在这里，我们必须以B存在于元素A内部的方式选择元素。

示例

/* EXAMPLES */
 
p strong {
    /* style <strong> elements that are children of <p> elements */
}
 
#fancy span {
    /* style any <span> elements that are inside of the element with id="fancy" */
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <bento />
    <plate>
      <apple />
    </plate>
    <apple />
  </div>
  
 
</div>
</body>
</html>

提示

让我们以盘子上的鸡蛋为例。我们可以说鸡蛋是盘子的后代。

CSS答案

plate apple

5. 结合后代选择器和ID选择器

动画

描述

在这里，我们可以将任何选择器与所有后代选择器结合使用。

示例

/* EXAMPLE */
 
#cool span {
    /* style all <span> elements that are inside of the element with id="cool" */
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <bento>
      <orange />
    </bento>
    <plate id="fancy">
      <pickle />
    </plate>
    <plate>
      <pickle />
    </plate>
  </div>
  
  
  
  
  
</div>
</body>
</html>

提示

在这里，我们必须借助ID（即fancy）来选择某个位置的后代选择器。

CSS答案

#fancy pickle

6. 类选择器

动画

描述

在这个类选择器中，我们必须借助类名来选择元素。类选择器选择所有具有相同类的元素。在HTML中，我们可以为一个特定元素指定一个ID，但可以为许多元素指定一个类。

示例

/* EXAMPLE */
 
.neato {
    /* style all elements with class="neato" */
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <apple />
    <apple class= "small"/>
    <plate>
      <apple class= "small"/>
    </plate>
    <plate />
  </div>
  
  
  
  
  
</div>
</body>
</html>

提示

我们可以为所有鸡蛋提供相同的类名吗？

CSS答案

我们可以使用Apple.small。

7. 将类选择器与其他所有选择器结合使用

动画

描述

我们可以借助类型运算符将类选择器与另一个选择器连接起来。

示例

/* EXAMPLES */
 
ul.important {
    /* style <ul class="points"> elements that have class="important" */
}
 
#big.wide {
    /* style the element with id="big" that also has class="wide" */
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <apple />
    <apple class= "small"/>
    <bento>
      <orange class= "small"/>
    </bento>
    <plate>
      <orange />
    </plate>
    <plate>
      <orange class= "small"/>
    </plate>
  </div>
  
</div>
</body>
</html>

提示

是否可以以相似的类名选择所有小橘子？在这里，我们不是选择所有类名为small的橘子。

CSS答案

orange.small

8. 级别1-7概述

动画

描述

没有对此的描述。这只是第1到第7课的概述。

示例

没有这方面的例子。这只是第1到第7课的概述。

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <bento>
      <orange />
    </bento>
    <orange class= "small"/>
    <bento>
      <orange class= "small"/>
    </bento>
    <bento>
      <apple class= "small"/>
    </bento>
    <bento>
      <orange class= "small"/>
    </bento>
  </div>
  
</div>
</body>
</html>

提示

在这里，我们需要便当盒里所有的小橘子。我们如何选择那些在便当盒里的橘子？我们如何识别便当盒的所有属性？

CSS答案

Bento orange.small

9. 使用逗号组合选择器

动画

描述

在这里，我们必须选择A和B元素，或者我们必须选择A和B元素。

示例

/* EXAMPLES */
 
p, .fun {
    /* style all <p> elements as well as all elements with class="fun" */
}
 
a, p, div {
    /* style all <a>, <p>, and <div> elements */
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <pickle class= "small"/>
    <pickle />
    <plate>
      <pickle />
    </plate>
    <bento>
      <pickle />
    </bento>
    <plate>
      <pickle />
    </plate>
    <pickle />
    <pickle class= "small"/>
  </div>
  
</div>
</body>
</html>

提示

我们能一次性选择所有元素吗？

CSS答案

plate, bento

10. 通用选择器

动画

描述

我们可以借助通用选择器来选择HTML中的所有元素。我们可以将通用选择器表示为星号(*)。我们也可以称之为通配符。

示例

/* EXAMPLES */
 
p * {
    /* style all elements inside of all <p> elements */
}
 
ul.fancy * {
    /* style every element inside all <ul class="fancy"> elements */
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <apple />
    <plate>
      <orange class= "small"/>
    </plate>
    <bento />
    <bento>
      <orange />
    </bento>
    <plate id= "fancy"/>
  </div>
  
</div>
</body>
</html>

提示

我们能一次性选择所有内容吗？

CSS答案

我们可以借助*来选择所有内容。

11. 与通用选择器结合

动画

描述

我们可以借助A*来选择A中可用的所有元素。

示例

/* EXAMPLES */
 
p * {
    /* style all elements inside of all <p> elements */
}
 
ul.fancy * {
    /* style every element inside all <ul class="fancy"> elements */
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <plate id="fancy">
      <orange class= "small"/>
    </plate>
    <plate>
      <pickle />
    </plate>
    <apple class= "small"/>
    <plate>
      <apple />
    </plate>
  </div>
  
</div>
</body>
</html>

提示

是否可以选择特定元素的所有子元素？

CSS答案

plate *

12. 相邻兄弟选择器

动画

描述

我们可以选择B的所有元素，B是A的子元素。当一个元素跟随另一个元素时，我们可以称它们为兄弟。在HTML中，所有兄弟都有相同的缩进级别。

示例

/* EXAMPLES */
 
p + .intro {
    /* styles every element with class="intro" that directly follows a <p> */
}
 
div + a {
    /* style every <a> element that directly follows a <div> */
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <bento>
      <apple class= "small"/>
    </bento>
    <plate />
    <apple class= "small"/>
    <plate />
    <apple />
    <apple class= "small"/>
    <apple class= "small"/>
  </div>
  
</div>
</body>
</html>

提示

是否可以选取所有直接紧邻盘子的苹果？

CSS答案

plate + apple

13. 一般兄弟选择器

动画

描述

在这个选择器中，我们必须选择B的元素，B是A的子元素。因此，我们必须选择所有跟随A的兄弟元素。所以在这里，我们必须使用A~B来选择兄弟元素。

例子：

我们已经解决了一个类似于下面示例的问题。

/* EXAMPLE */
 
div.main-intro ~ p {
    /* style all elements <p> after <div class="main-intro"> that are on the same level as the div */
}

HTML 代码

此问题的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <pickle />
    <bento>
      <orange class= "small"/>
    </bento>
    <pickle class= "small"/>
    <pickle />
    <plate>
      <pickle />
    </plate>
    <plate>
      <pickle class= "small"/>
    </plate>
  </div>
  
</div>
</body>
</html>

提示

我们必须确保选择便当盒后面泡菜的所有兄弟元素。

CSS解决方案

bento ~ pickle

14. 子选择器

动画

描述

在这里，我们必须选择B的元素，B是A的直接子元素。我们也可以选择那些是另一个元素的直接子元素的元素。直接嵌套在另一个元素中的元素可以称为子元素。嵌套更深的元素，我们可以称它们为后代元素。

示例

我们已经解决了一个类似于下面示例的问题。

/* EXAMPLE */
 
div#container > ul {
    /* style all <ul> elements that are children of <div id="container"> */
}

HTML 代码

此问题的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div class="table">
  <plate>
    <bento>
      <apple />
    </bento>
  </plate>
  <plate>
    <apple />
  </plate>
  <plate />
  <apple />
  <apple class= "small"/>
</div>
</body>
</html>

提示

在这里，不需要选择盘子里的苹果。

CSS答案

plate > apple

15. 第一个子伪选择器

动画

描述

在这里，我们必须选择A类型的所有第一个元素。我们可以将伪选择器与任何其他选择器结合使用。

示例

我们已经解决了一个类似于下面示例的问题。

/* EXAMPLES */
 
:first-child {
    /* style all first child elements */
}
 
p:first-child {
    /* style all first child <p> elements */
}
 
div p:first-child {
    /* style all first child <p> elements that are in a <div> */
}

HTML 代码

此问题的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div class="table">
  <bento />
  <plate />
  <plate>
    <orange />
    <orange />
    <orange />
  </plate>
  <pickle class= "small"/>
</div>
</body>
</html>

提示

在这里，我们必须选择所有是盘子的第一个选择器的橘子。我们可以在这里使用伪选择器。

CSS解决方案

plate orange:first-child

16. 唯一的子伪选择器

动画

描述

在这里，我们必须选择A的那些元素，它们位于另一个元素内部。

示例

我们已经解决了一个类似于下面示例的问题。

/* EXAMPLES */
 
span:only-child {
    /* style the <span> elements that are the only child of some other element */
}
 
div p:only-child {
    /* style the <p> inside any <div> so long as the <p> is the only one of its kind */
}

HTML 代码

此问题的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div class="table">
  <plate>
    <apple />
  </plate>
  <plate>
    <pickle />
  </plate>
  <bento>
    <pickle />
  </bento>
  <plate>
    <orange class= "small"/>
    <orange />
  </plate>
  <pickle class= "small"/>
</div>
</body>
</html>

提示

是否可能一次性选择许多元素？

CSS 代码

plate apple:only-child, plate pickle:only-child

17. 最后一个子伪选择器

动画

描述

在这里，我们必须选择A的元素，它是另一个元素的最后一个子元素。

示例

我们已经解决了一个类似于下面示例的问题。

:last-child {
    /* style all last-child elements */
}
 
span:last-child {
    /* style all last-child <span> elements */
}
 
ul li:last-child {
    /* style the last <li> element inside every <ul> */
}

HTML 代码

此问题的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <plate id="fancy">
      <apple class= "small"/>
    </plate>
    <plate />
    <plate>
      <orange class= "small"/>
      <orange />
    </plate>
    <pickle class= "small"/>
  </div>
</div>
</body>
</html>

提示

我们可以通过多种方式做到这一点。假设苹果是“fancy”元素的最后一个子元素，而泡菜是其类型的最后一个子元素。或者，我们可以选择包含苹果的“fancy”盘子，因为苹果很小，而泡菜也很小。

CSS答案

/* Solution 1 */
plate#fancy apple:last-child, pickle:last-child /* contrived */
 
/* Solution 2 */
#fancy apple.small pickle.small /* realistic */

18. 第n个子伪选择器

动画

描述

在这里，我们必须从另一个元素中选择第N个子元素，即第1个、第3个、第12个等。

示例

我们已经解决了一个类似于下面示例的问题。

/* EXAMPLES */
 
:nth-child(8) {
    /* style every element that is the 8th child of another element */
}
 
div p:nth-child(2) {
    /* style the second <p> in every <div> */
}

HTML 代码

此问题的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <plate />
    <plate />
    <plate />
    <plate id= "fancy"/>
  </div>
</div>
</body>
</html>

提示

我们能从另一个元素中选择特定的子元素吗？

CSS解决方案

plate:nth-child(3)

19. 第n个倒数子选择器

动画

描述

在这里，我们必须从父元素的最后一个子元素中选择子元素。这与第n个子元素类似，但是从最后一个开始处理。

示例

我们已经解决了一个类似于下面示例的问题。

/* EXAMPLE */
 
:nth-last-child(2) {
    /* styles all second-to-last child elements */
}

HTML 代码

此问题的HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
  <div class="table">
    <plate />
    <bento />
    <plate>
      <orange />
      <orange />
      <orange />
    </plate>
    <bento />
  </div>
</div>
</body>
</html>

提示

这里使用bento:first-of-type可能很明显，但我们能否想出一个更牵强的解决方案，比如从后面数？例如，从最后一个便当盒开始数，我们看到我们想选择的便当盒实际上是第三个子元素。我们如何用“倒数子元素”来选择这个便当盒？

CSS解决方案

bento:nth-last-child(3)

20. 首次出现类型选择器

动画

描述

在这里，我们必须选择另一个元素中存在的A类型的第一个元素。

示例

下面是一个类似的例子。

/* EXAMPLES*/
 
span:first-of-type {
   
/* style the first <span> in any element */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
    <orange class= "small"/>
    <apple />
    <apple class= "small"/>
    <apple />
    <apple class= "small"/>
    <plate>
      <orange class= "small"/>
      <orange />
    </plate>
  </div>
</body>
</html>

提示

我们能选择特定类型的第一项吗？

CSS解决方案

apple:first-of-type

21. 第n个类型

动画

描述

在这里，我们必须选择存在于另一个元素中的A类型元素。我们必须选择位于偶数或奇数位置的元素。

示例

下面是一个类似的例子。

/* EXAMPLES */
 
div:nth-of-type(2) {
   
/* style the second instance of a <div> */
}
 
.example:nth-of-type(odd) {
   
/* style all odd instances of elements with class="example" */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
    <plate />
    <plate />
    <plate />
    <plate />
    <plate id= "fancy"/>
    <plate />
  </div>
</body>
</html>

提示

如果我们知道如何选择伪选择器来选择第n个元素，那将对我们有利。此外，我们必须知道伪选择器接受什么样的参数。

CSS解决方案

plate:nth-of-type(even)

22. 带公式的第n个类型选择器

动画

描述

我们可以借助nth-of-type公式选择第n个元素。

示例

下面是一个类似的例子。

/* EXAMPLE */

span:nth-of-type(6n+2) {
    /* style every 6th instance of a <span>, starting from (and including) the second instance */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
    <plate />
    <plate>
      <pickle class= "small"/>
    </plate>
    <plate>
      <apple class= "small"/>
    </plate>
    <plate />
    <plate>
      <apple />
    </plate>
    <plate />
  </div>
</div>
</body>
</html>

提示

在这里，我们必须选择特定类型的元素。如果我们想选择从第2个实例开始的第4个plate实例，那么我们必须编写plate:nth-of-type(4n+2)。

CSS解决方案

plate:nth-of-type(2n+3)

23. 唯一类型

动画

描述

在这里，我们必须选择类似类型的元素。

示例

下面是一个类似的例子。

/* EXAMPLE */

p span:only-of-type {
    /* selects a <span> within any <p> if it is the only <span> in there */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
    <plate id="fancy">
      <apple class= "small"/>
      <apple />
    </plate>
    <plate>
      <apple class= "small"/>
    </plate>
    <plate>
      <pickle />
    </plate>
  </div>
</div>
</body>
</html>

提示

我们能选择第一个子元素是苹果的元素吗？

CSS解决方案

plate > apple:only-of-type

24. 最后一个类型

动画

描述

在这里，我们必须选择最后一个元素的最后一个元素。

示例

下面是一个类似的例子。

/* EXAMPLES */

div:last-of-type {
    /* styles the last <div> in every element */
}

p span:last-of-type {
    /* styles the last <span> in every <p> */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
    <orange class= "small"/>
    <orange class= "small"/>
    <pickle />
    <pickle />
    <apple class= "small"/>
    <apple class= "small"/>
  </div>
</div>
</body>
</html>

提示

在这里，我们必须选择所有属于最后一个元素类型的元素。

CSS解决方案

orange:last-of-type, apple:last-of-type

25. 空

动画

描述

在这里，我们必须选择那些没有子元素的元素。

示例

下面是一个类似的例子。

/* EXAMPLE */

div:empty {
    /* style all empty <div> elements */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
    <bento />
    <bento>
      <pickle class= "small"/>
    </bento>
    <plate />
    <bento />
  </div>
</div>
</body>
</html>

提示

在这里，我们必须选择那些没有子元素的元素。

CSS答案

bento:empty

26. 否定伪类

动画

描述

在这里，我们必须选择所有不匹配否定选择器的元素。

示例

下面是一个类似的例子。

/* EXAMPLES */
 
:not(#fancy) {
   
/* style all elements that do not have id="fancy" */
}
 
div:not(:first-child) {
   
/* style every <div> that is not a first child */
}
 
:not(.big, .medium) {
   
/* style all elements that do not have class="big" or class="medium" */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <div class="table">
    <plate id="fancy">
      <apple class= "small"/>
    </plate>
    <plate>
      <apple />
    </plate>
    <apple />
    <plate>
      <orange class= "small"/>
    </plate>
    <pickle class= "small"/>
  </div>
</body>
</html>

提示

我们能选择不属于特定类的元素吗？

CSS解决方案

Apple:not(.small)

27. 属性选择器（通用）

动画

描述

在这里，我们必须选择那些具有特定属性的元素。我们必须将属性放在开始标签内。例如 <span attribute="value"></span>。如果属性没有值，我们可以将其设为空。

示例

下面是一个类似的例子。

/* EXAMPLES */
 
a[href] {
   
/* style all <a> elements that have an href attribute */
}
 
[type] {
   
/* style all elements that have a type attribute */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
    <bento>
      <apple class= "small"/>
    </bento>
    <apple for= "Ethan"/>
    <plate for="Alice">
      <pickle />
    </plate>
    <bento for="Clara">
      <orange />
    </bento>
    <pickle />
  </div>
</body>
</html>

提示

我们能否根据这些元素是否具有某些属性来选择所有这些通用元素？

CSS答案

[for]

28. 属性选择器（特定）

动画

描述

在这里，我们必须选择A的元素，它具有一些特定的属性。

示例

下面是一个类似的例子。

/* EXAMPLES */

[value] {
    /* style all elements that have a value attribute */
}

a[href] {
    /* style all <a> elements that have an href attribute */
}

input[disabled] {
    /* styles all <input> elements with the disabled attribute */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
    <plate for="Sarah">
      <pickle />
    </plate>
    <plate for="Luke">
      <apple />
    </plate>
    <plate />
    <bento for="Steve">
      <orange />
    </bento>
  </div>
</body>
</html>

提示

我们能选择所有具有特定属性的元素吗？

CSS答案

plate[for]

29. 属性值选择器

动画

描述

在这里，我们必须选择元素

具有某些特定属性。

示例

下面是一个类似的例子。

/* EXAMPLE */

input[type="checkbox"] {
    /* style all <input> elements with type="checkbox" */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
    <apple for="Alexei" />
    <bento for="Albina">
      <apple />
    </bento>
    <bento for="Vitaly">
      <orange />
    </bento>
    <pickle />
  </div>
</body>
</html>

提示

我们能否不仅根据元素是否具有特定属性，而且根据该属性的值来选择元素？

CSS答案

30. 属性以选择器开头

动画

描述；

在这里，我们必须选择具有特定属性且该属性以特定字符开头的元素。

示例

下面是一个类似的例子。

/* EXAMPLE */
 
.toy[category^="Swim"] {
   
/* style elements with class toy and with attribute category="Swim[...]" */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
    <plate for="Sam">
      <pickle />
    </plate>
    <bento for="Sarah">
      <apple class= "small"/>
    </bento>
    <bento for="Mary">
      <orange />
    </bento>
  </div>
</body>
</html>

提示

我们能否选择那些属性值以特定字符*开头*的元素？

CSS答案

*[for^="Sa"]

31. 属性以选择器结尾

动画

描述

在这里，我们必须选择那些属性以特定字符结尾的元素。

示例

下面是一个类似的例子。

/* EXAMPLE */
 
img[src$=".jpg"] {
    /* style all images with a .jpg extension */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
  <apple class= "small"/>
  <bento for="Hayato">
    <pickle />
  </bento>
  <apple for= "Ryota"/>
  <plate for="Minato">
    <orange />
  </plate>
  <pickle class= "small"/>
</div>
</body>
</html>

提示

我们能否选择所有属性以特定字符结尾的元素？

CSS答案

*[for$="ato"]

32. 属性通配符选择器

动画

描述

在这里，我们必须选择那些属性值包含特定字符的元素。

示例

下面是一个类似的例子。

/* EXAMPLES */
 
img[src*="/thumbnails/"] {
    /* style all image elements that show images from the "thumbnails" folder */
}
 
[class= "heading"] {
    /* style all elements with "heading" in their class, like class= "main-heading" and class= "sub-heading" */
}

HTML 代码

下面是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="table">
  <bento for="Robbie">
    <apple />
  </bento>
  <bento for="Timmy">
    <pickle />
  </bento>
  <bento for="Bobby">
    <orange />
  </bento>
</div>
</body>
</html>

提示

我们能否选择所有属性包含特定字符的元素？

CSS答案

bento[for*="obb"]

下一个主题CSS Display None

← 上一个下一个 →

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS Diner

引言

用途

CSS Diner的类型

1. 类型

2. 类型

3. ID选择器

4. 后代选择器

5. 结合后代选择器和ID选择器

6. 类选择器

7. 将类选择器与其他所有选择器结合使用

8. 级别1-7概述

9. 使用逗号组合选择器

10. 通用选择器

11. 与通用选择器结合

12. 相邻兄弟选择器

13. 一般兄弟选择器

14. 子选择器

15. 第一个子伪选择器

16. 唯一的子伪选择器

17. 最后一个子伪选择器

18. 第n个子伪选择器

19. 第n个倒数子选择器

20. 首次出现类型选择器

21. 第n个类型

22. 带公式的第n个类型选择器

23. 唯一类型

24. 最后一个类型

25. 空

26. 否定伪类

27. 属性选择器（通用）

28. 属性选择器（特定）

29. 属性值选择器

30. 属性以选择器开头

31. 属性以选择器结尾

32. 属性通配符选择器

相关帖子

Text Italic in CSS

CSS Layers

CSS Stripes

如何旋转 CSS 中的图片

CSS Border Opacity

CSS Styles for Dropdownlist

CSS Parent Selector

CSS Width and Height

Responsive Image Gallery HTML CSS

CSS Active

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题