CSS选择器 前端开发入门笔记（十）

CSS选择器

CSS选择器是用来选择需要改变样式的HTML元素的模式。到CSS3为止，支持的选择器类型有6种，包括标签选择器、派生选择器（上下文选择器）、id选择器、class选择器、属性选择器和通配符*选择器。以下是这六种选择器的简要介绍：

1. 标签选择器：通过HTML元素的标签名来选择元素。
2. 派生选择器（上下文选择器）：通过元素的上下文关系来选择元素。
3. id选择器：通过元素的id属性来选择元素，id属性是唯一的，且没有值列表。
4. class选择器：通过元素的class属性来选择元素，不具有唯一性，且有词列表。
5. 属性选择器：通过元素的属性及属性值来选择元素。
6. 通配符选择器：通过“”符号来选择所有元素。

以下是一些元素选择器的例子：

1. 标签选择器：

p {
  color: red;
}

上述样式表示，所有

标签的元素都将被设置为红色。

2. 类选择器：

.intro {
  font-size: 20px;
}

上述样式表示，所有class属性为intro的元素都将被设置为字体大小为20px。

3. ID选择器：

#firstname {
  border: 1px solid black;
}

上述样式表示，id为firstname的元素将被设置一个黑色的边框。

4. 后代选择器：

div p {
  color: blue;
}

上述样式表示，所有包含在

标签内的

标签的元素都将被设置为蓝色。

5. 子元素选择器：

div > p {
  color: green;
}

上述样式表示，所有直接作为

标签子元素的

标签的元素都将被设置为绿色。

6. 相邻兄弟选择器：

div + p {
  color: purple;
}

上述样式表示，所有紧接在

标签后面的

标签的元素都将被设置为紫色。

7. 通用兄弟选择器：

div ~ p {
  color: orange;
}

标签选择器

标签选择器是CSS布局中非常基础和重要的选择器，它可以让我们轻松地选择并样式化HTML元素。以下是一些常用的HTML标签元素，它们都可以被用作标签选择器：

1. ：块级元素，常用来作为布局的容器。

2. ：段落元素，用于文本内容。

3. 到

   ：标题元素，用于显示不同级别的标题。

