选择器（CSS）

最新推荐文章于 2023-08-04 11:11:48 发布

清和已久

最新推荐文章于 2023-08-04 11:11:48 发布

阅读量165

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_74438979/article/details/131649203

版权

选择器的定义
CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。
选择器的分类
基础选择器
1、标签选择器(一次性把网页所有一类的标签选出来 )

该选择器是根据一个元素上的某个标签的属性的存在以选择元素的不同方式；或者根据一个有特定值的标签属性是否存在来选择。

结构：标签名{属性；属性；属性}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     p{
         color: aqua;
     }
    </style>
</head>
<body>
<p>使得</p>    
</body>
</html>

2、id选择器(id——相当于身份证号，每个网页不能重复)

该选择器开头为#而非句点，不过基本上和类选择器是同种用法。可是在一篇文档中，一个 ID 只会用到一次。它能选中设定了id的元素，可以在 ID 前面加上类型选择器，只指向元素和 ID 都匹配的类。

结构：#id名{属性名：属性值；属性名：属性值；}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box1{
        color:blue;
    }
    </style>
</head>
<body>
    <div id="box1">yesyes</div>
    
</body>
</html>

3、类选择器(选择同一类的，class为全局属性)

该选择器以一个句点（.）开头，会选择文档中应用了这个类的所有物件。

结构： .类名{属性名：属性值；属性名：属性值；}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box2{
        color:black; 
    }
    </style>
</head>
<body>
  <div class="box2">nonon</div>  
</body>
</html>

4、通配符选择器

该选择器有名全局选择器，是由一个星号（*）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容，比如，它紧随在其他元素以及邻代运算符之后的时候）。

结构：*{属性名：属性值；属性名：属性值；}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        color:blueviolet; 
    }
    </style>
</head>
<body>
  <div>nonon</div>
  <div>mmmmm</div>
  <div>okkkk</div>  
</body>
</html>

包含选择器
1、子代选择器

子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。

结构：.父代>子代{属性名：属性值；属性名：属性值}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     .a>li{
        color:brown;
    }
    </style>
</head>
<body>
 <ul class="a">
     <li>1</li>
     <li>1</li>
     <li>1</li>
     <ul>
            <li>2</li>
            <li>3</li>
            <li>1</li>
     </ul>
 </ul>   
</body>
</html>

2、后代选择器

后代选择器——典型用单个空格（" "）字符——组合两个选择器，比如，第二个选择器匹配的元素被选择，如果他们有一个祖先（父亲，父亲的父亲，父亲的父亲的父亲，等等）元素匹配第一个选择器。选择器利用后代组合符被称作后代选择器。

结构：.标签该标签的所有后代{属性名：属性值；}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .a li{
        color: blue;
    }
    </style>
</head>
<body>
    <ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>2</li>
            <li>3</li>
            <li>1</li>
         </ul>
    </ul>   
</body>
</html>

复合选择器
该选择器又称逗号选择器，是用逗号将需要设置属性的标签连接起来，然后一同给这些类型的标签添加属性。

结构：标签名，标签名，标签名{属性名：属性值；}

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            color: pink;
        }
        p {
            color: pink;
        }
        span {
            color: pink;
        } */
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>
 
<body>
    <div>wisjiajsskmx</div>
    <p>cndklcdsmc</p>
    <span>jnckdsmc</span>
    <ul>
        <li>吃饱穿暖CNBCCDC</li>
    </ul>
</body>
 
</html>
属性选择器：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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;
        }
 
        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>
 
</html>

属性选择器
结构：标签名 [标签类型]{ 属性名：属性值；属性名：属性值；}

1、input[type^=“te”]{属性名：属性值； } 表示选择以te开头的所有类型的标签。

2、input[type$=“l”]{ 属性名：属性值；} 表示type值中以l结尾的值的标签。

3、input[type=“e”]{属性名：属性值； }* 表示type值里含有e的值的标签。
伪类选择器
伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。

结构：锚元素：伪类名称{ 属性名：属性值；}
hover——鼠标经过时

visited——访问过后

active——鼠标按下弹起

a:hover{
font-size:400px;（cursor——鼠标样式）

}
结构伪类选择器
结构：父元素子元素：nth-child(n) ：表示父元素中的第几个元素。
请添加图片描述
child的值：n—>从0开始查找，选择所有的孩子；2n、even—>偶数;2n-1、odd—>奇数

nth-child(n):在子元素中从头开始编码，选择时先看nth-child，然后选择整体的第几个。
	ul li:nth-child(2){
      background-color: pink;
    }
nth-of-type(n):在li的子元素中从头开始编码，选择是先选择li中的第几个，再看nth-of-type
    ul li:nth-of-type(2){
      background-color: red;
    }

伪元素选择器
结构：父元素子元素::伪元素{属性名：属性值；}
ul li ::before——在所选结构前面都加上！，需要搭配content使用

selection选中时改变

placeholder提示词

ul li::before{
      /*content属性：在li小例中元素前面添加伪元素*/
      content: "~";
    }
    ul li::after{
      /*content属性：在li小例中元素后面添加伪元素*/
      content: "000";
    }