【JavaEE进阶】CSS选择器的常见用法

CSS选择器的主要功能就是选中页面指定的标签元素，选中了元素，才可以设置元素的属性。

CSS选择器主要有以下几种:

1. 标签选择器
2. 类选择器
3. id选择器
4. 复合选择器
5. 通配符选择器

接下来用代码来学习这几个选择器的使用。

    
    
    Document


    我是⼀个div, class为font32
    我是⼀个div, class为font32
    我是⼀个div
    我是一个span
    

• aaa
• bbb
• ccc

1. 1111
2. 2222
3. 3333

初始的页面为：

其中超链接的颜色默认为图中颜色。

一、标签选择器 

示例：

span {
       color: red;
}

这里就是选择所有的span标签，设置颜色为红色。

这时的页面显示为：

可见，span标签元素的颜色变为了红色。

二、类选择器

示例：

.font32 {
            color: red;
        }

 选择class为font32的元素, 设置颜色为红色。

这是页面显示为：

三、id选择器

id 是唯⼀的, 不能被多个标签使用(是和 类选择器 最大的区别) 

示例：

/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
 color: red;
}

这是页面显示为：

四、复合选择器

示例：

/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为紫⾊*/
ul li a {
            color: purple;
        }

1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选择器的组合, 也可以是任意数量选择器的组合
2. 不⼀定是相邻的标签, 也可以是"孙子"标签
3. 如果需要选择多种标签, 可以使用逗号分割, 如 p, div { } 表示同时选中p标签和div标签.逗号前后可以是以上任意选择器, 也可以是选择器的组合.

这是页面显示为：

五、通配符选择器

示例：

/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
 color: red;
}

这是页面如下图所示：