CSS基本选择器

79 阅读1分钟

CSS基本选择器

1.通配选择器

  <style>
    * {
      color: red;
      font-size: 60px;
    }
  </style>

2.元素选择器

  <style>
    h1 {
      color: red;
      font-size: 60px;
    }
    h2 {
      color: red;
      font-size: 60px;
    }
  </style>

3.类选择器

   <style>
    .lei1 {         //定义时需要加一个.
      color: red;
      font-size: 60px;
    }
    .lei2 {
      font-size: 40px;
    }
  </style>
    <p class="lei1 lei2">使用时不需要.</p>
    <p class="lei2">通过class标签应用这个类</p>

可以混用,用空格隔开,类名尽量不使用纯数字,最好要表达出该样式的意思。 后写的样式可以覆盖掉先写的样式。

4.id选择器

  <style>
     #lei1 {         //定义时需要加一个#
      color: red;
      font-size: 60px;
    }
    #lei2 {
      font-size: 40px;
    }
  </style>
    <p id="lei1">使用时不需要#</p>
    <p id="lei2">通过id标签应用这个类</p>

不能混用,不能以数字开头作为类名,其他与类选择器相同。