一、标签选择器
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>标签选择器</title><style>p {color:green;}div {color:pink;}</style></head><body><p>男生</p><p>男生</p><p>男生</p><div>女生</div><div>女生</div><div>女生</div></body></html>
二、类选择器
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>类选择器</title><style>.red {color:red;}</style></head><body><p class=\"red\">zzf</p><p>zzf1</p><p>zzf2</p><div class=\"red\">女生</div><div>女生1</div><div>女生2</div></body></html>
//多类名选择器 便于修改样式，防止代码冗余
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>多类名选择器</title><style>.red {background-color: pink;}.font {width: 100px;height: 100px;}</style></head><body><div class=\"red font\">女生</div></body></html>
三、id选择器
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>id选择器</title><style>#green{color:green;}</style></head><body><div id=\"green\">女生</div></body></html>
四、通配符选择器
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>通配符选择器</title><style>*{color: blue;}</style></head><body><div>女生</div><p>zzf</p><span>zzf2</span></body></html>
爱站程序员基地
