id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--id选择器--> <style> #i{ background-color: bisque ; height: 48px; } </style> </head> <body> <div id="i">属性</div> <div></div> <div></div> </body> </html>
div 标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: aqua; height: 48px; } </style> </head> <body> <div class="c1">头</div> <span class="c1">行内标签 自己有多少占多少 <div class="c1"> ff</div> </span> <div class="c1">尾</div> </body> </html>
类选择器-最常用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .c1{ background-color: aqua; height: 48px; } </style> <body> <div class="c1">头</div> <span class="c1">行内标签 自己有多少占多少</span> <div class="c1">尾</div> </body> </html>
组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--组合选择器用逗号--> <style> .i, .j, .k{ background-color: aqua; height: 48px; } #a,#b,#c{ background-color:indianred; height: 48px; } </style> </head> <body> <div class="i">明天你好</div> <div class="j">的师傅</div> <div class="k">腹股沟方法</div> <br/> <br/> <div id="a">明天你好</div> <div id="b">的师傅</div> <div id="c">腹股沟方法</div> </body> </html>
属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input[type='text']{ background-color: aqua; height: 48px;} input[n='pwd']{ background-color:red; height: 2px;} </style> </head> <body> <div> <input type="text"/> <input n="pwd"/> </div> </body> </html>