搜索到
207
篇与
的结果
-
9、属性选择器 <!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> /* 一、属性选择器：为带有属性的元素指定样式 语法格式一：标签必须包含某属性 标签名[属性名] */ input[value]{ background-color: #c7edc7; } /* 语法格式二:标签属性必须等于某个值 */ input[value="哈哈"]{ background-color: #fde6e0; } /*css对属性选择器的扩展*/ /* 语法格式三：标签属性以某个值开头 标签名[属性名^=属性值] */ div[class^="div"]{ background-color: #dce2f1; } /* 语法格式四：标签属性以某个值结尾 标签名[属性名$=属性值] */ div[class$="hello"]{ color: red; } /* 语法格式五：标签属性必须包含某个值 标签名[属性名*=属性值] */ div[class*="d"]{ font-size: 30px; color:blue; } </style> </head> <body> <input type="text"value="呵呵"> <input type="text"value="哈哈"> <div class="div1">我是div</div> <div class="div2">我是div</div> <div class="div3">我是div</div> <div class="d1-hello">我是hello1</div> <div class="d2-hello">我是hello2</div> <div class="d3-hello">我是hello3</div> </body> </html> -
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>
