一、后代选择器
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>后代选择器</title><style>ul li {color:pink;}ul li a{color:red;}.nav li{color:green;}.nav li a{color:yellow;}</style></head><body><ul><li>zzf1</li><li>zzf2</li><li>zzf3</li><li><a href=\"#\">zzf4</a></li></ul><ul class=\"nav\"><li>aaa1</li><li>aaa2</li><li>aaa3</li><li><a href=\"#\">aaa4</a></li></ul></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>.nav>a{color:pink;}</style></head><body><div class=\"nav\"><a href=\"#\">我是亲儿子</a><p><a href=\"#\">我是干儿子</a></p></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>div,p,.pig li {color:pink;}</style></head><body><div>zzfzzf</div><p>熊大</p><p>熊二</p><ul class=\"pig\"><li>小猪佩奇</li><li>乔治</li></ul></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>a:link{//未访问时的颜色color:red;}a:visited{//访问过后的颜色color:pink;}a:hover{//鼠标经过的颜色color:green;}a:active{//鼠标按住的颜色color:yellow;}</style></head><body><a href=\"#\">xinlang</a></body></html>
五、focus伪类选择器
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>focus伪类选择器</title><style>input:focus {background-color:red;}</style></head><body><input type=\"text\"><input type=\"text\"><input type=\"text\"></body></html>
爱站程序员基地
