搜索到
47
篇与
的结果
-
8、关系选择器 <!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.子元素选择器 语法格式 父元素A > 子元素B{ —— } 作用：选中指定父元素所有的子元素B 2.后代元素选择器 语法格式 祖先元素A 后代元素B{ —— } 作用：选中指定祖先元素A中所有的后代元素B 3.兄弟元素选择器 1）相邻兄弟选择器 语法格式 兄弟A+兄弟B{ —— } 作用：选中兄弟A相邻的一个兄弟B标签 2）通用兄弟选择器 语法格式 兄弟A~兄弟B{ —— } 作用：选中兄弟A后面所有的兄弟B元素 */ ul>li{ color: red; font-size: 20px; } div span{ color: blue; } ul+span{ background-color: #7edcc7; } ul~span{ background-color: #fde6e0; } </style> </head> <body> <!-- 标签之间的关系：标签之间创建另一对标签，外面的标签为父标签，里面的标签为子标签 标签的一层层父级标签，统称为祖先标签 标签的一层层子级标签，统称为后代标签 同一个层级的标签之间，统称为兄弟标签 --> <div> <ul> <li>项目1</li> <li>项目2</li> <li>项目3 <span>我是span</span> </li> </ul> <div></div> <span>我是span</span> <span>我是小span</span> </div> <ol> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ol> </body> </html> -
7、交集选择器 <!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{ —— } 2.注意： 选择器之间不能有任何的符号，必须紧密的连接在一起。 若交集选择器中有标签选择器，标签选择器必须在首位 */ .d1{ color: red; } p.d1{ font-size: 50px; } </style> </head> <body> <div class="d1">我是div</div> <div class="d1">我是div</div> <p class="d1">我是p</p> </body> </html>
-
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>
