选择符/选择器 深入了解 全面的选择器学习:
一、什么是选择器/选择符?
在 CSS 中,选择器是一种模式,通过选择器 ,我们可以选择到相应的元素。对齐添加样式。
二、选择器/选择符 分类
序号 | 大类 | 示例 | 说明 |
---|---|---|---|
① | 通配选择器(全局选择器) | * | 指的是所有标签元素 不要轻易使用这个选择器,比较消耗性能,那我们是怎么初始化边距的??? |
② | 元素选择器 | p | 指的是某个标签元素 |
③ | class类型选择器 | .classname | 指的是class名为classname的元素,可以是多个 |
④ | id选择器 | #idname | 指的是class名为idsname的元素,只可以是一个,因为id是唯一的,即使误操作也只能选择到第一个元素 |
⑤ | 属性选择器 | 略 | 简单属性选择器,具体属性值选择器,部分属性选择器,开始子串属性值选择器,结束子串属性值选择器,任意子串属性值选择器,语言属性选择器 |
⑥ | 伪类与为元素选择略 | 伪类:通过选择器可以选择到一类元素,可能是0个,1个,多个, 伪元素:通过选择器可以选择到一个元素,例如:after :before :first-letter :first-line |
⑦ | 组合选择器 | 略 | 组合选择器就是多个选择器组合使用,是前面 几种 选择器的联合使用 简单组合选择器:后代选择器,子选择器,相邻兄弟选择器,后续选择器 复杂组合选择器:这个很多,具体学习 |
2.1 通配符选择器/全局选择器
符号: * 就是一个星号,代表的是所有的标签,通常用来初始化,但是耗能比较大,不推荐使用
代码:
*{
margin: 0;
padding: 0;
}
通配符使用在组合选择器,
代码:
div * p {
color: red;
/* 组合选择器(后代选择器) div * p
指的是div标签下的 所有标签 下的p标签 的文本都设置为红色
*/
}
2.2 元素 选择器
符号: tagname 就是标签的名称
代码:
p {
color: red;
/*
指的是所有p元素 的文本都设置为红色
*/
}
2.3 class类名 选择器
符号: .classname 就是 圆点 与类名
代码:
<style>
.red {
color: red;
/*
指的是所有class名为red的元素 的文本都设置为红色
*/
}
</style>
</head>
<body>
<div style="border: 1px solid black; width: 200px;">
<p>pppp,不变色</p>
<p class="red">pppp红色</p>
<p>pppp</p>
<div class="red">aaaaa红色</div>
</div>
</body>
结果:
2.4 id名 选择器
符号: #idname 就是 #号 与id名
代码:
<style>
#red {
color: red;
/*
指的是id名为red的元素 的文本都设置为红色
*/
}
</style>
</head>
<body>
<div style="border: 1px solid black; width: 200px;">
<p>pppp,不变色</p>
<p id="red">pppp红色</p>
<p>pppp</p>
</div>
</body>
结果:
2.5 属性 选择器
① 简单属性选择器: 元素名[属性名]
例如: a[rel]{color:red;} 说明:存在rel属性的a元素
例如: p[class]{color:red;} 说明:存在属性class的p元素
②具体属性选择器: 元素名[属性名="属性值"]
例如: a[rel="home"]{color:red;} 说明:存在rel属性,且属性值为home的a元素
例如: input[type="text"]{}
例如:input[type="button"]{}
③部分属性值 选择器: 元素名[属性名~="属性值(的部分内容)"] 一个属性的值可能存在以空格分开的多个值
例如: p[class~="red"] 说明:class属性的值里面,包含有red p元素就会被选上 ,这里等价于 .red 类型选择器
例如:a[rel~="home"] 说明:rel属性的值里面,包含有home ,那么这个a元素就会被选上
代码:
<style>
p[class~="red"] {
color: red;
/*
指的是class属性中属性值包含red的元素 的文本都设置为红色
*/
}
</style>
</head>
<body>
<div style="border: 1px solid black; width: 200px;">
<p>pppp</p>
<p id="red">pppp</p>
<p class="red">pppp变色</p>
<p class="red1 red2">pppp,不包含red,不变色</p>
<p class="red2 red">pppp,包含red变色</p>
<p class="red2">pppp不变</p>
</div>
</body>
结果:
④开始子串属性值 选择器: 元素名[属性名~="属性值的开头部分字符串)"]
例如: a[href^="/blog"] 说明:属性href的属性值的开头的字符串为/blog 的a元素
例如:img[title^="figure"] 说明:title属性的属性值的开头的字符串为/figure 的img元素
⑤结束子串属性值 选择器: 元素名[属性名~="属性值的 结尾部分字符串)"]
例如: a[href$=".pdf"] 说明:属性href的属性值的结尾的字符串为.pdf 的a元素
例如:img[src$=".gif"] 说明:src属性的属性值的结尾的字符串为.gif 的img元素
⑥ 任意子串属性值 选择器: 元素名[属性名~="属性值的 任意部分 字符串)"]
例如: a[href*="jingdong.com"] 说明:属性href的属性值的结尾的字符串为.jingdong.com的a元素
例如:img[src*="/img"] 说明:src属性的属性值的任意的字符串为/img 的img元素
⑦ 语言属性选择器:
例如:html[lang |="en"] 选择到语言为英文的html页面
2.5 伪类/伪元素 选择器
见另外一篇文章: 伪类/伪元素选择符/选择器 深入了解
伪类:通过选择器可以选择到一类元素,可能是0个,1个,多个,
伪元素:通过选择器可以选择到一个元素,例如:after :before :first-letter :first-line
2.6 组合选择器 选择器
见另外一篇文章:组合选择器深入了解
组合选择器就是多个选择器组合使用,是前面 几种 选择器的联合使用
简单组合选择器:后代选择器,子选择器,相邻兄弟选择器,后续选择器
复杂组合选择器:这个很多,具体学习