美文网首页
【CSS学习笔记2】-选择器

【CSS学习笔记2】-选择器

作者: 兔小小 | 来源:发表于2023-09-18 23:49 被阅读0次

    我们可以将 CSS 选择器分为五类:

    • 简单选择器(根据名称、id、类选择元素)
    • 组合器选择器(选择 元素基于它们之间的特定关系)
    • 伪类选择器(根据特定状态选择元素)
    • 伪元素选择器(选择 并设置元素的一部分样式)
    • 属性选择器(根据 属性或属性值)

    CSS 元素选择器

    p {
      text-align: center;
      color: red;
    }
    

    CSS id 选择器

    id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的,因此 id 选择器 习惯于 选择一个独特的元素!要选择具有特定 id 的元素,请编写哈希 (#) 字符,后跟元素的ID。注意:ID 名称不能以数字开头!

    #para1 {
      text-align: center;
      color: red;
    }
    

    CSS 类选择器

    类选择器选择具有特定类属性的 HTML 元素。要选择具有特定类的元素,请编写句点 (.) 字符,后跟类名。

    所有带有class=“center”的HTML元素都将是红色的,并且居中对齐:

    .center {
      text-align: center;
      color: red;
    }
    

    只有 class=“center” 的 <p> 元素将是 红色和居中对齐:

    p.center {
      text-align: center;
      color: red;
    }
    

    网页元素 也可以指多个类。在下面的例子里,<p> 元素将根据 class=“center” 设置样式 和 to class=“large”:

    CSS 通用选择器

    通用选择器 (*) 选择所有 HTML 元素。

    * {
      text-align: center;
      color: blue;
    }
    

    CSS 分组选择器

    分组选择器选择具有相同样式的所有 HTML 元素 定义。查看以下 CSS 代码(h1、h2 和 p 元素具有相同的 样式定义):

    h1 {
      text-align: center;
      color: red;
    }
    
    h2 {
      text-align: center;
      color: red;
    }
    
    p {
      text-align: center;
      color: red;
    }
    

    最好对选择器进行分组,以最小化代码。要对选择器进行分组,请用逗号分隔每个选择器。

    在这个例子中,我们从上面的代码中对选择器进行了分组:

    h1, h2, p {
      text-align: center;
      color: red;
    }
    

    相关文章

      网友评论

          本文标题:【CSS学习笔记2】-选择器

          本文链接:https://www.haomeiwen.com/subject/weknvdtx.html