常用选择器 [CSS][web前端]

常用选择器

1. 元素选择器
   • 作用: 根据标签名来选中指定的元素
     • 但是元素选择器一旦选中就是选中了所有的该元素
   • 语法: 标签名 { }
   • eg: p{} , h1{} , div{}

实际代码举例:

<style>
    /* 元素选择器 */
    这个会选中所有的p元素 */
    p{
        color: pink;
    }
</style>

• 上面就是一个元素选择器

2. id选择器
   • 作用: 根据元素的id属性值来选中元素
     • 使用id选择器我们理论上来讲一次只能选择一个元素,因为我们同一个页面中的id属性值是不能重复的
       • 但是如果我们使用重复的id属性值也是不会报错的,并且我们的id选择器也会将他们都选择中,但是这个时候可以只是一个漏洞,我们是不推荐一个页面中有重复的id属性值的,如果出现重复的id属性值,这个时候如果是在javaScript中就会出现一些错误,所以我们说理论上我们的id选择器一次只能是选中一个元素
   • 注意: 我们的id属性不能是数字开头,就和我们的标识符命名的方式是一样的
   • 语法: #id属性值{}
   • 例子:#a{}

实际代码举例:

<style>
    /* id选择器 */
    #a{
        color:red;
    }
</style>

• 上面就是一个id选择器

3. 类选择器
   • 作用: 根据元素的class属性值选中一组元素
   • 语法: .(小数点)class属性{}(后面的这一对花括号其实是我们的声明块,并不是选择器,但是我们一般将选择器和声明块写在一起不会分开)
   • class属性是标签中的一个属性,它和id属性是比较相似的,不同的是我们的同一个页面中可以出现多个相同的class是属性
     • 所有的标签都有class属性
     • 我们的class属性在指定属性值的时候属性值也要符合标识符的命名规范
   • id属性是表示是唯一的,而class属性表示是一组,可以有多个标签属于一组,所以我们就可以有多个标签有相同的class属性 , 一个标签也可以同时属于多个组 , 也就是我们的一个标签中可以有多个class属性值 (多个class属性值之前使用空格分开)

我们在实际编程中最常使用的就是类选择器

实际代码举例:

<style>
    /*
    类选择器
    */
    .a{
        color:pink;
    }	
</style>

• 上面就是一个类选择器

4. 统配选择器
   • 作用: 选中页面中的所有元素
   • 语法* {}

实际代码举例:

<style>
    /* 统配选择器 */
    *{
        color:red;
    }
</style>

• 上面就是一个统配选择器