（基础）选择器的语法

1、什么是选择器

• CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始
• CSS 选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式
• 选择器可以分为基础选择器、复合选择器

2、基本选择器

（1）通配（通用）选择器

• 语法 *{ 样式声明 }
• 作用：匹配任意类型的HTML元素

<style>        
    /* 页面上所有元素都被选择 */
    *{
        background-color:green;
    }
        
</style>

 /* 一般用于清除浏览器的默认样式 */
            margin: 0;
            padding: 0;
权重是0

（2）元素名称（标签）选择器

• 语法： 元素名称{ 样式声明 }
• 作用：选择所有同一元素名称的所有元素

/* 选择页面上所有的div */
div{
	width:100px;
	height:100px;
	background-color:red;
}
权重是1

 （3）类选择器

• 语法

  • HTML中通过class属性定义

    <div class="box"></div>
    

  • css中以点进行标识:

• • .类名 {
        样式声明;
    }
    .box{
     background-color:red;
    }
    权重是10

• 作用:选择所有带有指定类名的元素

• 多类名的使用（词列表）

  • 语法：空格隔开

  •     <p class="box box1 box2">p</p>

（4）id选择器

• 语法

  • HTML中通过id属性定义

    如：

    <div id="box"></div>
    

  • css中以点进行标识:#

    #id名称 { 
        样式声明;
    }
    
    
    #box{
     background-color:red;
    }
    权重是100

• 作用:选择所有带有指定id名的元素

注意：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用。

 

*类与id的命名规则*

• 见词知义，尽量用英文；
• 始终建议以字母开头，可以包含数字、字母、下划线等
• 不要以数字开头
• 多个单词可以以驼峰式（newsCont）、中划线连接（news-cont）、下划线连接（news_cont）等

 

总结

• 总结使用频率

  • *通配符选择器：通常用于重置样式【最不常用】。
  • 标签选择器：定义的全局样式，单独使用要慎重。
  • class类选择器：基础选择器中最常用。
  • id选择器：用于页面中唯一模块，具有唯一性。