前言:
选择器的作用
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说就是选择标签用的
选择器分为基础选择器和复合选择器
目录
一,基础选择器
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器,类选择器,id选择器,通配符选择器和属性选择器
1.标签选择器
标签选择器是指用HTML标签的名称作为选择器,按标签名称分类,为了当前页面中某一类标签同一css样式
语法:
标签名:{
属性1:属性值;
属性2:属性值;
.......
}
效果展示:(注:css中color属性为文本颜色)
2.类选择器(常用)
如果想要差异化选择不同的标签,单独选择一个几个标签,可以使用类选择器
语法:
. 类名
属性1:属性值;
属性2:属性值;
}
引用类选择器要用class属性来调用
例如:
<head>
<style>
.nav {
color: red;
}
</style>
<head>
<body>
<div calss="nav">class引用</div>
</body>
效果展示:
类选择器口诀:样式点定义,结构class调用,一个或多个,开发开发最常用。
*注意点:
- 类选择器使用“.”(英文符号点)进行标识,后面紧跟类名(自定义,我们自己命名)不能用标签
- 长名字或词组可以用中横线来表示 例如: shang-hai
- 不能用纯数字,中文等命名,尽量使用英文字母表示
- 命名尽量要有意义,做到一眼知意
3.类选择器 ——多类名
我们可以给一个标签指定多个类名,从而达到更多选择的目的,这些类名都可以选出这个标签
语法:例如
<div class="类名1 类名2 ...."></div>
注意点:
- 在标签中class属性写多个类名
- 多个类名中间必须用空格分开
- 这个标签具有所有类名的特点
4.id选择器
id选择器可以规定含有id属性HTML元素的样式,HTML中以id属性来设置id选择器,css中以“#”定义
语法:
#id名 {
属性1:属性值;
属性2:属性值;
.......
}
效果展示:
id选择器口诀:样式#定义,结构id调用。只能用一,其他切勿用。
注意:
- id选择器每个HTML文件只能使用一次
- id选择器之只能调用一次
5.通配符选择器
css中通配符选择器使用“ * ”定义,他表示页面中所有的元素
语法:
* {
属性1:属性值;
属性2:属性值;
.......
}
效果展示:
注意点:
- 通配符选择器不需要调用,自动给所有元素使用样式
- 特殊情况下才用,后面讲场景时常用(以下是清除所有元素的内外边距 后期将)
6.属性选择器
css中还可以通过HTML中的属性的不同来添加样式,在css中用 [ ] 英文的中括号定义属性选择器
语法:
[属性] {
属性1:属性值;
属性2:属性值;
.......
}
或
[属性="属性值"] {
属性1:属性值;
属性2:属性值;
.......
}
效果展示:
7.基础选择器的总结
基础选择器 | 作用 | 特点 | 情况 | 语法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签 | 不能差异选择 | 较多 | p { } |
类选择器 | 可以选出你想选出的标签 | 可根据需求选择 | 非常多 | .nav { } |
id选择器 | 一次只能选择一个标签 | HTML中只能出现一次 | js常用 | #nav { } |
通配符选择器 | 选择所有标签 | 不需要调用,整个网页起作用 | 特殊情况用 | * { } |
属性选择器 | 选出含有该属性的元素 | 可以根据不同的属性或属性值选出想要的元素 | 较多 | [name] { } |
- 每个选择器都有使用场景都与要掌握
- 如果是写改样式类选择器使用最多
二,复合选择器
复合选择器是建立在基础选择器上,对基本选择器进行组合形成的
- 复合选择器可以更精准,更高效的选择标签
- 复合选择器由两个或多个基础选择器通过不同的方式组合形成的
- 常用的复合选择器:后代选择器 子代选择器 并集选择器 伪类选择器
1.后代选择器
后代选择器又被称为包含选择器,可以选择父元素中的子元素
其写法就是把外层标签写在前面内层标签写在后面,当发生嵌套时,内层标签就成为了外层标签的后代(子元素 父元素定义)
语法:
元素1 元素2 ..... 元素n {
属性1:属性值 ;
属性2:属性值;
.......
}
案例:
仅使乔治 佩奇变色
上述语法表示 :div 包含了 p
注意:
- 元素之间必须用空格分开
- 前面的标签是后面元素的父元素,最终选中的是最后面的元素
- 后面的元素可以做父级也可是子级 如:div ol li a ;ol是div的子级但是li的父级
- 其中的子父级可以是任意选择器 如:.nav #mang [name] a
- 书写顺序一定是由外到内
2.子元素选择器
子元素选择器只能选择作为某一元素最近一级子元素 简单来说就是选择亲儿子
<div>
<h1> </h1>
<ol>
<li>
<p> </p>
</li>
</ol>
</div>
如上div 最近的一级子元素就是h1 ol 即亲儿子就是h1 ol 而 li 是div 的孙级
语法:
元素1>元素2 >...>元素n {
属性1:属性值 ;
属性2:属性值;
.......
}
案例:
只让光头强变色
上述语法表示:div 中所有的直接后代(最近一级子元素)p
注意:
- 元素与元素之间用大于符号隔开
- 前面的标签是后面元素的父元素,最终选中的是最后面的元素
- 最终选择的元素必须是上一级元素的亲儿子
3.并集选择器
并集选择器可以同时选择多组标签,同时为他们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文的逗号(,)连接而成,任何选择器都能成为并集选择器的一部分。 例如:.anv ol li ,#cin>a, p
语法:
元素1,元素2 ,...,元素n {
属性1:属性值 ;
属性2:属性值;
.......
}
案例:
注意:
- 元素与元素之间用逗号隔开
- 逗号理解为“和”的意思
- 并集选择器通常用于集体声明
4.伪类选择器
伪类选择器用于向某些选择器添加特殊效果
伪类选择器最大的特点是用英文的冒号(:)表示
伪类选择器器常用的选择器
选择器 | 说明 |
---|---|
:link | 选中未被访问过的元素 |
:visited | 选中被访问过的元素 |
:hover | 选中鼠标指针于元素上的元素 |
:active | 选中鼠标按下未弹起的元素 |
:focus | 用于获得焦点的元素 被点击的元素 |
*注:为确保生效必须按照 link visited hover active 的顺序书写
语法:
选择器 伪类选择器 {
属性1:属性值 ;
属性2:属性值;
.......
}
5.复合选择器总结
选择器 | 作用 | 特征 | 使用情况 | 分隔符及用法 |
---|---|---|---|---|
后代选择器 | 用来选择后代元素 | 所有后代 | 较多 | 空格 .nav a |
子代选择器 | 选择最近一级 | 选择亲儿子 | 较少 | > .nav>a |
并集选择器 | 设置相同的样式 | 用于集体声明 | 较多 | ; .nav;a |
伪类选择器 | 设置特殊效果 | 较多 | : a:link input:focus |
谢谢观看!!!!