css选择器

---css选择器大致分成5类：基本选择器、层次选择器、伪类选择器、属性选择器、伪元素选择器。（如下图）

1、基本选择器：

　　（1）标签选择器，又称类型选择器，用来声明html标签采用哪种CSS样式，也就是重新定义了html标签

　　　　eg:

This is css style

h1{
    color:red;
}

　　（2）通配选择器(*)，单独使用时，这个选择器可以跟文档中任何元素匹配

eg:

令所有的文字颜色变为天蓝色，字体大小25px:

*{
   color:skyblue;
   font-size:25px;        
}

　（3）id选择器(#)：类似于class选择器，不过id属性只能在每个html文档中出现一次，同时也仅指一个

这是个红色字体的段落

这是个天蓝色字体的段落

#one{
  color:red;
}
#two{
  color:skyblue;
}

（4）class选择器(.):又称类选择器，类选择器允许以独立与文档元素的方式来指定样式，类选择器可单独使用，也可以与其他元素结合使用


    这是嵌套在“box”里面的段落

.box{
  width:200px;
  height:200px;                   /*设置一个宽和高皆为200px的方框*/
  border:1px solid #000;
}
.box p {
  color:red;    /*设置盒子里面的段落字体为红色*/
}

　（5）群组选择器：群组选择器实际上是对于css一种简化的写法，它能够把需要定义相同样式的不同的选择器放在一起，然后中间用“，”隔开，这样可以为我们省下很多代码，大大提升效率。

这是一个盒子

这是一个段落

#box,p{
  color:red;     /*设置盒子及与它相邻的段落p里面的字体颜色为红色*/
}

2、层次选择器

（1）包含选择器（E F）：又称后代选择器，具体作用为选择元素的后代元素,后代选择器与子元素选择器之间使用空格来表示它们之间的关系。


   我是一个链接

ul li a{  /*后代选择器 ul 的子元素li ,再li的子元素a*/
  text-decoration:none;   /*令链接去掉下划线*/
}

（2）子选择器（E > F）:子选择器用于选择父元素的子元素（嫡子），但不包括子元素的子元素，它仅仅指它的直接后代，也仅仅作用于它的直接后代。

 ul.Inter > li > a{
    text-decoration:none;   /*令链接一去掉下划线，此时链接二不受影响*/  
}

（3）相邻选择器（E + F）:顾名思义，选择“邻居”，相邻选择器用于同辈元素，例如EF是同辈元素，而F是紧跟E后面的元素，并相邻，这样，我们就可以使用相邻选择器来选中F。


  1
  2 
      3

.boxOne + div {
    color:red;    /*选择 2 变成红色，3 不受影响*/  
}

（4）通用选择器（E ~ F）：通用选择器与相邻选择器类似，用于同辈元素，例如EF为同辈元素，F元素位于E元素之后，通用选择器将选中于E之后所有的F元素。

.ids ~ div{
   color:red;  /*选择1后面的2,3,4,5的字体颜色为红色，6不受影响*/
}

CSS

This is css style