CSS选择器

发表于 分类于 阅读次数： 本文字数： 227 阅读时长 ≈ 1 分钟

基本选择器

标签元素选择器

1
2
3
4
div {
    background-color:red;
    color:white;
}

class类选择器

以.开头

1
2
3
4
5
div.test1{ // 满足class为test1，且标签为div的形式，div可省略
    background-color:red;
    color:white;
}
// <div class="test1">测试</div>

ID选择器

以#开头

1
2
3
4
5
div#test2 { // 满足id为test2，且标签为div的形式，div可省略
    background-color:red;
    color:white;
}
// <div id="test2">测试</div>

扩展选择器

属性选择器

格式元素名[属性名]{样式}
给拥有某个属性的元素标签设置特定样式

1
2
a[href][title] {color:red;}
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

关联选择器

在标签嵌套时使用，比如特定div标签中的p标签

1
2
3
4
5
div p { /* 用空格隔开 */
    background-color:red;
    color:white;
}
/* <div><p>测试</p></div> */

组合选择器

把不同标签设置相同的样式

1
2
3
4
5
div,p { /* 用,隔开 */
    background-color:red;
    color:white;
}
/* <div>测试</div><p>测试</p> */

伪元素选择器

伪类选择器