基本选择器

选择器	类型	功能描述
*	通配选择器	选择文档中所有 HTML 元素
E	元素选择器	选择指定的类型的 HTML 元素
#id	ID 选择器	选择指定 ID 属性值的任意类型元素
.class	类选择器	选择指定 class 属性值的任意类型元素
selector1,selectorN	群组选择器	将每一个选择器匹配的元素集合并

通配选择器

• 简介

  通配选择器(*)用来选择所有元素，当然也可以选择某个元素下的所有元素。

• 例子

  • index.html

    <h1>我是一个标题</h1>
    <p>我是一个段落</p>
    

  • index.css

    * {
      margin: 0;
    }
    

元素选择器

• 简介

  元素选择器是 CSS 选择器 中最常见、最基本的选择器。

  如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

• 例子

  • index.html

    <h1>我是一个标题</h1>
    <p>我是一个段落</p>
    

  • index.css

    h1 {
      font-size: 18px;
      color: #ff0000;
      margin: 10px 0;
    }
    
    p {
      font-size: 14px;
      color: #718c00;
      margin: 10px 0;
    }
    

ID 选择器

• 简介

  在使用 ID 选择器(#id)之前，需要在 HTML 文档中给对应的元素设置 ID 属性 并设置其值，才能找到对应的元素。ID 选择器具有唯一性，在一个页面中不会同时出现 ID 相同的属性值。在 CSS 样式中使用 ID 选择器时，需要在 ID 属性值 的前面加上(#)号，如(#id)。

  区分大小写

  请注意，类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写，所以类和 ID 值的大小写必须与文档中的相应值匹配。

• 例子

  • index.html

    <h1 id="title">我是一个标题</h1>
    <p id="Article">我是一个段落</p>
    

  • index.css

    #title{
        font-size: 40px;
        color: red;
    }
    #article{
        font-size: 20px;
        color: yellow;
    }
    

类选择器

• 简介

  类选择器(.class)是以独立于文档元素的方式来指定元素样式。

  该选择器可以单独使用，也可以与其他元素结合使用。

  与 ID 选择器不同的是，一个页面可以有多个相同的类名。

• 例子

  • index.html

    <h1 class="title">我是一个标题</h1>
    <p class="title article bg">我是一个段落</p>
    <p class="article">我是一个段落2222</p>
    

  • index.css

    .title{
        font-size: 40px;
        color: red;
    }
    .article{
        font-size: 20px;
    }
    .bg{
        background-color: #ccc;
    }
    

选择器分组

• 简介

  群组选择器(selector1,selectorN)是将具有相同样式的元素分组在一起，每个选择器之间用逗号(,)隔开。

• 例子

  • index.html

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <p>我是一个段落</p>
    <p id="article">我是一个定义id段落</p>
    <p class="article">我是一个定义类class段落</p>
    

  • index.css

    h1,
    h2,
    h3,
    p {
      font-size: 14px;
      color: #c82829;
      margin: 10px 0;
    }
    #article, .article{
      background-color: #ccc;
    }