css常用选择器（一）

目录

前言

选择器

1.类选择器（.class）

2.ID选择器（#id）

3.元素选择器（element）

4.后代选择器（element element）

5.子元素选择器（element > element）

6.伪元素选择器（::before, ::after, ::first-line, ::first-letter等）

7.伪元素选择器（::before, ::after, ::first-line, ::first-letter等）

8.属性选择器（[attribute], [attribute=value], [attribute~=value], [attribute|=value]等）

9.相邻兄弟选择器（element + element）教程

10.通用选择器（*）教程

前言

这里主要介绍：

  1. 类选择器（.class）
  2. ID选择器（#id）
  3. 元素选择器（element）
  4. 后代选择器（element element）
  5. 子元素选择器（element > element）
  6. 伪类选择器（:hover, :first-child, :nth-child(n), :not(selector), :checked, :disabled等）
  7. 伪元素选择器（::before, ::after, ::first-line, ::first-letter等）
  8. 属性选择器（[attribute], [attribute=value], [attribute~=value], [attribute|=value]等）
  9. 相邻兄弟选择器（element + element）
  10. 通用选择器（*）

选择器

1.类选择器（.class）

是一种在CSS中用来为具有相同类名的元素添加样式的选择器。以下是类选择器的使用教程：

        在HTML中，为需要应用相同样式的元素添加相同的类名。例如：

<p class="highlight">This is a paragraph with a highlight class.</p>
<span class="highlight">This is a span with a highlight class.</span>

        在CSS中，使用类选择器来为具有相同类名的元素添加样式。例如：

.highlight {
  color: red;
  font-weight: bold;
}

        在上面的例子中，所有具有highlight类名的元素（即两个p和span元素）都会应用红色文本和加粗样式。

        如果需要为不同的元素添加不同的样式，可以为它们分别添加不同的类名，并在CSS中为这些类名定义不同的样式。例如：

<p class="highlight">This is a paragraph with a highlight class.</p>
<span class="underline">This is a span with an underline class.</span>

.highlight {
  color: red;
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

        类选择器可以与其他选择器结合使用，以实现更加灵活和精确的样式设计。例如，可以使用后代选择器、子元素选择器等结合类选择器来选择特定的元素并添加样式。

2.ID选择器（#id）

ID选择器（#id）是一种在CSS中用来为具有特定ID属性的元素添加样式的选择器。以下是ID选择器的使用教程：

在HTML中，为需要应用样式的唯一元素添加一个唯一的ID属性。例如：

<div id="header">This is the header</div>

在CSS中，使用ID选择器来为具有特定ID属性的元素添加样式。例如：

#header {
  background-color: lightblue;
  color: white;
  padding: 10px;
}

在上面的例子中，具有ID属性为"header"的div元素会应用背景颜色为浅蓝色、文字颜色为白色、内边距为10px的样式。

由于ID属性应该是唯一的，因此一个页面中只应该有一个具有特定ID属性的元素。

ID选择器具有更高的优先级，因此它的样式会覆盖其他选择器的样式。因此，应该谨慎使用ID选择器，避免过度使用，以免导致样式的混乱和不易维护。

ID选择器也可以与其他选择器结合使用，以实现更加灵活和精确的样式设计。例如，可以使用后代选择器、子元素选择器等结合ID选择器来选择特定的元素并添加样式。

3.元素选择器（element）

元素选择器是CSS中最简单的选择器之一，它使用HTML元素的名称来选择元素。以下是一些关于元素选择器的教程：

基本语法：
元素选择器的基本语法非常简单，只需要写出元素的名称即可。例如，要选择所有段落元素，可以使用p作为选择器。

示例代码：

p {
    color: red;
    font-size: 16px;
}

上面的代码表示选择所有段落元素，并将它们的文字颜色设置为红色，字体大小设置为16像素。

通用选择器：
如果想选择所有元素，可以使用通用选择器*。例如，* { margin: 0; padding: 0; }表示将所有元素的外边距和内边距都设置为0。

嵌套选择器：
元素选择器可以与其他选择器进行嵌套，以实现更精确的选择。例如，.container p表示选择类名为container的元素内部的所有段落元素。

多个元素选择器：
可以同时选择多个元素进行样式设置。例如，h1, h2, h3 { font-weight: bold; }表示将所有<h1>、<h2>和<h3>元素的文字加粗。

