先看一个CSS选择器的样例:
1.CSS基础选择器
1.1CSS选择器是什么?
CSS选择器就是我们根据需求把我们想要的标签选择出来。简而言之,选择器就是选择标签用的。 例如上图CSS选择器做了两件事:
①. 找到所有的h1标签
②. 给找到的所有标签设置样式,比如上面将颜色设置为红色,字体大小设置为红色
1.2选择器分类
选择器分为基础选择器和复合选择器
选择器分类 | 作用 | 包括 |
---|---|---|
基础选择器 | 基础选择器是由单个选择器组成的 | 基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器 |
复合选择器 | 复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素(标签) | 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等 |
1.3基础选择器
1.3.1标签选择器
标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
标签选择器可以把某一类标签全部选择出来,例如所有的 <div>
标签和所有的 <span>
标签。
优点:能快速为页面中同类型的标签统一设置样式。
缺点:不能设计差异化样式,只能选择全部的当前标签。
1.3.2类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器.语法:
类名 {
属性1: 属性值1;
...
}
例如,将所有拥有 red 类的 HTML 元素均为红色。
<div class=‘red’> 变红色 </div> //这里的class就是类,red就是类的名字
.red {
color: red;
}
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。
类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点“.”号显示。
1.3.3 id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#" 来定义。语法:
#id名 {
属性1: 属性值1;
...
}
例如,将 id 为 nav 元素中的内容设置为红色。
#nav {
color:red;
}
注意:与类选择器不同的是,id 是唯一性元素,一个 id 在文档中被使用一次,一个页面上,不允许两个元素具有相同的 id。(这是规定)一个HTML元素,也只允许使用一个 id,不允许以空格分隔的 id 列表。
<div id="red" > 定义了一个id,id名字为red</div>
<p id="red" >这里定义id为red是错误的</p>
id选择器与class选择器的区别
(一)
①id相当于人的身份证,不可以重复
②class相当于人的名称可以重复
(二)
①一个html标签只能绑定一个id名称
②一个html标签可以绑定多个class名称
(三)
①id选择器是以#开头
②class选择器是以.开头
1.3.4 通配符选择器
在 CSS 中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)。通配符选择器不需要调用, 自动就给所有的元素使用样式。语法如下:
* {
属性1: 属性值1;
...
}
* {
margin: 0;
padding: 0;
}
1.3.5基础选择器总结
基础选择器 | 作用 | 备注 | 用法 |
---|---|---|---|
标签选择器 | 选择出所有的相同标签,例如p、div等 | 使用较多 | p{color :red} |
类选择器 | 可以选出1个或者多个标签 | 使用非常频繁 | .nav{color :red} |
id选择器 | 一次只能选择一个 标签 | 一般和js搭配 | #nav{color :red} |
通配符选择器 | 选择所有的标签 | 特殊情况下会使用 | *{color :red} |
注: 如果是修改样式, 类选择器是使用最多的
2.CSS复合选择器
2.1什么是CSS复合选择器
在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对 基本选择器进行组合形成的。
① 复合选择器可以更准确、更高效的选择目标元素(标签)
② 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的
③常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等
2.2后代选择器(重点)
后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。
元素1 元素2 { 样式声明 }
/*例子:*/
ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */
需要注意的几点:
元素1 和 元素2 中间用空格隔开
元素1 是父级,元素2 是子级,最终选择的是元素2
元素2可以是儿子,也可以是孙子等,只要是元素1 的**后代即可
元素1和元素2 可以是任意基础选择器
2.3子选择器(重要)
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
元素1 > 元素2 { 样式声明 }
/*表示选择元素1里面的所有直接后代(亲儿子)元素2*/
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
注意事项:
元素1 和 元素2 中间用 大于号 隔开
元素1 是父级,元素2 是子级,最终选择的是元素2
元素2 必须是亲儿子,其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器
2.4 并集选择器(重点)
并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
元素1,元素2 { 样式声明 }
/*上述语法表示选择元素1 和 元素2。*/
ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */
注意事项:
元素1 和 元素2 中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明
2.5伪类选择器(掌握)
伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
因为伪类选择器很多,比如有链接伪类、结构伪类等,所以这里先给大家讲解常用的链接伪类选择器。
2.5.1链接伪类选择器
超链接的四种状态
a标签有4种伪类(即对应四种状态),如下:
:link
“链接”:超链接点击之前
:visited
“访问过的”:链接被访问过之后
:hover
“悬停”:鼠标放到标签上的时候
:active
“激活”: 鼠标点击标签,但是不松手时
/*链接点击之前是红色*/
a:link{
color:red;
}
/*链接被访问后是橙色*/
a:visited{
color:orange;
}
/*鼠标悬停,放到标签上的时候是绿色*/
a:hover{
color:green;
}
/*鼠标点击链接,但是不松手的时候是黑色*/
a:active{
color:black
}
需要注意的是,伪类选择器的顺序必须按照lvha的顺序来,否则会达不到想要的效果:
a:link 、a:visited 、a:hover 、a:active
2.6 :focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况 类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
/*下面实现了input元素获得焦点时候,背景颜色变为黄色*/
input:focus {
background-color:yellow;
}
2.7复合选择器总结
选择器 | 作用 | 特征 | 隔开符号及用法 |
---|---|---|---|
后代 选择器 | 用来选择后代元素 | 可以是子孙后代 | 符号是空格 .nav a |
子代选择器 | 选择最近一级元素 | 只选亲儿子 | 符号是大于号 .nav>p |
并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 符号是逗号 .nav,.header |
链接伪类选择器 | 选择不同状态的链接(针对a这个元素的) | 跟链接相关 | a:link 、a:visited 、a:hover 、a:active |
:focus选择器 | 选择获得光标的表单 | 跟表单相关 | input:focus{} |