第二讲：css基本选择器

标签选择器

255个标签，等于1个类名。标签选择器选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

【案例】

CSS

body{

background-color:#efefef;

}

h3{

font-size: 22px;

color: red;

}

p{

background-color: skyblue;

text-align: center;

font-weight: bold;

text-decoration: underline;

color: blue;

}

HTML

<h3>标题标签

段落标签

段落标签

【浏览器显示效果】

id选择器

“#”就是id选择器的选择符。

任何标签都可以有id，id是以字母开头，可以有数字、下划线等命名的。严格区分大小写，且同一个页面内id不能重复。

【案例】

CSS

#htile{

font-size: 22px;

color: red;

}

#liP{

background-color: skyblue;

text-align: center;

font-weight: bold;

text-decoration: underline;

color: blue;

}

HTML

<h3>标题标签

段落标签

段落标签

【浏览器显示效果】

类选择器

“.”就是类的符号。

任何标签都可以有class属性，class属性可以重复，同一个标签同时属于多个类时，用空格隔开。如：

.public{

text-align: center;

}

以上代码设置了类名为public的样式。

尽可能使用class，除非极特殊的情况可以用id。因为javascript要通过id属性得到标签，所以我们css层面尽量不用id。

后代选择器

后代选择器，描述的是祖先结构。当要把某一个部分的所有的什么进行样式改变时就要想到后代选择器。如：

.div1 .li2 p{

color: red;

}

以上代码表示网页中类名为div1盒子里面包含类名为li2的盒子，且li2盒子下面的p段落标签文字颜色为红色。

交集选择器

交集选择器没有空格，一般都是以标签名开头。如：

h3.red{

color: red;

}

以上代码表示网页中所有包含class类名为red的h3标签文字颜色为红色。

交集选择器也可以以类名开头，ie7开始兼容，如：.red.bg{…}

交集选择器可以连续交，ie6不兼容ie7兼容，一般很少这么写，如：h3.special.news{…}。

并集选择器

并集选择器也叫分组选择器，用逗号表示。如：

h3,li{

color: red;

}

以上代码表示网页中所有的h3标签和li标签的文字颜色为红色。

通配符*

*表示所有元素。

使用通配符效率不高，因为页面上的标签越多，效率越低，所以页面上最好不要出现这个选择器。如：

*{

color: red;

}

以上代码表示所有标签的文字颜色为红色。

打赏规则

为了避免对于打赏模式产生误解，说明一下几点内容：

1.打赏纯粹自愿，金额不限；

2.打赏不能作为解答前端技术疑问的理由；

3.打赏不能作为催促更新文章的理由；

4.打赏不能帮你做毕业设计或论文；

5.打赏不能帮你做工作中的项目；

6.总之：打赏就是这不能那不能，只是单纯打赏而已。

声明

* 公众号（QD前端基地）内转载文章全部用于学习交流，如有涉及版权问题请与我联系，我会删除相关文章。给您带来不便敬请谅解，谢谢！

* 公众号（QD前端基地）内原创文章如内容不符合事实或涉及其他方面的问题，请及时通知本人进行修改或删除。版权作品未经授权严禁盗图转载，如有雷同纯属巧合。

* 转载公众号（QD前端基地）内的文章，请先与本文作者联系经过同意后方可转载，并注明相关出处和作者信息且留下原文链接地址，这是对文章作者的尊重，也是对知识的尊重。欢迎同行网站转载本站文章。

【投诉请联系微信】：xinxiha888

前端基地

「前端基地」最专业的Web前端开发在线学习公众号，提供Web前端开发教程，是分享Web前端开发技术和前端资源的在线学习交流公众号。

关注一下，也许你就成为牛逼的前端高手呢～

微信公众号：qdbase