总的来说，元素选择器是CSS中最基础的选择器之一，可以用来选择HTML文档中的各种元素，并为它们设置样式。通过熟练掌握元素选择器的用法，可以更好地控制页面的外观和布局。

4.后代选择器（element element）

后代选择器（element element）是一种在CSS中用来选择某个元素的后代元素的选择器。后代选择器会选择指定元素内部的所有后代元素，无论后代元素是多层嵌套的。以下是后代选择器的使用教程：

在HTML中，可以有多层嵌套的元素结构，例如：

<div class="container">
  <h1>Title</h1>
  <p>This is a paragraph.</p>
  <div>
    <p>This is a nested paragraph.</p>
  </div>
</div>

在CSS中，使用后代选择器来选择指定元素的后代元素并添加样式。例如，如果想要为容器元素内部所有段落元素添加样式，可以这样写：

.container p {
  color: blue;
}

在上面的例子中，所有在类名为"container"的元素内部的段落元素都会应用蓝色文字颜色。

后代选择器可以用来选择特定层级结构内的元素，并为它们添加样式，这样可以实现更加灵活和精确的样式控制。

后代选择器是一种常用的选择器，但要注意不要过度嵌套选择器，以避免样式的冲突和不易维护。建议尽量简化选择器的层级结构，保持代码清晰易读。

5.子元素选择器（element > element）

子元素选择器（element > element）用于选择指定元素的直接子元素。只有直接子元素会被选中，而不会选择孙子元素或其他后代元素。

例如，如果我们有以下HTML结构：

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
</div>

我们可以使用子元素选择器来选择直接子元素：

.parent > .child {
  color: red;
}

这样只有class为"child"的直接子元素会被选中，并设置文字颜色为红色。

伪类选择器（:hover, :first-child, :nth-child(n), :not(selector), :checked, :disabled等）

伪类选择器是用来选择元素的特殊状态或位置的选择器。这些伪类选择器以冒号（:）开头，并且可以用来为元素添加一些特殊样式或行为。

一些常见的伪类选择器包括：

  1. :hover - 鼠标悬停时应用的样式
  2. :first-child - 选择父元素下的第一个子元素
  3. :nth-child(n) - 选择父元素下第n个子元素
  4. :not(selector) - 排除指定选择器的元素
  5. :checked - 选择被选中的表单元素
  6. :disabled - 选择被禁用的表单元素

例如，我们可以使用:hover伪类选择器为链接元素添加悬停效果：

a:hover {
  color: red;
}

我们也可以使用:nth-child(n)伪类选择器来选择父元素下的第n个子元素：

ul li:nth-child(odd) {
  background-color: lightgrey;
}

这样会选择ul元素下的奇数位置的li元素，并设置背景颜色为浅灰色。

6.伪元素选择器（::before, ::after, ::first-line, ::first-letter等）

伪元素选择器用来在元素的内容之前或之后插入额外的内容，并且可以为这些额外的内容设置样式。伪元素选择器以双冒号(::)开头。

一些常见的伪元素选择器包括：

  1. ::before - 在元素内容之前插入额外内容
  2. ::after - 在元素内容之后插入额外内容
  3. ::first-line - 选择元素的第一行文本
  4. ::first-letter - 选择元素的第一个字母

例如，我们可以使用::before伪元素选择器为元素的内容之前插入一个装饰性的箭头：

p::before {
  content: "➡ ";
}

我们也可以使用::first-line伪元素选择器来设置段落的第一行文本的样式：

p::first-line {
  font-weight: bold;
}

这样会将段落的第一行文本加粗显示。请注意，伪元素选择器只能用于内容元素，而不能用于空元素或其他非内容元素。

7.伪元素选择器（::before, ::after, ::first-line, ::first-letter等）

伪元素选择器用于选择文档中不存在的特定元素而不是已经存在的元素。常见的伪元素选择器包括：

  1. ::before：在元素内容之前插入内容。
  2. ::after：在元素内容之后插入内容。
  3. ::first-line：选择元素的第一行文本。
  4. ::first-letter：选择元素的第一个字母。
  5. ::selection：选择用户选择的文本部分。
  6. ::placeholder：选择表单元素的占位符文本。
  7. ::marker：选择列表项的标记部分。

这些伪元素选择器可以用来对文档中的元素进行样式设置或添加额外的内容，从而实现更灵活的设计效果。在使用伪元素选择器时，需要注意不同浏览器对伪元素的支持程度可能会有所不同，建议在使用时进行兼容性测试。

