CSS选择器选择器

时间:2022-11-03 11:21:58

1.标签选择器

p {

            background-color:yellow;

            color:white;

    }


2.通配符选择器

* { color:red; }

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


3.ID选择器(#)
4.类选择器(.)
5.复合选择器 h3.demo{} 需要同时满足既是标签h3又拥有demo类才能被选择到。
6.后代选择器   中间用空格分隔  后代不仅仅包括儿子,还包括子子孙孙
CSS选择器选择器

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;}