java html选择器 html的选择器

目录

选择器

id选择器

类选择器

标签选择器

后代选择器

分组选择器

通配符选择器

---

选择器

选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式。常用类型有六类：标签选择器，类选择器,id选择器，后代选择器，分组选择器和通配符选择器。

id选择器

id选择器：浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，其语法如下：

#id选择器名 {
       declaration1;
       declaration2;
       …
 }

代码示例

/*
 * id选择器：浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式
 */
#zzu{
    text-align: center;
    font-family: "楷体";
}

类选择器

类选择器：浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，其语法如下：

类选择器名 {
       declaration1;
       declaration2;
       …
 }

代码示例

/*
 * class选择器：浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式
 */
.u{
    color: red;
}

标签选择器

标签选择器：浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，其语法如下：

标签选择器名 {
       declaration1;
       declaration2;
       …
 }

代码示例：

/*
 * 标签选择器：以标签名为选择器
 */
b{
    font-size: 72px;
}

后代选择器

后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，语法如下：

父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器（选择器之间用空格间隔） {
       declaration1;
       declaration2;
       …
 }

代码示例：

/*
 * 后代择器：以标签名为选择器
 */
html body #zzu{
	background: red;
}

分组选择器

分组选择器：如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码， 该选择器的选择器名由多个选择器组成，使用逗号分隔，其语法如下：

选择器1,选择器2,选择器3…{
       declaration1;
       declaration2;
        …
 }

代码示例：

/*
 * 分组选择器：以标签名为选择器
 */
#c,.u{
    color: red;
}

通配符选择器

通配符选择器：通配符选择器匹配HTML文档中的任何HTML元素，其语法如下：

*{
       declaration1;
       declaration2;
        …
 }

代码示例：

/*
 * 通配符选择器：以标签名为选择器
 */
*{
    margin: 0px;
    padding: 0px;
}