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




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值