Tag, Wildcard selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标签选择器</title> <style type="text/css"> <!-- body:标签选择器 *:通配符选择器 .:类选择器 ,:并集选择器 CSS属性: Text-align Center,left,right 文字居中格式 Font-size 18px 设置文字大小 Font-family 微软雅黑,宋体 设置字体 Font-weight Normal默认,bold粗体,100px 设置字体加粗 Font-style Normal默认,italic斜体 设置字体风格 Color 颜色 设置文字颜色 --> body{ background:url("xia.jpg"); } p{ font-size:50px; color:green; background-color:blue; width:300px; height:200px; } *{ font-size: 100px; color: red; } </style> </head> <body> <h1>111</h1> <p>14期威武</p> </body> </html>
Class selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .G{ font-size: 200px; color:red; } .o1{ font-size: 200px; color: blue; } .o2{ font-size: 200px; color: yellow; } .g1{ font-size: 200px; color: green; } .l{ font-size: 200px; color: pink; } .e{ font-size: 200px; color: black; } </style> </head> <body> <span class="G">G</span> <span class="o1">o</span> <span class="o2">o</span> <span class="g1">g</span> <span class="l">l</span> <span class="e">e</span> </body> </html>
Compound selector: Intersection selector
selector + selector (no space in between)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ font-size:50px; } p.box{ color:red; } p#miss{ width: 400px; height: 300px; background-color:yellow; } </style> </head> <body> <!--其实无非是浏览器寻找标签顺序,第一个找到p.box即可;第二个找到 .box类即可 --> <p class="box">14期威武</p> <p class="box">14期霸气</p> <p id="miss">14期万岁</p> </body> </html>
Descendant selector and descendant selector: actually contain Relationship
Descendant selector: can be inherited across generations Selector + space + selector
Descendant selector: Can only find the first descendant Selector+>+Selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box span{ color:red; } </style> </head> <body> <!-- 下面p标签会找到.box类,由于span是后代选择器选择对象,即使隔代也可继承,所以p标签 下面的span标签也可继承 --> <p class="box"> <p><span class="miss">14期威武</span> <span>14期好人</span> </p> </p> <p class="box"><span>14霸气</span></p> </body> </html>
The above is the detailed content of Summary of the use of selectors in css. For more information, please follow other related articles on the PHP Chinese website!