CSS选择器

基本选择器

标签元素选择器

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> */

伪元素选择器

伪类选择器

点击进入云乞讨模式!
  • 本文作者: Ahaochan
  • 本文链接: css_selector
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
0%