黑马H5C3笔记——CSS基础选择器

目录

1、标签选择器

2、类选择器

3、id选择器

4、通配符选择器


1、标签选择器

特点:可以选择所有相同的标签,不能差异化选择。

<head>
    <style>
    /* 标签选择器 : 写上标签名 */
    标签名 {
        属性1: 属性值1;
        属性2: 属性值2;
        ···
    }

    /* 例子 */
    div {
        color: pink;
    }
    </style>
</head>


<body>
    <div>标签选择器</div>
</body>


2、类选择器

特点:可以根据需求选择一个或多个标签。

<head>
    <style>
        /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
        
      .类名 {
          属性1: 属性值1;
          属性2:属性值2;
          ···
      }

      /* 例子 */
      .red {
          color: red;
      }
    </style>
</head>

<body>
    <ul>
        <li class="red">类选择器</li>
    </ul>
</body>

3、id选择器

特点:元素的id值是唯一的,只能对应于文档中某一个具体的元素。

<head>
    <style>
        /* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */

      #id名 {
          属性1:属性值1;
          属性2:属性值2; 
          ···
      }

       /* 例子 */
      #pink {
          color: pink;
      }
    </style>
</head>

<body>
    <div id="pink">id选择器</div>
</body>

4、通配符选择器

特点:通配符选择器用*号表示,* 就是选择所有的标签。它是所有选择器中作用范围最广的,能匹配页面中所有的元素。

<head>
     <style>
     * {
            属性1:属性值1;
            属性2:属性值2;
            ···
     }

     /* 例子 */
     * {
         color: red;
     }
     /* * 这里把  div  span 标签都改为了红色 */
    
    * {
          margin: 0;                    /* 定义外边距*/
          padding: 0;                   /* 定义内边距*/
    }
    </style>
</head>

<body>
    <div>通配符选择器</div>
    <span>通配符选择器</span>
</body>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值