html中的各类选择器

江水三千里

已于 2023-07-10 17:34:02 修改

阅读量901

点赞数 7

文章标签： html 前端 css

于 2023-07-10 17:32:20 首次发布

本文链接：https://blog.csdn.net/qq_74825263/article/details/131642911

版权

基础选择器

标签选择器:一次性把页面所有一类的标签选择出来

<style>
  p{
       color:aqua;
    }
</style>

<body>
  <p>xxxx</p>
</body>

类选择器:选择同一类,class为全局属性

<style>
  .box{
       color:aqua;
    }
</style>

<body>
  <div class="box">xxxxx</div>
</body>

id选择器:身份证号码,每个网页里不能重复

<style>
  #box{
       color:aqua;
    }
</style>

<body>
  <div id="box">xxxx</div>
</body>

通配符选择器:选中所有标签

<style>
  *{
       color:aqua;
    }
</style>

<body>
  <p>xxxx</p>
  <div>scsa</div>
</body>

包含选择器

子代选择器:选择亲儿子

<style>
  .a>li{
       color:aqua;
    }
</style>

<body>
  <ul class="a">
      <li>1</li>
      <li>2</li>
      <ul>
            <li>3</li>
            <li>4</li>
      </ul>
 </ul>
</body>
仅显示12

后代选择器

选择全部后代

<style>
  .a>li{
       color:aqua;
    }
</style>

<body>
  <ul class="a">
      <li>1</li>
      <li>2</li>
      <ul>
            <li>3</li>
            <li>4</li>
      </ul>
 </ul>
</body>
1234均会显示

复合选择器

逗号选择器:把多个元素选择出来相叠加

<style>
  span,
  div,
  p {
       color:aqua;
    }
</style>

<body>
   <div>xxxx</div>
   <p>xxxxs</p>
   <span>xxxxss</span>
</body>

属性选择器

<style>
        input {
            background-color: pink;
        }
 
        input[type="password"] {
            background-color: aquamarine;
        }
 
        div[id] {
            width: 300px;
            height: 300px;
            background-color: blue;
        }
 
        /* type^="te"以te开头 */
        input[type^="te"] {
            background-color: red;
        }
        /* type$="l"表示以l结尾 */
        input[type$="l"] {
            background-color: green;
        }
 
        /* type*="e"    type值里边包含e */
        input[type*="e"] {
            background-color: chartreuse;
        }
    </style>
</head>
 
<body>
    <input type="text"><br />
    <input type="password"><br />
    <input type="search"><br />
    <input type="url"><br />
    <input type="number"><br />
    <div id="aquamarine">1</div>
    <div>2</div>
</body>

伪类选择器

hover	鼠标经过时
visited	鼠标访问过后
active	鼠标按下弹起

<style>
    a:hover{
       color:aqua;
           }
</style>

<body>
    <a href="#">去百度</a>
</body>

结构伪类选择器

nth-child(n)与nth-of-child(n)有不同的用法

nth-child(n) 先排序后查找目标元素

nth-of-child 先查找目标元素后排序

伪类元素选择器

<style>
/* 在所选结构前面都加上 >   */
        ul li::before {
            content: ">";
        }

        ul li::after {
            content: url();
        }

        /* input::placeholder  表单提示词 */
        input::placeholder {
            color: rgb(62, 226, 56);
        }


        /* ::selection 选中时 */
        ul li:nth-child(4)::selection {
            color: pink;
        }
    </style>