四、CSS中选择器的学习

选择器

  1. 标签名选择器：选取页面中所有同名标签
    • 格式: 标签名
  2. id选择器：当需要选择页面中某一个元素时使用
    • 格式: #id
  3. 类选择器：当需要选择多个不相关的元素时,给多个元素添加相同的class属性,然后通过类选择器进行选择
    • 格式： .class
  4. 分组选择器：分组选择器可以将多个选择器合并为一个
    • 格式：h4,#id,.class
  5. 属性选择器：通过元素的属性选择元素
    • 格式：标签名[属性名="属性值"]
  6. 任意元素选择器：选择页面所有标签【叫法：页面标签==页面元素】
    • 格式：*
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*标签选择器*/
    h1{

    }
    /*id选择器---只能选择一个*/
    #p1{
        color: red;
    }
    /*类选择器---选择多个不想干的*/
    .c1{
      color: yellow;
    }
    /*分组选择器*/
    h4,#p1,.c1{
        background: aqua;
    }
    /*属性选择器*/
    input[type="text"]{
      color:red;
    }
    /*任意元素选择器*/
    *{
      border: 1px solid red;/*边框：粗细 样式[solid实线边框] 颜色*/
    }
  </style>
</head>
<body>
<input type="text">
<input type="password">
<p id="p1" >苹果</p>
<p class="c1">香蕉</p>
<p>橘子</p>
<h3 class="c1">洗衣机</h3>
<h3>电视机</h3>
<h4>张三</h4>
</body>
posted @   效马生  阅读(38)  评论(0)  编辑  收藏  举报
相关博文：
· 三、CSS学习[非重点]
· 二、标签的学习[非重点]
· CSS中的选择器
· （二）CSS选择器
· No.14 CSS--选择器
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
点击右上角即可分享
微信分享提示
AI IDE Trae