CSS—常用选择器

选择器是指通过一定的语法规则选取到对应的HTML标记，然后给这个对应的HTML标记设置样式
 
1.标签选择器
写法:标签名{属性:值;属性:值}
标签选择器影响范围大，一般用来做一些通用设置，或用在层级选择器中。
举例：
div{color:red}

......

<div>这是第一个div</div>  <!--对应以上样式
-->

<div>这是第二个div</div>  <!--对应以上样式
-->

2.类选择器
写法:类名{属性:值;属性:值}
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例:
.blue{color:blue}

.big{font-size:20px}

.box{width:100px;height:100px;background:gold}

......

<div class="blue">....</div>

<h3 class="blue big box">....</h3>

<p class="blue box">....</p>

3.层级选择器(后代选择器)
写法：父选择器空格子选择器{属性：值}
主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围。
举例:
.con{width:300px;height:80px;background:green}

.con span{color:red}

.con .pink{color:pink}

.con .gold{color:gold}

......

<div class="con">

    <span>....</span>

    <a href="#"class="pink">....</a>

    <a href="#"class="gold">...</a>

</div>

<span>....</span>

<a href="#" class="pink">....</a>

选择器	书写格式
标签选择器	标签名{属性:值} P{color:red}
类选择器	.类名{属性,值} .title{color:red}
层级选择器	.类名.子类名{属性:值} .title.subtitle{属性:值}

其他选择器（了解：

通用选择器:

*{属性:值}

    *{

        color:red;

    }

 

子选择器
E>F{属性:值};子元素选择器,匹配所有属于E元素的子元素F,
1.子元素选择器:
只是子元素

  /*.box>p{

color:  red;

  }*/

相邻元素选择器
E+F{属性:值}; 相邻元素选择器,匹配所有紧随E元素之后的元素(下面)
/*相邻元素选择器

  1.相邻下面的元素,不是上面

  2.中间不能隔元素设置

  */

  .box div+p{

color: red;

  }
属性选择器
属性选择器:标签[属性class] 针对所有是class属性的元素

标签[title=“123”],匹配所有title属性值是123的元素

标签[title^=“1”],匹配所有title属性值是以1开头元素

标签[title$=“1”],匹配所有title属性值是以1结尾元素

标签[title*=“1”],匹配所有title属性值是有1的元素
    /*1.只要有class属性*/

            /*div[class]{

color:red;

            }*/

/*2.class="12"*/

           /*div[class="12abs"]{

color:red;

            }*/

/*3.以class^="12",以12开头的值*/

            /*div[class^="12"]{

color:red;

            }*/

/*4.以class$="12",以12结尾的值*/

            /*div[class$="12"]{

color:red;

            }*/

/*5.以class*="a",凡是有a的值*/

            div[class*="a"]{

color:red;

            }

 

其他选择器1
1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

2、E:first-child：匹配元素类型为E且是父元素的第一个子元素

3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
   /*1.第几个子元素; 
标签类型和序号必须全部一致*/

            /*.box div:nth-child(1){
color:red;

            }*/

            /*倒着数

            .box div:nth-last-child(2){

color:red;

            }*/
/*最后一个*/

            /*.box div:last-child{

color:red;

            }*/
/*第一个 
标签类型和序号必须全部一致*/

            .box div:first-child{

color:red;

            }

其他选择器2
1.E:nth-of-type(n) 第几个E类型元素

2.E:first-of-type 第一个
E:last-of-type 最后一个

       /*子元素中 
第一个div标签*/

     .box div:nth-of-type(3){

color: gold;

     }

.box div:first-of-type{

color: red;

     }

.box div:last-of-type{

color: green;

     }