4. ：内联元素，常用来为文本的一部分设置样式。
5. ：链接元素，用于创建超链接。
6. ：图像元素，用于插入图片。
7. 、
   和
   1. ：列表元素，用于创建不同类型的列表。
   2. ：表单元素，用于收集用户输入。
   3. 、

      、

      、

      、

      等：这些是HTML5中新增的语义化标签元素，可以根据需要选择使用。

   除了上述提到的标签元素，HTML中还有许多其他的标签元素，如

   、

   、

   等，都可以根据实际需要进行选择和使用。

   关系选择器

   关系选择器是一种CSS选择器，它可以根据元素与其他元素的关系来选择元素。常见的符号有空格、>、~，还有+等，这些都是非常常用的选择器。

   1. 子元素选择器：通过指定的父元素找到指定的子元素。语法是父元素>子元素{}，例如，div>p表示选择所有div元素的直接子元素p。
   2. 空格连接：后代选择器，选择所有合乎规则的后代元素。例如，div p表示选择所有包含在div元素内的p元素。
   3. 相邻后代选择器：仅仅选择合乎规则的儿子元素，孙子、重孙元素忽略，因此又称“子选择器”。例如，div > p表示选择所有div元素的直接子元素p。
   4. +连接：相邻兄弟选择器，选择当前元素后面的所有合乎规则的兄弟元素。例如，div + p表示选择所有紧接在div元素后面的p元素。
   5. ~连接：通用兄弟选择器，选择当前元素相邻的那个合乎规则的兄弟元素。例如，div ~ p表示选择所有在div元素之后的所有p元素。

   关系选择器有多种类型，包括子选择器 (E>F）、相邻兄弟选择器 (E+F）、通用兄弟选择器 (E~F）。

   子选择器 (E>F）只对子元素有影响，对下一层无影响；相邻兄弟选择器 (E+F）紧贴在E元素的F元素为第一个兄弟元素；通用兄弟选择器 (E~F）选择某个元素下的某一类元素，作用于多个，被称为兄弟。

   属性选择器

   属性选择器是一种CSS选择器，它可以根据元素的属性来选择元素。根据属性值的不同，可以分为以下三种类型：

   1. 属性选择器：选择具有特定属性的元素。例如，[type="text"]会选择所有type属性为"text"的元素。
   2. 属性=值选择器：选择具有特定属性值的元素。例如，input[type="submit"]会选择所有type属性值为"submit"的input元素。
   3. 属性~=值选择器：选择属性值是空格分隔的值列表，其中正好有一个值为"value"的元素。例如，input[type~="button"]会选择所有type属性值中包含"button"的input元素。

   除了根据属性选择元素，属性选择器还可以根据属性值的不同形式进行更精确的选择。具体来说：

   1. E[attr]：查找所有包含attr属性的E元素。
   2. E[attr=value]：查找所有attr属性值为value的E元素。
   3. E[attr~=value]：查找所有attr属性值中包含空格分隔的多个值，其中一个值为value的E元素。
   4. E[attr|=value]：查找所有attr属性值为value或以value-开头的E元素。
   5. E[attr^=value]：查找所有attr属性值以value开头的E元素。
   6. E[attr$=value]：查找所有attr属性值以value结尾的E元素。
   7. E[attr*=value]：查找所有attr属性值中任意位置包含value的E元素。

   这些选择器可以根据需要灵活组合使用，以实现更精确的样式控制。同时，还可以与其他选择器结合使用，例如子元素选择器、相邻兄弟选择器、通用兄弟选择器等，以实现更复杂的选择需求。

   假设我们有一个HTML文档，其中包含多个标签，我们希望根据不同的属性值来选择这些标签，以应用不同的样式。具体来说，我们希望选择以下几种情况：

   1. 所有指向HTTPS协议的链接，我们将它们设置为红色。
   2. 所有指向W3Schools网站的链接，我们将它们设置为蓝色。

   <a href="https://www.example.com">https链接a>
   <a href="http://www.w3school.com.cn">非https链接a>
   <a href="https://www.w3schools.com">W3Schools链接a>
   

   为了实现上述选择，我们可以使用属性选择器和属性=值选择器。代码如下：

   /* 所有指向HTTPS协议的链接 */
   a[href^="https"] {
       color: red;
   }
   
   /* 所有指向W3Schools网站的链接 */
   a[href*="w3schools"] {
       color: blue;
   }
   

   在上述代码中，a[href^="https"]选择器选择了所有href属性值以"https"开头的标签，而a[href*="w3schools"]选择器选择了所有href属性值中包含"w3schools"的标签。这样，我们就可以根据不同的属性值来选择元素，并应用不同的样式了。

   属性选择器和属性=值选择器都是CSS中的选择器，它们可以根据元素的属性来选择元素。但是，它们之间存在一些区别。

   属性选择器是一种最简单的属性选择器，它可以选择具有特定属性的元素。例如，[title]会选择所有title属性的元素。

   属性=值选择器则更具体，它根据特定属性值进行选择。例如，input[type="submit"]会选择所有类型为"submit"的input元素。这种选择器可以更精确地控制样式的应用范围。

   因此，属性选择器和属性=值选择器的区别在于它们的选择方式不同。属性选择器选择具有特定属性的元素，而属性=值选择器则根据特定属性值进行选择，可以更精确地控制样式的应用范围。

   伪类选择器

   伪类选择器是一种特殊的选择器，它用于选择元素的特殊状态。伪类选择器以冒号（:）开头，后跟伪类的名称。例如，:hover是一种伪类选择器，它选择鼠标悬停在上面的元素。

   伪类选择器可以用于选择处于特定状态的元素，例如鼠标悬停、获得焦点、未访问等。以下是一些常见的伪类选择器：

   • :hover：选择鼠标悬停在上面的元素。
   • :focus：选择获得焦点的元素。
   • :active：选择被用户激活的元素，例如通过鼠标点击或键盘操作。
   • :visited：选择用户已经访问过的链接。
   • :link：选择尚未被访问过的链接。
   • :first-child：选择元素的第一个子元素。
   • :last-child：选择元素的最后一个子元素。
   • :nth-child(n)：选择元素的第n个子元素。

   伪类选择器可以单独使用，也可以与其他选择器结合使用，以选择符合特定条件的元素。通过使用伪类选择器，我们可以更精确地控制样式的应用范围，并提高网页的可访问性和交互性。

   伪类选择器有一些显著的特点：

   1. 它们可以选择特定状态的元素。例如，:hover选择器可以选择鼠标悬停在上面的元素，:active选择器可以选择被用户激活的元素。
   2. 伪类选择器的功能和一般的DOM中的元素样式相似，但并不改变任何DOM内容。它们只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说是不可见的。
   3. 伪类选择器的效果可以通过添加一个实际的类来达到。
   4. 伪类选择器还可以用于选择同种元素的子节点，这是与一般的选择器不同的地方。例如，:nth-child(n)选择器可以选择元素的第n个子元素。
   5. 伪类选择器还可以用于选择处于特定状态的表单元素，以提高人机交互性能。例如，:focus选择器可以选择获得焦点的表单元素。
   6. 伪类选择器还可以用于选择打印相关的元素。例如，:fullscreen选择器可以选择处于全屏显示模式的元素。

   当然，以下是一个使用伪类选择器的CSS代码示例：

   /* 未访问的链接 */
   a:link {
     color: blue;
   }
   
   /* 访问过的链接 */
   a:visited {
     color: purple;
   }
   
   /* 鼠标悬停在链接上 */
   a:hover {
     color: red;
   }
   
   /* 被选中的链接 */
   a:active {
     color: yellow;
   }
   

   在这个示例中，我们使用了四个伪类选择器来改变链接在不同状态下的颜色。这些状态包括：未访问的链接（:link）、已访问的链接（:visited）、鼠标悬停在链接上（:hover）和被选中的链接（:active）。

   伪类选择器的使用场景非常广泛，以下是一些常见的使用场景：

   1. 链接和按钮点击过程中的样式设置：例如，可以使用:hover伪类选择器来改变鼠标悬停在链接或按钮上时的样式。
   2. 聚焦状态的元素：例如，可以使用:focus伪类选择器来改变用户聚焦在输入框或其他可聚焦元素时的样式。
   3. 列表元素：可以使用:nth-child(n)伪类选择器来选择列表中的特定元素，例如奇数项或偶数项。
   4. 导航菜单：可以使用:first-child和:last-child伪类选择器来改变导航菜单中的第一个和最后一个元素的样式。
   5. 交互元素：例如，可以使用:active伪类选择器来改变用户点击按钮时的样式。
   6. 打印相关的元素：例如，可以使用:fullscreen伪类选择器来改变全屏显示模式下的元素样式。

   伪类选择器可以用于选择处于特定状态的元素，并应用特定的样式，从而提高网页的可访问性和交互性。

   伪对象选择器

   伪对象选择器是一种特殊的CSS选择器，它可以选择元素的特定部分，例如前面或后面，或者第一个字符或第一行。以下是一些常见的伪对象选择器：

   1. ::before：在元素内容的最前面插入内容。
   2. ::after：在元素内容的最后面插入内容。
   3. ::first-letter：定义元素内第一个字符的样式。
   4. ::first-line：定义元素内第一行的样式。
   5. ::selection：定义选中元素之后的样式。

   例如，你可以使用以下CSS代码在元素内容的最后面添加一些文本：

   p::after {
     content: " (end of paragraph)";
   }
   

   这将在每个段落后面添加文本“(end of paragraph)”。
   如何使用伪对象选择器来改变文本的首行缩进？

   伪对象选择器是一种特殊类型的CSS选择器，它允许你选择和样式化文档中的特定元素的部分。这些选择器可以让你在元素的内容之前、之后、第一个字符或第一行应用样式。伪对象选择器以双冒号（::）开头，后跟选择器的名称。

   以下是一些常用的伪对象选择器：

   1. ::before：这个伪对象选择器允许你在元素的内容之前插入内容。你可以使用content属性来定义要插入的内容。例如，以下CSS代码将在每个段落之前插入一个带有样式的引用：

   p::before {
     content: "引用：";
     font-weight: bold;
   }
   

   2. ::after：这个伪对象选择器允许你在元素的内容之后插入内容。与::before类似，你可以使用content属性来定义要插入的内容。例如，以下CSS代码将在每个段落的后面插入一个带有样式的链接：

   p::after {
     content: "（更多信息）";
     font-weight: bold;
     color: blue;
   }
   

   3. ::first-letter：这个伪对象选择器允许你选择和样式化元素内的第一个字符。例如，以下CSS代码将选择每个段落的首字母并将其设置为大写：

   p::first-letter {
     text-transform: uppercase;
   }
   

   4. ::first-line：这个伪对象选择器允许你选择和样式化元素内第一行的文本。例如，以下CSS代码将改变每个段落第一行的字体颜色：

   p::first-line {
     color: red;
   }
   

   5. ::selection：这个伪对象选择器允许你定义元素被选中时的样式。例如，以下CSS代码将改变被选中的文本的颜色和背景色：

   ::selection {
     background-color: #ffb7b7;
     color: #333;
   }
   

   如何使用伪对象选择器来改变文本的首行缩进？

   要使用伪对象选择器来改变文本的首行缩进，你可以使用::first-line伪对象选择器，并应用text-indent属性来指定首行文本的缩进大小。

   以下是一个示例，展示如何使用::first-line和text-indent属性来改变文本的首行缩进：

   p::first-line {
     text-indent: 2em;
   }
   

   在上面的示例中，p::first-line选择器将应用于每个段落的首行文本。text-indent属性设置为2em，表示首行文本将缩进相当于两个字母"M"的宽度（em是一个相对单位，表示当前字体的字号）。你可以根据需要调整text-indent属性的值来控制首行缩进的大小。

   请注意，::first-line伪对象选择器在一些浏览器中可能不受支持或有限制。因此，在使用时请确保考虑兼容性和可访问性。

   使用伪对象选择器时需要注意以下几点：

   1. 确保选择器的正确使用：伪对象选择器通常以双冒号（::）开头，例如::before、::after、::first-letter等。要确保选择器名称的正确拼写和语法。
   2. 注意伪对象的权重：伪对象选择器具有较低的权重值，因此它们可能会被其他更具体的选择器覆盖。在使用伪对象选择器时，确保它们不会与页面中的其他样式冲突。
   3. 兼容性问题：不同的浏览器对于伪对象选择器的支持程度可能不同。在使用时，请确保考虑到主流浏览器的兼容性，并采取相应的兼容性处理措施，例如使用CSS预处理器或添加浏览器前缀。
   4. 避免过度使用：过度使用伪对象选择器可能会使页面结构变得复杂，并可能影响页面的性能。因此，在使用时应适度，并确保它们不会对页面的可读性和可访问性产生负面影响。
   5. 测试和验证：在使用伪对象选择器时，确保在各种设备和浏览器上进行测试，以确保样式在目标平台上正常显示。同时，也可以使用验证工具来检查CSS代码的语法和兼容性。

   使用伪对象选择器可以提供更灵活和强大的样式选项，但需要注意正确使用、兼容性、适度使用和测试验证等方面，以确保实现所需的样式效果并保持良好的页面结构。

   为什么需要css选择器

   需要CSS选择器的原因如下：

   1. 将HTML页面的内容与样式分离：CSS选择器可以将HTML元素的样式统一收集起来并写在一个地方或一个CSS文件中，从而将内容与格式分离，使网页的表现统一且容易修改。
   2. 提高web开发的工作效率：使用CSS选择器可以灵活地选择HTML元素并为其添加样式，使得网页的设计更加灵活和多样化，同时也可以减少网页的代码量，增加网页浏览速度，节省网络带宽。

   CSS选择器是用来选择HTML元素并为其添加样式的一种机制。选择器可以用来选择一个或多个元素，从而对它们应用相应的样式，这使得网页的设计更加灵活和多样化。使用CSS选择器可以让网页的样式更加统一、美观，还可以增加网页的可读性和可维护性。

   CSS选择器是用来选择HTML元素并为其添加样式的一种机制。它是一种模式，用于匹配页面上的元素，并为这些元素应用样式。

   CSS选择器有多种类型，包括元素选择器、类选择器、ID选择器、属性选择器、伪类选择器和复合选择器等。这些选择器可以通过不同的方式来选择HTML元素，以便对其进行样式化。

   在CSS中，选择器通常以逗号分隔的形式放在一个规则的左侧，而右侧则指定应用于所选元素的样式。例如，以下是一个简单的CSS规则，其中使用元素选择器来选择所有的段落元素并设置其字体颜色为红色：

   p {
     color: red;
   }
   

   在这个例子中，p是一个元素选择器，它选择了页面上所有的段落元素，并将字体颜色设置为红色。

   除了元素选择器外，还有其他类型的选择器，例如类选择器和ID选择器。类选择器以.开头，后面跟着类名，而ID选择器以#开头，后面跟着ID名称。例如：

   /* 类选择器 */
   .my-class {
     background-color: yellow;
   }
   
   /* ID选择器 */
   #my-id {
     font-size: 24px;
   }
   

   类选择器和ID选择器可以用来选择具有特定类或ID的元素，并为其应用样式。

   此外，CSS还支持伪类选择器和复合选择器。伪类选择器用于选择处于特定状态的元素，例如鼠标悬停在元素上时或选中复选框时。复合选择器则可以通过空格、逗号、大于号等符号将多个简单选择器组合在一起，以选择符合多个条件的元素。例如：

   /* 复合选择器 */
   div p {
     color: blue;
   }
   
   /* 伪类选择器 */
   a:hover {
     color: green;
   }
   

   通过使用不同类型的CSS选择器，我们可以灵活地选择HTML元素并为其应用样式，从而创建出美观、可维护的网页设计。