css入门-选择器

css入门-选择器

1、基本选择器

1. 标签选择器

       h1{
           background: blanchedalmond;
           border-radius: 30px;
       }
   

   会选择所有的同名的标签，如果想选择某一个标签的时候该选择器无能为力。

2. 类选择器

      /*标签选择器会选择所有class名字相同的标签
         好处：可以对多个标签进行归类，使用同一个class*/
       .rookie{
           background: #ce097f;
           border-radius: 30px;
       }
   

3. ID选择器

    /*id选择器必须保证全局唯一，应该是用的最多和最常用的选择器*/
    #rookie{
        background: #2459c4;
        border-radius: 30px;
    }

4. 选择器的优先级

   id选择器>类选择器>标签选择器

2、高级选择器

    /*后代选择器
    在某个元素的后面 你爷爷的爷爷 你爷爷的爸爸 你爷爷 你爸爸 你*/
    body p{
        background: #ce097f;
        border-radius: 30px;
    }
    /*子选择器，一代，儿子*/
    body>p{
        background: #ce097f;
        border-radius: 30px;
    }
    /*相邻弟选择器，只能选择同级目录的下一个*/
    .test+p{
        background: #ce097f;
        border-radius: 30px;
    }
    /*通用兄弟选择器，选择同级目录的下面所有兄弟节点*/
    .test~p{
        background: #ce097f;
        border-radius: 30px;
    }