搜索到
146
篇与
的结果
-
6、并集选择器（选择器分组） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器分组</title> <style> /* 一、选择器分组（并级选择器）：同时选中多个选择器对应的元素。当为不同选择器选中的元素设置相同的样式时 1.语法格式： 选择器1，选择器2，——，选择器n{ —— } */ /* h1{ color: red; font-size: 30px; } .div{ color: red; font-size: 30px; } #baby{ color: red; font-size: 30px; }*/ h1,.div1,#baby,p{ color:red; font: size 30px; } </style> </head> <body> <h1>我是标题</h1> <div class="div1">我是div</div> <p id="baby">你就是我的唯一</p> <p>我是1p</p> <p>我是2p</p> <p>我是3p</p> </body> </html> -
5、通配符选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通配符选择器</title> <style> /* 一、通配符选择器：用于选中页面中所有元素 1.语法格式: *{ } */ *{ color:red; } </style> </head> <body> <div>我是div</div> <span>我是span</span> <p>我是1个p</p> </body> </html>
-
4、id选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>id选择器</title> <style> /* 一、id选择器 通过HTML标签的id属性选中唯一一个标签。 1.语法格式 #id名{ 属性1：属性值1； } 2.使用步骤 为HTML标签设置id属性 利用id选择器选中指定标签 3.注意： id选择器以#开头 标签的id属性值不能重复 */ #baby{ color: red; font-size: 30px; } </style> </head> <body> <div id="baby">baby，你就是我的唯一</div> </body> </html>
-
3、类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>累选择器</title> <style> /* 一、选择器：可以选择一个或多个标签，为其添加样式 1.语法格式： .类名{ 属性1：属性值1； } 2.使用步骤： 为标签设置一个class属性 利用类选择器中选择一个/多个标签 3.注意： 类选择器以英文的，开头 可以为多个标签指定相同的类名 类名尽量不要使用数字开头，不要使用中文，若类名过长并且由多个单词组成，可以使用"-"提高可读性 如：xxx-yyy 标签的class属性名可以同时指定多个，每个类名之间以空格隔开即可 */ .div1{ color: red; } .p1{ font-size: 30px; } </style> </head> <body> <div class="div1">我是div</div> <p class="div1 p1 p2 p3">我是1个p</p> <p>我是2个p</p> <p class="p1">我是3个p</p> <p>我是4个p</p> <p>我是5个p</p> </body> </html>
-
2、标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标签选择器</title> <style> /* 一、标签选择器（元素选择器）： 根据标签名选中指定的元素，使用HTML标签名为选择器，为页面中的一类标签指定样式 二、语法格式： 标签名{ 属性1：属性值1； 属性2：属性值2； } */ div{ color: red; } p{ color: yellowgreen; } </style> </head> <body> <div>我是div</div> <p>我是1个p</p> <p>我是2个p</p> <p>我是3个p</p> <p>我是4个p</p> <p>我是5个p</p> </body> </html>
