简单选择器 1. ID选择器 2. 元素选择器 3. 类选择器 4. 通配符选择器 5. 属性选择器 6. 伪类选择器（用得最多） 7. 伪元素选择器选择器的组合(用得很广) 选择器的并列

六行代码

已于 2023-01-20 10:25:03 修改

阅读量102

点赞数

文章标签： css css3 html

于 2023-01-19 22:43:36 首次发布

本文链接：https://blog.csdn.net/m0_55751104/article/details/128738013

版权

选择器

选择器：帮助你精准的选中想要的元素

简单选择器

1. ID选择器

2. 元素选择器

3. 类选择器

4. 通配符选择器

*，选中所有元素

*{
    color: red;
}

5. 属性选择器

根据属性名和属性值选中元素
有多种匹配方法

写法：

写法1：
[href]{
    color: aqua;
}
 <a href="https://www.bilibili.com/">B站</a>
 
写法2：
[href="https://www.bilibili.com/"]{
    color: aqua;
}
<a href="https://www.bilibili.com/">B站</a>

6. 伪类选择器（用得最多）

选中某些元素的某种状态

1）link: 超链接未访问时的状态

a:link{
    color:blue;
}

2）visited: 超链接访问过后的状态

3）hover: 鼠标悬停状态
下面的写法表示：选中鼠标悬停时a元素的状态

a:hover{
    color: red;
}

4）active：激活状态，鼠标按下状态

a:active{
    color: red;
}

爱恨法则：love hate：

如果要同时写以上四种方法，那么就要按顺序来排列四种属性，不然会出错

7. 伪元素选择器

before：
after：

这两种属性的写法是在要加入内容的地方写span属性，并在css里写要加入的内容；注意：属性值带有两个冒号。

span::before{
    content: "《";
    color: red;
}
span::after{
    content: "》";
    color: red;
}
这个<span>水果</span>真好吃

效果图
在这里插入图片描述

选择器的组合(用得很广)

并且
联合两种元素发生变化：

第一个段落是发生字体的改变

第二个段落的样式因为css里调用了第二段的class类选择器,所以第二段字体+颜色发生了改变。

    <p>Lorem ipsum dolor sit, amet consectetur adipisicing.</p>

    <p class="red">Lorem ipsum dolor sit amet consectetur.</p>
 css:
 p{
     font-size: 20px;
     line-height: 2;
 }
 p.red{
     color: red;
 }

效果图：在这里插入图片描述
2. 后代元素：空格

通过css设置后代元素来精准设置某个元素的样式：
比如：通过类选择器+li 可以将div包含在内的li内容进行改变。
注意：blue与li 中间有空格

   .blue li{
    color: violet;
    
     <div class="blue">
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Saepe obcaecati minima quas laborum!</li>
            <li>Harum quidem libero autem ullam.</li>
            <li>Quis cumque adipisci delectus sapiente!</li>
            <li>Ipsa mollitia necessitatibus tenetur saepe.</li>
        </ul>
    </div>
}

子元素： >
使用 > 符号进行调用

div>ul li{
    color: blueviolet;
}

相邻兄弟元素： +
通过加号可以让id后面的下一个元素也发生改变

.red{
    color: red;
}
.red+li{
    color: blue;
}

后面出现的所有兄弟元素： ~
~表示后面的所有 li 都发生改变

.red{
    color: red;
}
.red~li{
    color: blue;
}

选择器的并列

多个选择器, 用逗号分隔

语法糖

就是把相同内容的css内容都放到同一个里面
例如：

.red~li{
    color: red;
}
p{
    color: blue;
}

合成这样的

.red~li, p{
    color: blue;
}

全部选择器代码总结

ID选择器 
#red{
    color: red;
}

 元素选择器 
h1{
    color: aqua;
}

类选择器 
.blue{
    color: blue;
}
.box{
    font-size: 1.5em;
    /* line-height: 2; */
}

通配符选择器 
*{
    color:chartreuse ;
} 

 属性选择器 
[href]{
    color: #f4f;;
}

 伪类选择器（用得最多）
a:link{
    color: red;

}
a:visited{
    color: blue;   
}
a:hover{
    color: coral;

}
a:active{
    color: blueviolet;
}

 伪元素选择器 
span::before{
    content: "<";
    color: tomato;
}
span::after{
    content: ">";
    color: tomato;
}


 选择器的组合 

/* 并且 */
p.test{
    font-weight: 500;
    height: 5;
    color: brown;
}

 后代元素 ：空格
.bll li{
    color: limegreen;
}

 子元素 ： > 
div>ul li{
    color: brown;
} 

 相邻兄弟元素 ： + 
.bll+li{
    color: blueviolet;
}

后面出现的所有兄弟元素 ： ~
.bll~li{
    color: #f4f;
}

 选择器的并列（一定要有逗号）
.bll~li,p{
    color: antiquewhite;
}

body里的内容(下图)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css文件.css">
</head>
<body>
    <div class="yellow">
        <ul>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Inventore, eveniet nulla. Commodi, praesentium!</li>
            <li>Ratione cum deserunt quia dolores.</li>
        </ul>
    </div>

    <ul>
        <li class="bll">Lorem ipsum dolor sit amet.</li>
        <li>Commodi culpa cum optio iusto!</li>
        <li>Mollitia nesciunt maxime saepe debitis!</li>
    </ul>
     
    <a href="http://baidu.com" target="_blank">属性选择器</a>
    <a href="https://www.bilibili.com/" target="_blank">伪类选择器</a>
    <a href="https://www.douyu.com/" target="_blank">伪类选择器</a>
    <a href="https://www.jd.com/" target="_blank">京东</a>
      
    这是<span>不是</span>两个类选择器

    <h1>元素选择器</h1>

    <p id="red">这是id选择器</p>
    <p class="blue box">这是两个类选择器</p>
    <p class="test">Quisquam minima vitae repellendus mollitia assumenda?</p>
    <p>Distinctio velit veritatis qui repudiandae magni.</p>
    <p>Rerum quasi delectus quis error aliquid?</p>


</body>
</html>