CSS选择器介绍

CSS选择器介绍
CSS选择器介绍

CSS（Cascading Style Sheets 层叠样式表）。CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。层叠指多个样式可以作用在同一个html的元素上，同时生效。

CSS快速入门 https://blog.csdn.net/cnds123/article/details/112976663

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

要对HTML页面中的元素实现一对一，一对多或者多对一的控制，可用CSS 规则集（rule-set）实现，CSS 规则集也称为css样式定义，CSS 规则集由选择器和声明块组成，形式如下：

选择器（selector）指向您需要设置样式的 HTML 元素。

声明块（declaration block）指明了样式，包含一条或多条用分号分隔的声明，用花括号括起来。每条声明都包含一个 CSS 属性（property）名称和一个值（value），以冒号分隔。

换句话说，声明块指明了样式，选择器指明了 “样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

CSS 的选择器分为两大类：基本选择题和扩展选择器。

基本选择器

标签（标记）选择器（也称为元素选择符）：针对一类标签（标记）

ID 选择器：针对某一个特定的标签使用

类选择器：针对你想要的所有标签使用

通用选择器（通配符）：针对所有的标签都适用（不建议使用）

标签选择器

是指用HTML标签名称作为选择器，基本语法格式如下：

标签名{属性1:属性值1;属性2:属性值2;……}

HTML所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input、div 等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述 “共性”，无法描述某一个元素的 “个性”。

如：

p {
font-size:14px;
color: red;
}

完整示例代码如下：
```
html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器示例title>
<style>
p{
    font-size:14px;
    color: red;
}
style>
head>
<body>
<p>Hello！p>
<p>你好！p>
body>
html>
```
用浏览器打开运行效果：

id选择器

id选择器使用“#”开头后面紧跟id名，其基本语法格式如下:

#id名{属性1:属性值1;属性2:属性值2;……}

大多数 HTML 标签都可以有 id 属性，使用id="id名"引用，注意ID名字大小写严格区分且不能和标签同名，且id 名称不能以数字开头。

如：

#myp{
font-size:14px;
color: red;
}

完整示例代码如下：
```
html>
<html>
<head>
<meta charset="utf-8">
<title>ID 选择器示例title>
<style>
#myp{
    font-size:14px;
    color: red;
}
style>
head>
<body>
<p id="myp">Hello！p>
<p id="myp">你好！p>
body>
html>
```
用浏览器打开运行效果：

类选择器

选择器使用“.”(英文点号)进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1;属性2:属性值2;……}

大多数HML标记都可以定义class属性。类选择器最大的优势是可以为标记对象定义单独或相同的样式。注意，类名不能以数字开头！id选择器和类选择器使用上相近，但同一个标签可以使用多个类选择器，用空格隔开。

如：

.myclass{
font-size:14px;
color: red;
}

完整示例代码如下：
```
html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器示例title>
<style>
.myclass{
    font-size:14px;
    color: red;
}
style>
head>
<body>
<p class="myclass">Hello！p>
<p class="myclass">你好！p>
body>
html>
 
```
用浏览器打开运行效果：

同一个标签可以使用多个类选择器，用空格隔开，例：
```
html>
<html>
<head>
<meta charset="utf-8">
<title>类选择器示例title>
<style>
.myclass{
    font-size:14px;
    color: red;
}
.myclass2{
     width:100px;
     border:solid 5px red;
  }
 
style>
head>
<body>
<p class="myclass myclass2" >Hello！p>
<p class="myclass">你好！p>
body>
html>
```
用浏览器打开运行效果：

通用选择器（通配符*选择器）

通配符选择器用“*”号表示，能匹配页面中任何标签。其基本语法格式如下：

*{属性1:属性值1;属性2:属性值2;……}

将匹配任何标签——不需要进行引用，就可以起到通配的效果——对所有的HTML标生效，不好控制，实际网页开发中很少使用。

*{
font-size:14px;
color: red;
}

完整示例代码如下：
```
html>
<html>
<head>
<meta charset="utf-8">
<title>通配符选择器title>
<style>
*{
    font-size:14px;
    color: red;
}
style>
head>
<body>
<p>Hello！p>
<p>你好！p>
body>
html>
```
用浏览器打开运行效果：

扩展选择器（高级选择器）

后代选择器：用空格隔开

等等

后代选择器

用来选择某标记的后代标记，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。用后代选择符的前提是这个元素是某个元素的后代元素。如：

完整示例代码如下：
```
html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器示例title>
<style>
.div1 p{
    font-size:24px;
    color: red;
}
style>
head>
<body>
<div class="div1">
<p>Hello！p>
div>
<p>你好！p>
body>
html>
```
用浏览器打开运行效果：

注意：后代选择器，只要保持一个后代的关联即可，写法可以灵活运用。如：

和

效果相同

使用前者完整示例代码如下：
```
html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器示例title>
<style>
 p b i{
    font-size:24px;
    color: red;
}
style>
head>
<body>
<p>在不懂社会<b>的年纪<i>你i>就得b>走向社会！p>
body>
html>
```
用浏览器打开运行效果：

使用后者完整示例代码如下：
```
html>
<html>
<head>
<meta charset="utf-8">
<title>后代选择器示例3title>
<style>
 p b .iA{
    font-size:24px;
    color: red;
}
style>
head>
<body>
<p>在不懂社会<b>的年纪<i class="iA">你i>就得b>走向社会！p>
body>
html>
```
使用后者完整示例代码如下：

更多情况可参见

CSS 选择器 - 学习 Web 开发 | MDN

CSS 选择器
相关阅读:
LeetCode 周赛上分之旅 #40 结合特征压缩的数位 DP 问题
 解决LiveData数据倒灌的新思路
 nginx网站服务
 MyEclipse报错javax/persistence/EntityManagerFactory
制作java8的镜像，基于alpine并设置时区，配置下载源
 enable_if
【JVM调优实战100例】02——虚拟机栈与本地方法栈调优五例
 深入浅出node模板解析错误escape is not a function
跨文档通信
 基于.NetCore开发博客项目 StarBlog - (11) 实现访问统计
原文地址：https://blog.csdn.net/cnds123/article/details/125926256

CSS选择器介绍

基本选择器

扩展选择器（高级选择器）