CSS

CSS--选择器

1.标签选择器

eg:
div {color : red;}

2.类选择器

<div class='box eg'></div>
.box{color : red;}
.box.eg{color : red;}  // 同时满足两项

3.ID选择器

<div id="div1"></div>       
#div1{color : red;} // 同一文档中,元素id必须保证唯一性(虽然不会报错)

4.属性选择器

4.1

   [class]{color : red;}  //应用于所有含class属性的元素,不管属性的值

4.2

   [class='box']{color : red;} //应用于name属性的值为box(值必须完全匹配)的元素 
   //class="box eg"则不会应用该样式   
   //[class='boxeg']也不会,因为值必须完全匹配。

4.3

    [class~='box']{color:red;}  //只要class属性的值包含box就可以,不需要完全匹配。

4.4

    [class^='box'] {color : red;} //class属性的值必须以box开头才能应用该样式。

4.5

    [class$='box']{color :red;} //class属性的值必须以box结尾

4.6

  [class*='box']{color :red;} //只要class属性的值包含box子串

5.后代选择器

div span{color : red;}//所有是div后代的span,不管嵌套的又多深

6.孩子选择器

div > span{color :red;} //只选择是div的第一代孩子的span。

7.相邻兄弟选择器

div+span{color :red;}//和div在同一层级,且邻接在div的后面的span

伪类和伪元素

伪类:

a:link //用于没有访问的超链接(必须是有href属性的)

eg:

<a >1</a>   
a:link{color:red;} //不会对这个a标签起作用
a:visited  //已经访问了的超链接
a:active //元素被激活时,例如点击等
a:hover   //鼠标悬浮在元素上时,可以作用在任意元素上
a:focus  //元素获得输入焦点时
p:first-child {color : red} 
//应用于作为某个元素第一个孩子的p元素,不是p的第一个元素,这和下面说的伪元素有区别。

伪元素:

p:first-letter {color :red;} //p元素的首字母颜色变为红色
p:first-line{color:red} //p元素的首行字体颜色为红色
p:before{content : 'xxx' ;color : red} //在p元素的内容之前插入内容,content指定内容
p:after{content : 'xxx'}//在p元素内容的最后插入内容。
//更多伪类和伪元素参照w3school