版权声明：未经同意，严禁转载 https://blog.csdn.net/pengchengliu/article/details/88102859
|
css的选择器 要对哪一个标签里面的数据进行操作。哪一个标签就是选择器。 选择器分为基本选择器和扩展选择器。 基本选择器有三种：标签选择器、class选择器、id选择器。 一、标签选择器 定义：使用标签名作为选择器的名称。 例1： //标签选择器.html
| <html> <head> <title>标签选择器</title> <style type="text/css"> //这个div就是标签选择器 div{ background-color:blue; color:red; } </style> </head> <body> <div>可是大家发开始打飞机卡和手机</div> </body> </html> |
例2： //标签选择器.html
| <html> <head> <title>标签选择器</title> <style type="text/css"> div{ //这个div就是标签选择器 background-color:blue; } p{ background-color:red; } </style> </head> <body> <div>可是大家发开始打飞机卡和手机</div> <p>洛杉矶地方卢卡申科是咖啡啊</p> </body> </html> |
二、class选择器 每个html标签都有一个属性class 例1： //class选择器.html
| <html> <head> <title>class选择器</title> <style type="text/css"> div.haha{ //这个div.haha就是class选择器 background-color:blue; } </style> </head> <body> <div class="haha">可是大家发开始打飞机卡和手机</div> //这一行的背景是blue <div>路上看到家里发分</div> //这一行没有背景颜色。说明div.haha{}对这一行不起作用。 </body> </html> |
例2： //class选择器.html
| <html> <head> <title>class选择器</title> <style type="text/css"> .haha{ //这个.haha是class选择器，对所有的class="haha"的标签都有效。 background-color:blue; } </style> </head> <body> <div class="haha">可是大家发开始打飞机卡和手机</div> //这一行的背景是blue <p class="haha">路上看到家里发分</p> //这一行的背景是blue </body> </html> |
三、id选择器 每个html标签上面都有一个属性叫id
例1：
//id选择器.html
| <html> <head> <title>id选择器</title> <style type="text/css"> div#hehe{ //这个div#hehe就是id选择器 background-color:blue; } </style> </head> <body> <div id="hehe">可是大家发开始打飞机卡和手机</div> //这一行的背景是blue <div>路上看到家里发分</div> //这一行没有背景颜色。说明div#haha{}对这一行不起作用。 </body> </html> |
例2： //id选择器.html
| <html> <head> <title>id选择器</title> <style type="text/css"> #haha{ //这个#haha是id选择器，对所有的id="haha"的标签都有效。 background-color:blue; } </style> </head> <body> <div id="haha">可是大家发开始打飞机卡和手机</div> //这一行的背景是blue <p id="haha">路上看到家里发分</p> //这一行的背景是blue </body> </html> |
|