选择器

BBigSun 评论36阅读模式

标签选择器

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

如: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>

纸上得来终觉浅,绝知此事要躬行。

weinxin
17688689121
我的微信
微信扫一扫
BBigSun
  • 本文由 BBigSun 发表于 2024年 5月 19日 18:08:49
  • 转载请务必保留本文链接:https://www.bbigsun.com/883.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定