class
属性或id
属性,去找对应的有血缘关系的某个选择器,具体的大家往下看哦。选择器 | 描述 | 举例 |
---|---|---|
选择器1 选择器2{属性:值;} | 多元素选择器。同时匹配选择器1和选择器2,多个选择器之间用逗号隔开即可。 | h1,h2,h3{color: red;} |
e f {属性:值;} | 后代元素选择器,匹配所有属于e元素后代的f元素,e和f之间用空格隔开即可。 | .box h1{color: red;} |
e>f{属性:值;} | 子元素选择器,匹配所有e元素的子元素为f | div >h1{color:red;} |
e+f{属性:值;} | 相邻元素选择器,匹配所有紧跟随着e元素之后的同级元素f | div+div{color:red;} |
css
样式。html
页面中的div
标签、h1
标签、p
标签、中的文本颜色设置为红色。代码块
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>多元素选择器</title> </head> <style> div,h1,p{ color: red; } </style> <body> <div>成功不是打败别人,而是改变自己。</div> <h1>成功不是打败别人,而是改变自己。</h1> <p>成功不是打败别人,而是改变自己。</p> </body> </html>
结果图
注意:作用给列表中的所有的选择器设置样式,
class
类选择器或id
选择器也是一样,在这里就拿class
类选择器属性值为.box
为例,其余的大家可以自己尝试。
代码块
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>多元素选择器</title> </head> <style> .box,h1,p{ color: red; } </style> <body> <div class="box" >成功不是打败别人,而是改变自己。</div> <h1>成功不是打败别人,而是改变自己。</h1> <p>成功不是打败别人,而是改变自己。</p> </body> </html>
结果图
class
属性值为.box
的后代元素文本颜色设置为红色,给大家介绍下结构:class
属性值为.box
中一共有三个子元素,第一个h1
标签、第二个h1
标签、第三个div
标签、但是第三个子元素为div
标签里面还有一个子元素为h1
标签或者我们可以理解为class
属性值为.box
的孙子辈元素。代码块
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>后代元素选择器</title> </head> <style> .box h1{ color: red; } </style> <body> <div class="box" > <h1>成功不是打败别人,而是改变自己。</h1> <h1>微笑是最初的信仰</h1> <div> <h1>成功不是打败别人,而是改变自己。</h1> </div> </div> </body> </html>
结果图
注意:后代选择器只能包含在
class
属性值为.box
里面的所有属性。
让我们进入子元素选择器实践,实践内容如:将class
属性值为.box
的子元素文本颜色设置为红色,给大家介绍下结构:class
属性值为.box
中一共有三个子元素,第一个h1
标签、第二个h1
标签、div
标签、但是第三个子元素为div
标签里面还有一个子元素为h1
标签或者我们可以理解为class
属性值为.box
的孙子辈元素。
代码块
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>子元素选择器</title> </head> <style> .box > h1{ color: red; } </style> <body> <div class="box" > <h1>成功不是打败别人,而是改变自己。</h1> <h1>微笑是最初的信仰</h1> <div> <h1>成功不是打败别人,而是改变自己。</h1> </div> </div> </body> </html>
结果图
注意:子元素选择器和后代元素选择器是不样的,子元素选择器是将
class
属性值为.box
中的子元素设置css
样式,后代元素选择器是将class
属性值为.box
中的所有元素设置css
样式,现在大家应该明白了,为什么div
标签中的h1
标签文本颜色没有被渲染的原因了吧,因为div
标签中的h1
标签是孙子辈。
e
元素与f
元素必须是兄弟关系,意思就是平辈关系。e
元素与f
元素必须要紧挨着,就是之间不能有任何元素阻挡。f
元素一定是在e
元素的下面。html
页面中的class
属性值为.box
的相邻元素文本颜色设置为红色。代码块
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>相邻元素选择器</title> </head> <style> .box + h1{ color: red; } </style> <body> <h1>我在上面学习</h1> <div class="box" > <h1>成功不是打败别人,而是改变自己。</h1> </div> <h1>我在下面学习</h1> </body> </html>
结果图
注意:大家一定要注意以上的
2
个必须和1
个一定的规则,否则css
样式不会被渲染。
如对本文有疑问, 点击进行留言回复!!
HCIE第四天总结(典型组网之一:CSS+Eth-Trunk+iStack)
了解下Apache Elasticsearch 和 Kibana
网友评论