首页 > 其他分享 >css_1_选择器_基本选择器

css_1_选择器_基本选择器

时间:2024-06-16 11:57:25浏览次数:35  
标签:基本 标签 元素 选择器 id class css 属性

基本选择器包括:通配选择器,元素选择器,类选择器,id选择器

一. 通配选择器

  • 作用:定位页面中的所有元素,并为其设定样式(实际上用的很少)
  • 结构:

*{属性名:属性值}

  • 举例:
    <style>
        * {
            color: blueviolet;
            font-size: 60px;
        }
    </style>

二.元素选择器

  • 作用:根据标签名,定位页面中的某一类元素,统一设置样式。
  • 结构:

标签名{
属性名:属性值;
}

  • 举例:
    <style>
        /* 选中所有h1元素 */
        h1 {
            color: aqua;
            font-size: 40px;
        }
    </style>
  • 注意:是统一设置,无法差异化。

三.类选择器

  • 作用:根据元素的类名(class值),来为这些元素设置样式。
  • 结构:

.类名{ 属性名:属性值;}

  • 举例:
    <style>
    /* 选中所有class值为sentence的元素 */
        .sentence {
            color: blue;
            font-size: 50px;
        }
    </style>
    <p class="sentence">
        这是在说类选择器
    </p>
  • 注意:

1.类选择器前要加一个 .
2.类名(class值)
不可以用:纯数字、中文
尽量用英文与数字的组合,命名要有意义。
如果有多个单词,用 - 做连接,举例:right-menu
3.一个元素不能写多个class属性,否则后写的会失效。
4.一个元素的class属性,可以有多个值,中间用空格隔开。
在这里插入图片描述

四.ID选择器

  • 作用:根据ID名,选中某一个元素,设置样式。
  • 结构:

#id名{属性名:属性值;}

  • 举例:
    <style>
        #option {
            color: brown;
            font-size: 40px;
        }
    </style>
    <h1 id="option">
        这是在说id选择器
    </h1>
  • 注意:
    1.id值的命名:
    字母、数字、下划线、短杠组成
    尽量使用字母开头,区分大小写
    不包含空格,不要用标签名。
    2.id值是唯一的,多个元素的id值不能相同。
    3.一个元素可以同时拥有id值和class值。

五.总结

  1. 通配选择器
    选择所有标签
  2. 元素选择器
    选择同种标签,但不能差异化
  3. 类选择器
    选择所有指定class值的标签,可以差异化(常用)
  4. ID选择器
    选择一个指定的id值的标签,id值是唯一的。

标签:基本,标签,元素,选择器,id,class,css,属性
From: https://blog.csdn.net/2301_81364463/article/details/139582635

相关文章