CSS基本选择器

CSS基本选择器

CSS基本选择器有以下四类：

通配选择器

元素选择器

类选择器

id选择器

1.通配选择器

• 作用：选中所有的HTML元素

• 语法：

  * {
  	属性名:属性值;
  }
  

• 举例：

  * {
      /*选中所有元素*/
      color:orange;
      font-size:40px;
  }
  

  这里表示的是选中所有 字体颜色为橙色、大小40px 的字体。

  PS：通配选择器一般用来清除样式

2.元素选择器

• 作用：为页面的 某种元素 统一设置样式

• 语法：

  标签名 {
  属性名:属性值;
  }
  

• 举例：

  /*选中所有h1元素*/
  h1 {
      color:orange;
      font-size:40px;
  }
  
  /*选中所有p元素*/
  p {
      color:blue;
      font-size:60px;
  }
  

  PS：元素选择器无法实现差异化设置，例如以上代码中，所有h1和p元素的样式都是一样的

3.类选择器

• 作用：根据元素的class值，选中某些元素

• 语法：

  .类名 {
      属性名: 属性值;
  }
  

• 举例

  /*选中所有class值为manba的元素*/
  .manba {
      color:purple;
  }
  /*选中所有class值为man的元素*/
  .man{
      color:yellow;
  }
  

  PS：

  1.元素的属性值不带 . 但是类选择器要带

  2.class值是自己定义的，请注意不要使用纯数字、中文，尽量使用英文与数字组合，多个单词可以用连字符“ - ”连接，比如 left-menu，命名要有意义，做到见名知意。

  3.一个元素不能写多个class属性值，后写的会失效。

  4.一个元素的class属性，可以写多个值，必须用空格隔开，例如 class=man what can I say manba out

4.id选择器

作用：根据元素的id属性值，精准定位某个元素

语法：

#id值 {
    属性名: 属性值;
}

举例：

/*选中id值为ikun的元素*/
#ikun {
    color:grey;
    font-size:25px;
}

PS:

id属性值：尽量由字母、数字、下划线、短杠（ - ）组成，最好以字母开头，不要包含空格，区分大小写。

一个元素只能拥有一个 id 属性，多个元素 id 值不能相同。

一个元素可以拥有 id 与 class 属性。