基本选择器

4.1 类型选择器

在CSS中，选择器用于定义将应用样式的元素。基本选择器包括类型选择器、类选择器、ID选择器和通用选择器。每种选择器都有其自身的特点和应用。

类型选择器 (Type Selectors)

类型选择器将样式应用于所有特定类型的元素。例如，可以应用样式于所有段落(<p>)、标题(<h1>, <h2>等)或其他HTML标签。

    
      tagname {
        属性: 值;
        属性: 值;
      }
    
  

    
      p {
        color: blue;
        font-size: 14px;
      }
    
  

这个选择器将样式应用于文档中的所有<p>元素。

特点：

• 应用于所有指定类型的元素
• 适用于需要应用于所有特定类型元素的全局样式

4.2 类选择器

类选择器允许将样式应用于具有特定类的一个或多个元素。类通过HTML中的class属性定义，在CSS中用点号(.)表示。

语法：

    
      .classname {
        属性: 值;
        属性: 值;
      }
    
  

例子：

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

这个选择器将样式应用于所有具有button类的元素。

特点：

• 可以对多个元素使用相同的类
• 方便对不同元素使用相同的样式

4.3 ID选择器

ID选择器将样式应用于具有唯一ID的元素。ID通过HTML中的id属性定义，在CSS中用井号 (#) 表示。

语法：

    
      #uniq-id {
        属性: 值;
        属性: 值;
      }
    
  

例子：

这个选择器将样式应用于具有main ID的元素。

    
      /* 选择具有 #main ID 的元素 */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">这个元素将具有800px的宽度。</div>
      <div>这个元素不会被样式化。</div>
    
  

特点：

• ID在页面上必须是唯一的
• 用于样式化独特的元素，例如标题或主要内容

4.4 组合选择器

组合选择器允许将同一规则应用于多个元素。它们可以减少代码量，简化样式管理。

语法：

    
      selector, selector, … {
        属性: 值;
        属性: 值;
      }
    
  

例子：

    
      /* 选择所有 h1, h2 和 h3 元素 */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>标题 1</h1>
      <h2>标题 2</h2>
      <h3>标题 3</h3>
      <p>这个文本不会被该规则样式化。</p>
    
  

4.5 通用选择器

通用选择器将样式应用于页面上的所有元素。它们用星号 (*) 表示，可用于重置样式或为所有元素应用通用样式。

语法：

    
      * {
        属性: 值;
        属性: 值;
      }
    
  

例子：

这个选择器将样式应用于页面上的所有元素，重置其边距并设置盒子模型。

    
      <div>段落 1</div>
      <div>段落 2</div>
    
  

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

特点：

• 应用于页面上的所有元素
• 适用于全局样式重置或为所有元素设置基础样式