【前端CSS】CSS的3种基本选择器和5种高级选择器使用方式

前言

1W：什么是CSS选择器？

CSS选择器由HTML元素的id、class属性或元素名本身以及一些特殊符号构成；

2W：为什么使用CSS选择器？

用于指定要为哪个HTML元素定义样式；

3W：如何使用CSS选择器？

行内样式：在标签内添加style书写，将样式放在HTML标签中，实现繁琐，推荐学习使用
内部样式：将CSS写在</head>和<body>之间，使用HTML标签<style>将其包围，特点是该样式只能在此页使用，解决行内样式多次书写的弊端；
外部样式：通过HTML的<link>标签，将外部样式表链接到HTML文档中，也是网络上网站应用最多的方式，同时也是最使用的方式。将HTML文档和CSS文件完全分离，增强网页结构的扩展性和CSS样式的可维护性；

基本选择器

1.1 标签选择器

通过具体的标签名称来匹配文档内所有同名的标签，如下所示：

P{
    color:blue;
}

p 选择器能够匹配文档中所有的<p>标签

1.2 ID选择器

用来匹配HTML文档中具有指定ID属性的标签，ID选择器的定义需要用到 # ，后面紧跟ID属性的值，如下所示：

注：id属性不能重复，如果某个元素使用id，则这个id是这个元素的唯一标识；

#nav{
    color:aqua;

}

#nav 选择器能够匹配文档中具有 id="nav" 属性的标签；

1.3 类选择器

根据标签的class 属性匹配具体的HTML标签，所有符合条件的标签都会根据选择器内的样式进行格式化；

类选择器的定义需要用到一个英文的句号 . ，后面紧跟 class 属性的值,如下所示：

.list{
    color:darksalmon;
}

.list 选择器能够匹配文档中所有具有 class="list"属性的标签

类选择器相较于ID选择器不同的是：类选择器可以重复使用，class属性不是唯一的，可应用于不同的标签，如下所示：

p.list{

    color:darksalmon;
}

p.list 选择器仅会将其中的样式应用到所有具有 class="list" 属性的<p>标签中，对于其他的具有 class="list"属性的标签则没有影响。

一个HTML标签中的class属性可以不止一个，如：

<p class="info selected"></p>
<p class="info"></P>

我们可以将所有class属性包含info的元素设置粗体，为所有class 属性包含selected的元素设置红色字体，为class属性中既包含info又包含selected的元素设置蓝色背景，如下所示:

.info{
 font-weight: bold;
 }
 .selected{
 color: red;
 }
 .info.selected{
 background: blue;
 }

这种由多个 class 属性值所组成的类选择器我们可以称之为“ 多类选择器 ”，由单个class属性值定义的类选择器可以称为“ 单类选择器 ”；

注：多类选择器中，多个class属性之间是紧挨着的，如info.selected，不需要使用空格分开

高级选择器

2.1 并集选择器

并集选择器是由多个选择器通过逗号 , 连接而成，如下所示：

<!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>
</head>
<style>
 /* 并集选择器 */
 p,.yangshi{
 color: red;
 }
</style>
<body>
 <p>爱你孤身走暗巷</p>
 <p>爱你不跪的模样</p>
 <div>爱你对峙过绝望</div>
 <div class="yangshi">不肯哭一场</div>
</body>
</html>

2.2 交集选择器

交集选择器是由两个选择器连接构成，选中二者范围的交集，如下所示：

注：两个选择器之间不能有空格，第⼀个必须是标签选择器，第⼆个必须是类选择器或 id 选择器

<!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>交集选择器</title>
</head>
<style>
 /* 交集选择器 */
 div.one{
 color: red;
 }
 div#two{
 color: darkorchid;
 }
</style>
<body>
 <h1>孤勇者</h1>
 <small>陈奕迅</small>
 <div class="one">爱你孤身走暗巷</div>
 <div id="two">爱你不跪的模样</div>
 <div>爱你对峙过绝望</div>
 <p class="one">不肯哭一场</p>
</body>
</html>

2.3 后代选择器

当⼀个标签嵌套在⼀个标签内部的时候，就可以将这个标签看作是标签的后代。当我们需要选择⼀个标签的任何⼀个后代标签时，就可以使⽤后代选择器。

后代选择器的定义方式就是将标签名、 class 属性或 id 属性等按照标签的嵌套关系由外到内罗列，中间使用空格分开。

如下所示：

<!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>后代选择器</title>
 </head>
 <style>
 a{
 text-decoration: none;
 }
 
 /* 后代选择器 */
 ul a{
 color: gray;
 line-height: 30px;
 }
 </style>
 <body>
 <div>
 <h2><a href="#">孤勇者</a></h2>
 <ul>
 <li>
 <a href="#">爱你孤身走暗巷</a>
 </li>
 <li>
 <a href="#">爱你不跪的模样</a>
 </li>
 <li>
 <a href="#">爱你对峙过绝望</a>
 </li>
 <li>
 <a href="#">不肯哭一场</a>
 </li>
 </ul>
 </div>
 </body>
</html>

ul a 选择器只会匹配⽆序列表<ul>标签的所有后代标签<a>，和<h2>标签中的<a>标签无关

2.4 子元素选择器

子元素选择器与后代选择器类似，不过子元素选择器只会匹配某个元素的直接后代（元素与其⼦元素之间只有⼀层嵌套关系），子元素选择器由两个或多个选择器组成，选择器之间用大于号 > 分隔开。

<!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>
</head>
<style>
 div{
 text-align: center;
 }
 /* ⼦元素选择器 */
 div>p>em{
 font-size: 22px;
 }
 div>p>.uname{
 color: red;
 font-weight: 600;
 }
 
</style>
<body>
 <div>
 <h2>李小龙语录</h2>
 <p>
清空你的思想，像水一样无形。你将水倒入水杯，水就是水杯的形状。
<em>你将水倒入茶壶，水就是茶壶的形状。</em>你看，水会流动，也会冲击。请像水一样吧，我的朋友！
<em class="uname">武术宗师李小龙</em>
 </p>
 </div>
</body>
</html>

2.5 属性选择器

属性选择器是指选取带有属性的元素

<!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>
</head>
<style>
 /* 属性选择器 */
 input{
 background-color: pink;
 }
 input[type]{
 background-color: aqua;
 }
 input[name]{
 background-color: yellow;
 }
 input[name="userpwd"]{
 background-color: greenyellow;
 }
</style>
<body>
 <input ><br>
 <input type="text"><br>
 <input type="text" name="username"><br>
 <input type="text" name="userpwd">
</body>
</html>