四、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 @ 2022-04-22 17:37  效马生  阅读(42)  评论(0)    收藏  举报