CSS基本选择器

基本选择器包括：

1.通配选择器

2.元素选择器

3.类选择器

4.ID选择器

通配选择器

• 作用：可以选中所有的HTML元素
• 语法：

   * {
  属性名: 属性值;
}

• 举例：

    * {
  color: red;
  font-size: 40px;
}

备注：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助

元素选择器

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

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

• 举例：

  h1 {
  color: red;
  font-size: 40px;
}

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

备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样

类选择器

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

class翻译过来有：种类、类别的含义，所以class值，又称：类名

• 语法：

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

• 举例：

.title {
  color: red;
}

.number {
  color: blue;
}

• 注意点：
  • 元素的class属性值不带. 但CSS的类选择器要带.
  • class值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若有多个单词组成，使用-做连接，例如：top-menu，且命名要有意义，做到 ”见名知意“
  • 一个元素不能写多个class属性，下面是错误示例：

      <!-- 该写法错误，元素的属性不能重复，后写的会失效 -->
      <h1 class = "title" class = "one-title">我是一级标题</h1>
    

  • 一个元素的class属性，能写多个值，要用空格隔开，例如：

      <h1 class = "title one-title">我是一级标题</h1>
    

ID选择器

• 作用：根据元素的id属性值，来精准的选中某个元素
• 语法：

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

• 举例：

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

• 注意：
  • id属性值：尽量由字母、数字、下划线（_）、短杠（-）组成，最好以字母开头、不要包含空格、区分大小写
  • 一个元素只能拥有一个id属性，多个元素的id属性值不能相同
  • 一个元素可以同时拥有id和class属性

基本选择器总结

基本选择器	特点	用法
通配选择器	选中所有标签，一般用于清除样式	* {clolr: red;}
元素选择器	选中所有同种标签，但是不能差异化选择	h1{color: red;}
类选择器	选中所有特定类名（class值）的元素 —— 使用频率很高	.title{color: red;}
ID选择器	选中特定id值的那个元素（唯一的）	#title1{color: red;}