ホームページ > 記事 > ウェブフロントエンド > CSSでのセレクタの使い方のまとめ
タグ、 ワイルドカード セレクター
<!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>
クラス セレクター
<!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>
複合セレクター: 交差セレクター
セレクター + セレクター (間にスペースなし)
<!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>
子孫選択または そして子孫セレクター:実は包含関係なんです
子孫セレクター: 世代を超えて継承可能セレクター+スペース+セレクター
子孫セレクター: 最初の子孫のみ検索可能Selector+> ;+Selector
rrreerrree以上がCSSでのセレクタの使い方のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。