当前位置：首页 > news >正文

CSS选择器

news 2025/4/28 14:26:19

CSS 选择器

基本选择器

通配符选择器

<style type="text/css">*{margin:0;padding:0}
</style>

id选择器

id选择器，是标签中属性id的属性值，要求id值唯一

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#idName{margin:0;padding:0}</style></head><body><div id="idName"></div></body>
</html>

类选择器

<!DOCTYPE html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.className{margin:0;padding:0}</style></head><body><div class="className"></div></body>
</html>

元素选择器

<!DOCTYPE html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{margin:0;padding:0}</style></head><body><div ></div></body>
</html>

后代选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.className div{color: red;}</style></head><body><div class="className"><div>222</div></div></body>
</html>

基本选择器扩展

子元素选择器

也可称为直接后代选择器，此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.className > .second{color: red;}</style></head><body><div class="className"><div class="second"><div>111</div></div></div></body>
</html>

相邻兄弟选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.className,.second{color: red;}</style></head><body><div class="className"><div>222</div></div><div class="second"><div>111</div></div></body>
</html>

通用兄弟选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.className,.second{color: red;}</style></head><body><div class="className"><div>222</div></div><div class="second"><div>111</div></div></body>
</html>

选择器分组

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.className,.second{color: red;}</style></head><body><div class="className"><div>222</div></div><div class="second"><div>111</div></div></body>
</html>