CSS/CSS3 | P3-css选择器合集
1. css常用选择器
css选择器有很多,没必要全部都掌握,后续需要时学习即可,思路大体上相同
所以只需了解开发中常用的选择器即可
常用选择器
1、概念: 常用选择器称为简单选择器( 英文:simple selector )
2、种类: 元素(标签)选择器,id选择器,class选择器(类选择器)
3、作用: 首先要知道选择器是用来设置元素的样式的
使用逻辑:
- 定位元素，即需要设置样式的元素是哪个
- 设置样式，给需要设置样式的元素设置样式
所以按照这个逻辑,就有两步:
- 定位这个元素
- 设置样式
4、使用:
css选择器的格式:
专业一点描述就是
▶T01-说明选择器的格式(以id选择器为例)
#myId { }
#myID {
color: red;
font-size: 20px;
}
- 「 #myId 」就是
选择器。 - { color: red; font-size: 20px; }整体算是
声明块。 - 「 color:red;」,「font-size:20px; 」是声明块中的声明,格式 为
键值对形式。 - 「 ; 」 用于分隔不同的样式键值对。
常用选择器格式:
/* 元素选择器 */
元素名{ 样式代码 }
/* id 选择器 " # " 表示 id选择器 */
#id选择器值 { 样式代码 }
/* class选择器 " . " 表示class选择器 */
.class选择器值 { 样式代码 }
为了了解各种选择的特点,使用探究实验来说明,根据不同的需求说明不同的选择器的选择
▶T02-说明css常用选择器特点和用法区别
先编写html代码
<span>《回乡偶书二首》</span></br>
<span>唐-贺知章</span>
<p>少小离家老大回</p>
<p>乡音不改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
效果:
此时为默认样式
1.1. 元素选择器
▶T03-需求01-设置所有段落(p)的文字为红色。
HTML:
<span>《回乡偶书二首》</span>
<span>唐-贺知章</span>
<p>少小离家老大回</p>
<p>乡音不改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
CSS:
<style>
p{
color: red;
}
</style>
效果:
分析: 注意此时仅是 p标签的字体变为红色
这里的p{}的p就是元素选择器。特点是直接以元素标签名为选择器名
1.2. id选择器
▶T04-只为 段落为「乡音不改鬓毛衰」设置字体颜色为蓝色。
这样仅仅使用p标签会设置所有p标签样式。可当前需求是设置指定某一个元素的样式。即独一无二的,可以使用 id选择器。
HTML:
<p id="blue">乡音不改鬓毛衰</p>
这里只是给 这个p标签做了一个定位标记,只是完成的选择器的第一步
还需要设置样式
使用内部样式,在style中
CSS:
<style>
#blue{
color: blue;
}
</style>
效果:
分析: 由于给“乡音不改鬓毛衰”的标签设置了 id=”blue“ 的选择器, 在 style 块中 可以指定为这个元素设置样式为颜色 蓝色。
1.3. class选择器
▶T05-给p标签某些元素设置字体蓝色。
假如要求给最后两句诗句也设置字体颜色为蓝色。
当不仅需要给指定某个元素设置样式,而且这个样式同时能设置给其他元素时。由于id是独一无二的,一个元素只能有一个id,所以无法使用id选择器对多个元素设置相同样式,这样的话,就需要使用 class选择器 。
class简介
类
1、概念:
类是众多个体的属性中抽象的一个结果。如人类,猪狗牛羊,生育都是胎生。从生育的方式来说,抽象出胎生(区别于卵生),这样,原本没有联系的动物之间「产生」了联系。同样,从颜色的角度来说,其他元素都是红色,只有几个想要设置为蓝色,蓝色就被抽象出来,作为一个独立的「类」 ➡蓝色类
2、class选择器原理分析:
HTML:
<p class="blue">儿童相见不相识</p>
<p class="blue">笑问客从何处来</p>
CSS:
<style>
.blue{
color: blue;
}
</style>
效果:
分析:
由于从数据集中分类,分类的标准不同,因此「类别」也有很多。因此class选择器的样式可以叠加使用。如某一个选择器为字体大小,某一个选择器为字体颜色,这两个选择器可以为同一个元素设置样式,放置在class的属性值中,以空格分隔
▶T06-测试class选择器的叠加样式,使用不同选择器为同一个元素设置不同样式
假设设置最后一首诗句的字体大小为 25px,字体颜色为绿色。
HTML:
<p class="green font25">笑问客从何处来</p>
CSS:
<style>
.green{
color: green;
}
.font25{
font-size: 25px;
}
</style>
效果:
分析:
給 “笑问客从何处来” 设置两个选择器,相当于有两个“ 定位 ”的方式。使用“ .green ”设置 字体颜色, 使用“ font25 ” 设置字体大小。实现了样式的 “ 分割 ”类。
1.4. 通配符选择器
▶T07-设置所有种类的标签的字体颜色为 黑色。
想要完成这个需求,可以分别为span,p标签设置样式,但如果标签种类很多,则需要一 一设置。可以使用通配符「 * 」来设置所有标签的样式。
CSS:
<style>
*{
color: rgb(15, 15, 13);
}
</style>
效果:
分析:
其实 选择器之间还有优先级的差别。css叫做层叠样式表,而这个样式就是层叠上去的。同一个样式如果用不同的选择器设置,则这个样式需要选择。有关css选择器优先级访问: xxxxxxx
(完)
2. 复合选择器
1、概念:
复合的意思是 多个组合。
- 从需求上说: 复合就是
需求变复杂了 - 从代码上说: 复合就是
代码变多了 - 从选择器数量来说: 复合指的是定位某个元素设置样式的
选择器变多了
还是以唐诗为例
《回乡偶书二首》
唐-贺知章
少小离家老大回
乡音不改鬓毛衰
儿童相见不相识
笑问客从何处来
示例:
HTML:
<span>《回乡偶书二首》</span></br>
<span class="blue">唐-贺知章</span>
<p>少小离家老大回</p>
<p id="blue">乡音不改鬓毛衰</p>
<p class="blue">儿童相见不相识</p>
<p >笑问客从何处来</p>
CSS:
<style>
/** 使用复合选择器 选中 class为blue的 span标签 **/
span.blue{
color: rgb(4, 0, 255);
font-weight: bold;
}
/** 使用复合选择器 选中 class为blue的 p标签 **/
p.blue{
color: rgb(4, 0, 255);
font-weight: bold;
}
</style>
效果:
2、种类:
交集选择器并集选择器(选择器分组)
2.1. 交集选择器
1、交集的逻辑: A∩B ,A且B
2、交集的表示: 用 “.” 表示交集
3、交集选择器格式: 选择器A1选择器A2选择器A3选择器An{ 样式声明块 }
▶T08-给class为blue且标签为span的元素设置字体颜色为蓝色;给id为red且标签为p的元素设置字体颜色为red。
分析需求: 都含有两个条件 「选择器且标签」,即 class=blue 且 span ; id=red 且 p
HTML:
<span>《回乡偶书二首》</span>
<span class="blue">唐-贺知章</span>
<p>少小离家老大回</p>
<p id="red">乡音不改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
CSS:
<style>
span.blue{
color: rgb(4, 0, 255);
font-weight: bold;
}
p#red{
color: rgb(231, 27, 12);
font-weight: bold;
}
</style>
效果:
分析:
注意上述的 p#red是 p标签和id选择器复合,但是由于id选择器本身是独一无二的,如果再加上p选择器相对有点多余,实际上可以去掉(这里只是演示)
复合的体现:
-
span.blue:span元素选择器 复合.blueCLASS选择器 -
p#red:p元素选择器 复合#redID选择器
结构示意图:
4、注意事项和细节:
- 如果交集选择器的条件中有
元素选择器,则必须以元素选择器开头。 - 复合选择器中如果存在 id选择器则不需要复合了。
2.2. 并集选择器
1、并集的逻辑: A∪B, A合并B
2、并集选择器格式: 选择器A1,选择器A2,选择器A3,选择器An { }
「并」用 「,」表示
▶T09-给不同类型标签元素设置相同样式
假设给 div标签和h1标签设置相同样式(字体颜色红色,字体大小25px)
方案1:
给h1和div单独使用元素选择器或者id,class选择器设置样式
问题: 虽然可以解决问题,但是代码冗余了(存在相同样式代码)
能否只需要一个样式代码作用到多个元素标签上?
方案2:
使用并集选择器 h1,div{ }
代码:
HTML:
<h1>唐诗节选</h1>
<span>《回乡偶书二首》</span>
<span class="blue">唐-贺知章</span>
<p>少小离家老大回</p>
<p id="red">乡音不改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
<div>完</div>
CSS:
<style>
h1,div{
color: red;
font-size: 25px;
}
</style>
效果:
复合体现:
h1,div : h1元素选择器 或者 div元素选择器
结构示意图:
3、使用复合选择器条件分析:
按照需求,需要使用多个选择器才能为元素设置样式时,即「符合多个条件的元素」
总结提升:
交集选择器是 「元素」的同时: 多个选择器作用到同一个元素并集选择器是 「样式」的同时: 多个元素设置同一个样式
(完)
3. 关系选择器
1、概念:
实质上是 「父子」「兄弟」「祖先后代」关系选择器
▶T10-说明关系选择器的各种关系
假设有这么一个html结构:
<body>
<div>
我是一个
<p>我是div下的p
<span>我是p下的span</span>
</p>
<span>我是div下的span</span>
</div>
</body>
效果:
在其中存在哪些关系呢?
为了便于理解,将html元素的嵌套换为缩进,如下:
缩进表示层级关系
-
「父子关系」: ① 是 ②的「父亲」、②是③的「父亲」、③是④的「父亲」。
-
「兄弟关系」: ③和⑤是「兄弟」
-
「祖先后代关系」: ①是③ ④⑤ 的祖先(反之③④⑤是①的子孙)
2、相关概念:
- 父元素: 直接包含子元素的元素
- 子元素: 被元素直接包含的元素
- 祖先元素: 直接(间接)包含
子元素的元素 - 后代元素: 被直接(间接)包含的元素
- 兄弟元素: 处于
同级别的元素(有相同父元素的元素)
⚠️ 关系其实是相对的,需要一个「参照物」,知道一个就知道另一个。
3、种类:
- 子元素选择器
- 后代选择器
- 兄弟选择器
4、使用:
3.1. 子元素选择器(subElementSelector)
作用: 选择某个父元素下的子元素
格式:
父 > 子 { }
实例：
div > span { }
3.2. 后代选择器(descendantSelecor)
作用: 选择某祖先下的后代元素
格式:
祖先 后代{ }
实例:
div span{ }
⚠️后代元素相比子元素来说,范围更大
3.3. 兄弟选择器(siblingSelector)
种类01:
作用: 选择某个元素的紧挨着的后面的兄弟元素
格式:
兄 + 弟{ }
实例:
p + span{ }
种类02:
作用: 选择某个元素的后面的所有兄弟元素
格式:
兄 ~ 弟{ }
实例:
p ~ span{ }
(完)
4. 属性选择器
1、概念:
一般来说指的是html标签元素中的属性, < 标签名 属性名="属性值" >如 <span class="propertyTest" style="color:red">我是span</span>
▶T11-演示属性选择器
HTML:
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音不改鬓毛衰</p>
<p>一二三四五</p>
<p>四五六七八</p>
<p>哈哈哈哈哈</p>
CSS:
<style>
p[title]{
color: red;
}
</style>
效果:
格式:
元素选择器[属性名]{ }
实例:
p[title]{ }
目的: 选择属性为 title 的 p 标签
⚠️ 虽然id=" ",class=" "在标签中也算作属性,但因其特殊性,本身可做选择器,所以属性选择器中的属性不包括id,class
2、种类:
属性选择器的使用类型
(1)、[属性名]
目的: 选择属性名的元素
(2)、[属性名=属性值]
目的: 选择属性名为属性值字符串的元素
(4)、[属性名^=属性值]
目的: 选择属性名以属性值字符串开头的元素
(5)、[属性名$=属性值]
目的: 选择属性名以属性值字符串结尾的元素
(6)、[属性名*=属性值]
目的: 选择属性名中属性值包含给定属性值字符串的元素
3、使用:
▶T12-演示各种属性选择器的特点
HTML:
<p title="abc">少小离家老大回</p>
<p title="abcdef">乡音不改鬓毛衰</p>
<p title="helloabcde">一二三四五</p>
<p>四五六七八</p>
<p>哈哈哈哈哈</p>
🚀需求01: 设置属性名为title且属性值为abc的元素的字体颜色为 蓝色。
CSS:
<style>
/* 需求01-设置属性名为title且属性值为abc的元素的字体颜色为蓝色 */
p[title=abc]{
color: blue;
}
</style>
效果:
🚀需求02: 设置属性名为title且属性值以ab开头的元素字体效果为bold加粗
CSS:
<style>
/* 需求02-设置属性名为title且属性值以ab开头的元素字体效果为bold加粗 */
p[title^=ab]{
font-weight: bold;
}
</style>
效果:
🚀需求03: 设置属性名为title且属性值以bc结尾的元素字体效果为斜体
CSS:
<style>
/* 需求03-设置属性名为title且属性值以bc结尾的元素字体效果为斜体 */
p[title$=bc]{
font-style: italic;
}
</style>
效果:
🚀需求04: 设置属性名为title且属性值包含bc的元素字体颜色为 红色。
CSS:
<style>
/* 需求04-设置属性名为title且属性值包含bc的元素字体颜色为红色 */
p[title*=bc]{
color: red;
}
</style>
效果:
(完)
5. 伪类选择器
1.概念:
伪类: 虚伪(preudo),虚假的
2.作用: 用于定义元素特殊状态
常用伪类应用:
For example, it can be used to:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
3.使用:
使用格式: 伪类一般以一个冒号「:」(区别于伪元素「::」)开头
1)、选择某元素下的第一个子元素。
格式:
选择器 > 选择器:first-child{ }
实例:
ul > li:first-child{ }
作用: 选择ul标签下的li元素且li是所有元素中的第一个位置
2)、选择某元素下的最后一个子元素。
格式:
选择器 > 选择器:last-child{ }
实例:
ul > li:last-child{ }
作用: 选择ul标签下的li元素且li是所有元素中的最后一个位置
3)、选择某元素下某个序列位置元素。
格式:
选择器 > 选择器:nth-child(序号参数n){ }
实例:
ul > li:nth-child(3){ }
作用: 选择ul标签下的li元素且li是所有元素中第三个位置
4、特殊参数值:
n: 第n个(n的范围0~正无穷)2n或even: 选择偶数位元素2n+1或odd: 选择奇数位元素
⚠️ 以上的 「最后」,「第一个」,「第几个 」都是基于所有的元素排序后的结果
而
:first-of-type
:last-of-type
:nth-of-type()
这些伪类和上述类似,只不过排序是在同类型元素中(不是在所有元素中)
<ul>
<span>我是第一个span</span>
<span>我是第二个span</span>
<span>我是第三个span</span>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
<li>我是第四个li</li>
<li>我是第五个li</li>
</ul>
如果是 ul > li:first-child { }
则 没有,因为没有li是属于 ul下所有元素中的第一个元素,只有span
而如果是ul > li:first-of-type{ }, 则 是 「我是第一个li」
因为 在ul下的元素中在所有li中的第一个位置元素是「我是第一个li」
⚠️ 注意区别和逻辑
▶T13-说明所有集和分组筛选后的集的区别
🚀需求01: 设置ul下的li,且li是属于ul中所有li中的第一个li的字体颜色为红色
HTML:
<ul>
<span>我是第一个span</span>
<span>我是第二个span</span>
<span>我是第三个span</span>
<li>我是第一个li</li>
<li>我是第二个li</li>
<li>我是第三个li</li>
<li>我是第四个li</li>
<li>我是第五个li</li>
</ul>
CSS:
ul > li:first-of-type{
color: red;
}
效果:
分析: ul > li:first-of-type 的目的是选择ul下的li且li是ul下所有元素中类型属于li的所以元素的第一个li。
🚀需求02: 设置ul下的所有元素中的li且li是第一个元素字体颜色为绿色
CSS:
ul > li:first-child{
color: rgb(60, 221, 27);
}
效果；
为什么没有看到颜色变为分析: ul > li:first-child 的目的是选择ul下的li且li属于ul下的所有元素中的第一个。而上述html代码所表现的ul下的所有元素中的第一个是 span(我是第一个span),所以效果没有生效绿色
总结提升:
- 一个是
所有元素中排序 - 一个是
所有元素中某个类型元素中排序
(完)
来源: 博客园
作者: 茶哩哩
文章: 转载请注明原文链接：https://www.cnblogs.com/martin-1/p/15138755.html
