CSS选择器选择器

1.标签选择器

p {

            background-color:yellow;

            color:white;

    }

2.通配符选择器

* { color：red; }

设置当前页面中所有标签的颜色为红色

3.ID选择器（#）

4.类选择器（.）

5.复合选择器

h3.demo{} 需要同时满足既是标签h3又拥有demo类才能被选择到。

6.后代选择器   中间用空格分隔  后代不仅仅包括儿子，还包括子子孙孙

7.子代选择器

是让CSS选择器智能选择儿子辈的元素

h1 > strong {color:red;}

8.属性选择器

属性选择器就是根据html标签的属性进行过滤选择

常见的几种方式：

 h1[id] {color: red; }

设置包含id属性的h1标签的字体为红色。

 

        /*把拥有id和class属性的h1标题选出来然后设置字体大小为17px*/

        h1[id][class] { font-size: 17px; }

 

        input[type="text"] {background-color: purple; }

设置拥有type属性并且属性值是text的input标签的背景为紫色。

9.伪类选择器

:link

伪类将应用于未被访问过的链接。IE6不兼容，解决此问题，直接使用a标签。

:hover

伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接，IE7+所有元素都兼容。

:active

伪类将应用于被激活的元素，如被点击未放开的链接、被按下未放开的按钮等。

:visited

伪类将应用于已经被访问过的链接

:focus

伪类将应用于拥有键盘输入焦点的元素。

顺序问题：LoVe  FHAte原则。

10.伪元素选择器

伪元素是控制内容

:first-line 伪元素

:first-letter 伪元素

注释：以上两个伪元素只能用于块级元素

:first-child 伪元素，选择属于第一个子元素的元素。

    例如：span:first-child{}  /*选择属于第一个子元素的所有span标签。*/

:before与:after伪元素，可以设置元素之前后之后的 内容，并且配合content设置相关内容。比如：   #demo:after,#demo:before{  content:"--";display:block;}