7.伪元素选择器（::before, ::after, ::first-line, ::first-letter等）

以下是关于常见的伪元素选择器的简要教程：

  1. ::before和::after：

    • ::before和::after伪元素用于在元素内容的前面和后面插入内容。
    • 语法：element::before和element::after，其中element为要添加伪元素的元素。
    • 示例： 
      p::before {
  content: "Before text ";
}
p::after {
  content: " After text";
}

  2. ::first-line：

    • ::first-line伪元素用于选择元素的第一行文本。
    • 语法：element::first-line，其中element为要选择的元素。
    • 示例： 
      p::first-line {
  font-weight: bold;
}

  3. ::first-letter：

    • ::first-letter伪元素用于选择元素的第一个字母。
    • 语法：element::first-letter，其中element为要选择的元素。
    • 示例： 
      p::first-letter {
  font-size: 2em;
}

以上是关于常见的伪元素选择器的简要介绍和示例。在实际应用中，可以根据需求使用不同的伪元素选择器来实现特定的设计效果。更多关于伪元素选择器的详细用法和示例可以参考CSS官方文档或其他CSS教程资源。

8.属性选择器（[attribute], [attribute=value], [attribute~=value], [attribute|=value]等）

属性选择器用于选择具有特定属性的元素。以下是关于常见属性选择器的简要教程：

  1. [attribute]：选择具有指定属性的元素。

    • 语法：element[attribute]，其中element为要选择的元素，attribute为要匹配的属性名。
    • 示例： 
      input[type] {
  border: 1px solid red;
}

  2. [attribute=value]：选择具有指定属性值的元素。

    • 语法：element[attribute=value]，其中element为要选择的元素，attribute为要匹配的属性名，value为要匹配的属性值。
    • 示例： 
      a[href="https://www.example.com"] {
  color: blue;
}

  3. [attribute~=value]：选择具有属性值中包含指定词汇的元素。

    • 语法：element[attribute~=value]，其中element为要选择的元素，attribute为要匹配的属性名，value为要匹配的词汇。
    • 示例： 
      li[class~=active] {
  font-weight: bold;
}

  4. [attribute|=value]：选择具有属性值以指定值开头或以指定值加连接符“-”开头的元素。

    • 语法：element[attribute|=value]，其中element为要选择的元素，attribute为要匹配的属性名，value为要匹配的值。
    • 示例： 
      p[lang|="en"] {
  color: blue;
}

以上是关于常见属性选择器的简要介绍和示例。在实际应用中，可以根据需要使用不同的属性选择器来选择特定的元素并对其应用样式。更多关于属性选择器的详细用法和示例可以参考CSS官方文档或其他CSS教程资源。

9.相邻兄弟选择器（element + element）教程

相邻兄弟选择器（Adjacent Sibling Selector）用于选择紧接在另一个元素之后的元素。语法为element1 + element2，其中element1是要选择的元素，element2是紧接在element1后面的元素。

下面是一个简单的示例，演示如何使用相邻兄弟选择器：

HTML代码：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS代码：

li + li {
  margin-top: 10px;
}

在这个示例中，相邻兄弟选择器li + li选择了紧接在前一个<li>元素后面的<li>元素，并为其添加了margin-top: 10px;样式，从而在每个<li>元素之间添加了10像素的顶部间距。

使用相邻兄弟选择器可以方便地选择特定位置的元素，并对其应用样式。在实际应用中，可以根据需要灵活运用相邻兄弟选择器来实现特定的布局效果。更多关于相邻兄弟选择器的详细用法和示例可以参考CSS官方文档或其他CSS教程资源。

10.通用选择器（*）教程

通用选择器（Universal Selector）用于选择文档中的所有元素。通用选择器的语法是*，表示选择所有元素。

下面是一个简单的示例，演示如何使用通用选择器：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

在这个示例中，通用选择器*选择了文档中的所有元素，并为它们设置了margin: 0;，padding: 0;和box-sizing: border-box;样式。这样可以确保所有元素都具有相同的盒模型样式。

通用选择器通常用于重置默认样式或为所有元素设置通用样式。但需要注意的是，过度使用通用选择器可能会导致性能问题，因为它会匹配文档中的所有元素，包括嵌套的元素，可能会增加浏览器的渲染负担。

在实际应用中，建议谨慎使用通用选择器，尽量避免过度使用，以免影响页面性能。更多关于通用选择器的详细用法和示例可以参考CSS官方文档或其他CSS教程资源。