一、什么是选择器?
每一条css样式声明(定义)由两部分组成,形式如下:
选择器{
样式
}
在{}之前的部分是“选择器”,“选择器”是{}中的作用对象,例如:
p{
color:blue;
}
表示字体为红色的样式作用于p选择器。
二、选择器的主要分类:
(1)基础选择器:标签选择器、类选择器、id选择器、通配符选 择器。
(2)组合选择器:标签指定式选择器、后代选择器。
(3)属性选择器
(4)伪类选择器
基础选择器:
标签选择器也叫元素选择器。其实就是 html 代码中的标签,比如 < html >、< body >、< h1 >、< p >、< img >。
语法格式为:
html{
属性1:属性值1;
属性2:属性值2;
...
}
...
类选择器:
类选择器,是对 HTML 标签中 class 属性进行选择。CSS 类选择器的选择符是 “.”。
类选择器命名规范:不能是纯数字,不能是标签名,不建议使用汉字。一般是点+对应样式描述。例如:.header-nav。
基本语法格式如下:
.header{
属性1:属性值1;
属性2:属性值2:;
...
}
id选择器:
id选择器是对HTML标签中id属性进行选择,id选择器的选择符是“#”, 任何元素都可以使用 id 属性设置唯一的 id 名称。这是选择单个元素的最有效的方式。
特别需要注意的是 id 选择器具有唯一性,也就是说同一个 HTML 页面不能有相同的 id 名称(使用多个相同的 id 选择器,浏览器不会报错但是不符合 W3C 标准)。
可以这样理解:一个人的名字(class 类名)可以有很多重名的,但是身份证号(id 名称)只能有一个唯一的,不能重复的。
基本语法格式如下:
#id{
属性1:属性值1;
属性2:属性值2:
...
}
通配符选择器:
通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:
*{
属性1:属性值1;
属性2:属性值2;
}
标签指定式选择器:
标签指定式选择器又称交集选择器,由两个选择器构成,其中一个必须是标签选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器</title>
<style type="text/css">
p{
color:yellow;
}
p.bcg{
background-color:rgb(67, 217, 228);
}
p#one{
background-color: violet;
}
</style>
</head>
<body>
<p class="one">天天向上</p>
<p id="two">我爱学习</p>
</body>
</html>
后代选择器:
后代选择器又叫包含选择器,用来选择元素或者元素的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成了外层标记的后代。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
p > strong {
color: red;
}
</style>
</head>
<body>
<p>
<strong>好好学习</strong>
<strong>好好学习</strong>
</p>
<p>
<em>
<strong>好好学习</strong>
<strong>好好学习</strong>
</em>
</p>
</body>
</html>
并集选择器:
并集选择器就是通过各个选择器用“,”连接而成的,任何形式的选择器(包括标签选择器,类选择器,id选择器等)都可以作为并集选择器的一部分,如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的 CSS 样式。简单记忆为:和的意思。
属性选择器:
属性选择器是根据元素的属性或者属性值来选择元素,常用的集中属性选择器:
伪类选择器:
CSS 伪类用于向某些选择器添加特殊的效果。
几个常用的伪类:
(1):link 应用于未被访问过的链接。IE6 不兼容,解决此问题,直接使用 a 标签。
(2):hover 应用于有鼠标指针悬停于其上的元素。在 IE6 只能应用于 a 连接,IE7+ 所有元素都兼容。
(3):active 应用于被激活的元素,如被点击的链接、被按下的按钮等。
(4):visited 应用于已经被访问过的链接。