CSS常用选择器

1.基本选择器

1.1 标签选择器：

格式：标签名 {}

作用：选择到页面上所有带有这个标签的元素

1.2 类选择器

格式：.class类名 {}
作用：对多个标签进行归类，同一个类可以复用

1.3 id选择器

格式： #id名称 {}
作用：根据id实现，id必须保证全局唯一，不可复用

示例代码：

/*
    标签选择器：会选择到页面上所有的这个标签的元素
    格式：标签名 {}
    */
h1 {
    color: chartreuse;
    background: yellow;
}

/*
    类选择器：可以对多个标签进行归类，同一个类可以复用
    格式：  .class类名 {}
    */
.class1 {
    color: #9c1814;
    background: #119c0c;
}

/*
    id选择器：根据id实现，id必须保证全局唯一，不可服用
    格式：#id名称{}
*/
#id1{
    color: aqua;
    background: aliceblue;
}
#id2{
    color: #9c1814;
    background: aquamarine;
}
#id3 {
    color: #14209c;
    background: coral;
}

效果：

2.层次选择器

2.1 后代选择器

格式： 祖先标签 后代标签 {}
作用： 将祖先的所有后代标签进行选中

2.2 子选择器

格式： 父标签>子标签 {}
作用： 将父标签的所有子标签进行选中

2.3 相邻兄弟选择器

格式： 兄长标签的类+兄弟标签 {}
作用： 选中兄长标签的向下的一个兄弟标签

2.4 通用选择器

格式： 兄长标签的类~兄弟标签 {}
作用： 选中兄长标签的向下的所有兄弟标签

示例代码（html+csss）

    
    
    
	


    
示例1
    
示例2
    
示例3
    

        
示例4
        
示例5
        

            
示例6
            
示例7
            
示例8
        
    

效果图：

3.属性选择器

属性选择器格式：
            标签名[属性]{}

            =  ：表示全等
            *=  ：包含有
            ^=  :以。。。开头
            $= ：以。。。结尾

示例代码：

    
    

    


    

        已
        不
        知
        落
        在
        何
        地

    

效果图：