CSS–选择器
CSS概述
CSS 指层叠样式表 (Cascading Style Sheets),样式表允许以多种方式进行规定样式信息,这个就是之前说过的CSS
的三种引入方式,打个比方:加入html
是骨架,那么CSS
就是各种各样的躯体.用来充实骨架,这样才有了形形色色的人们.
选择器的定义
==css 选择器
是用来选择标签的,选出来以后给指定的标签添加对应的样式==
标签选择器
==标签选择器根据标签名来选择标签,以标签名开头,此种选择器影响范围大,一般用来做一些通用设置。==
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <!DOCTYPE html> <html> <head> <title>Document</title> <style type="text/css"> /* 标签选择器,直接以标签名开头 */ p{ /* 设置颜色是红色 */ color: red; } </style> </head> <body> <!-- 网页展示的内容 --> <div>hello div</div> <p>hello p1</p> <p>hello p2</p> </body> </html>
|
类选择器
==类选择器根据类名来选择标签,以 . 开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器。==
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| <!DOCTYPE html> <html> <head> <title>Document</title> <style type="text/css"> /* 类选择器以.开头,后面填写需要被操作标签的类名 */ /* class中类名为div01的标签设置对应css样式 */ .div01{ color:blue } /* class中类名为p01的标签设置对应css样式 */ .p01{ color:red } /* class中类名为box的标签设置对应css样式 */ .box{ width:100px; height:100px; background:gold } </style> </head> <body> <div class="div01">这是一个div</div> <!-- 这个标签可以设置多个类名 --> <p class="p01 box">这是一个段落</p> </body> </html>
|
层级选择器(后代选择器)
==层级选择器根据层级关系选择后代标签,以 外层标签 内层标签,主要应用在标签嵌套的结构中,减少命名。这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器
==
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <!DOCTYPE html> <html> <head> <title>Document</title> <style type="text/css"> /* div 下在的p标签设置样式 */ div p{ color: red; } /* 类名为con的标签下的类名为url的标签设置样式 */ .con .url{ color:pink; } </style> </head> <body> <div> <p>hello</p> </div> <div class="con"> <p>hello world</p> <a href="http://www.baidu.com" class="url">度娘</a> </div> <p>你好</p> <a href="#" class="url">百度</a> </body> </html>
|
组选择器
==组选择器可以把多个标签组成一个组,以, 分割, 如果有公共的样式设置,可以使用组选择器进行统一的样式设置。==
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <!DOCTYPE html> <html> <head> <title>Document</title> <style type="text/css"> /* 组选择器使用,对标签进行分隔 */ /* 设置第一个与第三个div样式 */ .box1, .box3 { /* 设置宽度 */ width: 100px; /* 设置高度 */ height: 100px; /* 设置背影 */ background: green; } </style> </head> <body> <div class="box1">这是第一个div</div> <div class="box2">这是第二个div</div> <div class="box3">这是第三个div</div> </body> </html>
|
id选择器
==id选择器,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,所以不推荐使用id作为选择器。==
在css里id名称是可以的相同的。但如果页面涉及到JavaScript,就有问题了。因为JavaScript里获取DOM是通过getElementById,如果页面出现同一个id多次的话,这样元素就获取不到了。所以id需要唯一性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <!DOCTYPE html> <html> <head> <title>Document</title> <style type="text/css"> /* id选择器以#号开始 */ #div01{ color:red; } #div02{ color:green; } </style> </head> <body> <div id="div01">这是第一个段落标签</div> <!-- 每个标签的id名称不能相同--> <div id='div02'>这是第二个段落标签</div> <!-- 每个标签的id名称不能相同--> </body> </html>
|
属性选择器
==属性选择器根据属性选择标签,以 标签名[属性名=’属性值’]开头, 一个属性选择器可应用于多个标签上==
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <!DOCTYPE html> <html> <head> <title>Document</title> <style type="text/css"> /* 设置键为name值为hello的标签设置为红色 */ [name='hello']{ color: red } </style> </head> <body> <!-- 设置hello world与hello summer字体颜色为红色 --> <div name="hello"> hello world</div> <div name="baidu"> 百度 </div> <div name="hello"> hello summer </div> </body> </html>
|