选择器

标签选择器

使用标签名作为选择器 选中同名标签设置相同的样式。

如：p、div、span、a、ul、li文章源自十年又十年-https://www.bbigsun.com/883.html

<style>
    /* 表单控件样式 */
    label {
        display: inline-block;
        width: 80px;

    }
</style>

<label>设置宽度为80px</label>

类选择器

查找标签，差异化设置标签的显示效果文章源自十年又十年-https://www.bbigsun.com/883.html

步骤：文章源自十年又十年-https://www.bbigsun.com/883.html

• 定义类名
• 使用类选择器

注意：文章源自十年又十年-https://www.bbigsun.com/883.html

• 类名自定义，不要使用纯数字和中文，使用英文
• 一个类选择器可以供多个标签使用
• 一个标签可以使用多个类名，中间用空格隔开

开发习惯：类名见名知意，多个单词可以用 - 连接，例如：news-hd文章源自十年又十年-https://www.bbigsun.com/883.html

<style>
    /* 表单控件样式 */
    .label-class {
        display: inline-block;
        width: 80px;
    }
    .red {
        color: red;
    }
</style>

<label class="label-class red">设置宽度为80px</label>

id 选择器

查找标签，差异化设置标签的显示效果文章源自十年又十年-https://www.bbigsun.com/883.html

场景：id 选择器一般配合 JS 使用，很少设置 CSS 样式文章源自十年又十年-https://www.bbigsun.com/883.html

步骤：文章源自十年又十年-https://www.bbigsun.com/883.html

• 定义ID选择器 -- #id名
• 使用 id 选择器 -- id="id名"

<style>
    /* 表单控件样式 */
    #label-class {
        display: inline-block;
        width: 80px;
        color: red;
    }
</style>

<label id="label-class">设置宽度为80px</label>

使用规则：同一个 id 选择器在一个页面只能使用一次文章源自十年又十年-https://www.bbigsun.com/883.html

通配符选择器 *

查找页面所有的标签，设置相同的格式文章源自十年又十年-https://www.bbigsun.com/883.html

通配符选择器：* 不需要调用，浏览器自动查找页面所有标签，设置相同的格式

<style>
    * {
        color: red;
    }
</style>