关键词：css, 选择器, class
标签选择器（元素选择器）
定义
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<style>
h2 {color: red; font-size: 60px;}
</style>
使用
<h2>这里是一个副标题</h2>
类选择器
命名规则：
- 长名称或词组可以使用“-”短横线进行连接，不建议使用“_”下划线。
- 不能使用纯数字命名，选择器会无效。
- 可以使用中文命名，但不建议使用。
定义
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<style type="text/css">
.test {
color: rgb(170, 51, 51);
text-align: center;
}
/* 类选择器名称，不能数字开头 */
.2233 {
color:red;
}
.什么 {
color: green;
}
.font20 {
font-size: 40px;
}
.blueColor {
color: blue;
}
</style>
使用
<p class="test">这是一段使用了css的文字</p>
<p class="2233">这个选择器用了纯数字命名，这是无效的</p>
<p class="什么">这个选择器用了中文命名，虽然可以，但是不提倡使用</p>
<p class="font20 blueColor">这里使用了多个类选择器</p>
id选择器
id选择器与类选择器的区别：
- 一个类选择器可以给多个元素共用，一个元素也可以同时使用多个类选择器。
- 一个id选择器只能给一个元素使用，一个元素也只能使用一个id选择器。
定义
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<style type="text/css">
#para {
color: red;
text-align: center;
}
#ppp {
color: blue;
text-align: right;
}
</style>
使用
<p id="para">这里只是一段使用了css的文字</p>
<p id="ppp">这是一段使用了另一个css的文字</p>
<p id="para ppp">像使用类选择器一样，同时使用多个id选择器是无效的</p>
<p id="para">使用一个已经被使用过的id选择器，虽然能达到效果，但是这是不被W3C标准允许的</p>
通配符选择器
通配符选择器会使所有元素生效，一般不使用。
定义
<style>
* {
color: red;
font-size: 50px;
}
</style>
使用
<h2>这是一个标题</h2>
<p>这是一段文本</p>
<div>这里是一个div</div>
伪类选择器
用于给某些选择器添加特殊的效果。
定义
<style>
/* 未访问的链接 */
a:link {
color: gray;
}
/* 已访问的链接 */
a:visited {
color: green;
}
/* 鼠标移动到链接上 */
a:hover {
color: red;
}
/* 选定的链接 */
a:active {
color: yellow;
}
/* 这四个的顺序不能变动 */
/* 不需要的伪类可以省略不写 */
/* 最常用的是hover */
</style>
使用
<a href="https://www.baidu.com">这是一个链接</a>
结构伪类选择器
定义
<style>
/* 第一个元素 */
li:first-child {
color: blue;
}
/* 最后一个元素 */
li:last-child {
color: red;
}
/* 第n个元素，从1开始计数 */
li:nth-child(2) {
color: green;
}
/* 倒数第n个元素，从1开始计数 */
li:nth-last-child(2) {
color: orange;
}
/* 奇数编号的元素 */
li:nth-child(odd) {
color: red;
}
/* 偶数编号的元素 */
li:nth-child(even) {
color: blue;
}
/* 这个参数可以传一个公式，其中n为0,1,2,3,4,5.... */
li:nth-child(2n+1) {
color: green;
}
</style>
使用
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第五行</li>
</ul>
目标伪类选择器
修改当前活动的目标元素的属性。
定义
<style>
/* 目标“章节 4”会变成红色 */
:target {
color: red;
}
</style>
使用
<a href="#C4">跳转到指定位置</a>
<br>
<h2>章节 2</h2>
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
<h2 id="C4">章节 4</a></h2>
<p>这边显示该章节的内容……</p>
<h2>章节 5</h2>
<p>这边显示该章节的内容……</p>
PREVIOUSCSS背景图
NEXTCSS链接伪类选择器