CSS选择器
■ 定义
根据不同的需求把不同的标签选出来，简单来说，就是选择标签用的
■ 选择器的分类
选择器有以下分类
▶ 基础选择器(由单个选择器组成)
▷ 标签选择器
▷ 类选择器
▷ id选择器
▷ 通配符选择器
▶ 复合选择器
▷ 后代选择器
▷ 子选择器
▷ 并集选择器
▷ 伪类选择器
➤ 链接伪类选择器
➤ :focus伪类选择器
■ 标签选择器
□ 定义
是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式
□ 使用说明
标签选择器可以把某一类标签全部选择出来
比如div {...} 会把所有的<div>标签选择出来，span {...}会把所有的<span>标签选择出来
语法：
标签名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; ... }
示例
p { color: red; } div { color: green; }
<p>文字1</p> <!-- 红色字体--> <p>文字2</p> <!-- 红色字体--> <p>文字3</p> <!-- 红色字体--> <div>文字4</p> <!-- 绿色字体--> <div>文字5</p> <!-- 绿色字体--> <div>文字6</p> <!-- 绿色字体-->
□ 总结
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签
■ 类选择器
□ 定义
如果想要差异化地单独选择一个或某几个不同的标签，可以使用类选择器
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."显示
□ 使用说明
类选择器使用"."进行标识，后面紧跟类名，类名是自定义的
语法：
.类名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; ... }
<标签 class="类名"> </标签>
关于命名：
不能跟标签名重复，如.div, .span是不允许的
长名称或词组可以使用中下划线"_"来为选择器命名，如.user_name，single_star
尽量使用英文字母来表示,不要使用纯数字，中文等命名
命名要有意义，尽量使别人一眼就知道这个类名的目的
遵守一些约定俗成的命名规范，如导航栏的命名通常为nav，数量的命名通常为cnt等
□ 示例
.red { color: red; }
<ul> <li class="red">冰雨</li> <!--字体为红色--> <li>来生缘</li> <li>李香兰</li> <li class="red">生僻字</li> <!--字体为红色--> ... </ul> <div class="red">我也是红色</div> <!--字体为红色-->
□ 多类名
可以给一个标签指定多个类名，从而将多个类的样式叠加到该标签
◆ 使用说明
类名之间使用空格分隔
语法：
<标签 class="类名1 类名2 ...">...</标签>
简单理解，就是给某个标签添加了多个类的样式，从而节省CSS代码，统一修改也非常方便
可以把一些标签元素相同的样式(共同部分)放到一个公共类里面，这样这些标签都可以先调用这个公共类，然后再调用自己独有的类
多类名选择器在后期布局比较复杂的情况下，还是较多使用
◆ 示例
.red { color: red; } .font35 { font-size: 35px; }
<div class="red font35">刘德华</div>
■ id选择器
□ 定义
通过元素id选择标签的
□ 使用说明
id选择器可以为标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义
注：id属性只能在每个HTML文档中出现一次
语法：
#id { 属性:属性值; ... }
□ 示例
#pink { color: pink; }
<div id="pink" >迈克尔.杰克逊</div> <div id="pink" >刘德华</div> <!--错误，id="pink"只能调用一次-->
□ id选择器和类选择器的区别
类选择器好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
id选择器好比人的身份证号码，是唯一的
id选择器和类选择器最大的不同在于使用次数上
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和js搭配使用
■ 通配符选择器
□ 定义
在CSS中，通配符选择器使用"*"定义，它表示选取页面中所有元素(标签)
□ 使用说明
通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况下才使用
语法：
* { 属性: 属性值; ... }
□ 示例
* { color: red; <!-- 所有标签的颜色都改为红色--> }
■ 基础选择器总结
▶ 标签选择器
作用：可以选出所有相同的标签
特点：不能差异化选择
使用情况：使用情况较多
用法：p {color: red;}
▶ 类选择器
作用：可以选出1个或多个标签
特点：可以根据需求选择
使用情况：使用情况非常多
用法：.nav {color:red;}
▶ id选择器
作用：一次只能选择一个标签
特点：ID属性只能在每个HTML文档中出现一次
使用情况：一般和js搭配使用
用法：#nav {color:red;}
▶ 通配符选择器
作用：选择所有的标签
特点：选择的太多，有部分不需要
使用情况：特殊情况使用
用法：* {color:red;}
注：如果是修改样式，类选择器是使用最多的
■ 后代选择器
□ 定义
后代选择器用于选择父元素里面子元素，后代选择器又称为包含选择器
□ 使用说明
语法：
元素1 元素2 {样式声明}
语法说明：
▶ 元素2是元素1的后代元素(儿子，孙子，曾孙子...)
▶ 元素1和元素2之间用空格分隔
▶ 元素1只是起到定位作用，不参与样式改变，即元素1里的其他元素不会改变
▶ 元素1是父级，元素2是子级，最终选择的是元素2
▶ 如果要选择元素2的后代，则可写成元素1 元素2 元素3 ... 依次是前一个元素的后代
▶ 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
▶ 元素1和元素2可以是任意基础选择器
□ 示例
ol li { color: red; } ul li { color: green; } ul li a { color: yellow; } .nav li a { color: blue; }
<ol> <li>我是ol的孩子</li> <!--红色--> <li>我是ol的孩子</li> <!--红色--> <li>我是ol的孩子</li> <!--红色--> </ol> <ul> <li>我是ol的孩子</li> <!--绿色--> <li>我是ol的孩子</li> <!--绿色--> <li>我是ol的孩子</li> <!--绿色--> <li><a href="#">我是ol的孙子</a></li> <!-- 黄色--> </ul> <ul class="nav"> <li>我是ol的孩子</li> <!--绿色--> <li>我是ol的孩子</li> <!--绿色--> <li>我是ol的孩子</li> <!--绿色--> <li><a href="#">我是ol的孙子</a></li> <!--蓝色--> </ul>
■ 子选择器
□ 定义
子选择器用于选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素
□ 使用说明
语法：
元素1>元素2 {样式声明}
语法说明：
▶ 表示选择元素1里面的所有直接后代(子元素)元素2
▶ 元素1和元素2中间用大于号隔开
▶ 元素1是父级，元素2是子级，最终选择的是元素2
▶ 元素2必须是亲儿子，其孙子，重孙子之类都不归他管，也可以叫亲儿子选择器
□ 示例
.nav>a { color: red; }
<div class="nav"> <a href="#">我是儿子</a> <--红色--> <p> <a href="#">我是孙子</a> <--不变色--> </p> </div>
■ 并集选择器
□ 定义
并集选择器用于选择多组标签，同时为它们定义相同的样式
□ 使用说明
并集选择器通常用于集体声明
语法：
元素1,元素2 {样式声明}
语法说明：
▶ 上述语法表示选择元素1和元素2
▶ 元素1和元素2中间用逗号分隔，逗号可以理解为和的意思
▶ 任何形式的选择器都可以作为并集选择器的一部分
□ 示例
div, p, .pig li { color: pink; }
<div>熊大</div> <!--粉色--> <p>熊二</p> <!--粉色--> <span>光头强</span> <ul class="pig"> <li>小猪佩奇</li> <!--粉色--> <li>猪爸爸</li> <!--粉色--> <li>猪妈妈</li> <!--粉色--> </ul>
■ 关于伪类选择器
□ 定义
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
□ 使用说明
伪类选择器书写最大的特点是用冒号(:)表示，比如:hover,:first-child
伪类选择器很多，比如有链接伪类，结构伪类等
■ 链接伪类选择器
□ 链接伪类选择器的分类
▶ a:link
选择所有未被访问的链接
▶ a:visited
选择所有已被访问的链接
▶ a:hover
选择鼠标指针位于其上的链接
▶ a:active
选择活动链接(鼠标按下未弹起的链接)
□ 使用说明
链接伪类选择器注意事项：
▶ 为了确保生效，请按照LVHA的循环顺序声明：:link :visited :hover :active，否则会失效
▶ 因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
链接伪类选择器实际开发中的写法：
通常来讲，仅仅是页面初期显示一个颜色，鼠标悬停经过为另外一个颜色，无需其他样式
a { color: gray; text-decoration: none; } a:hover { color: red; text-decoration: underline; }
□ 示例
a:link { color: black; text-decoration: none; } a:visited { color: orange; text-decoration: none; } a:hover { color: skyblue; text-decoration: none; } a:active { color: green; text-decoration: none; }
<a href="#">小猪佩奇</a> <!-- 初期显示时，字体是黑色--> <!-- 点击过链接后，字体是橘色--> <!-- 鼠标悬停在链接上时，字体是天蓝色--> <!-- 鼠标点击链接但为松开时，字体是绿色-->
■ :focus伪类选择器
□ 定义
:focus伪类选择器用于选取获得焦点的表单元素
□ 使用说明
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说
□ 示例
input:focus { background-color: yellow; color: red; }
<input type="text"> <!-- 获取光标后，背景色变为黄色,字体变红色; 光标离开后，背景色变为无，字体变为黑色-->
■ 复合选择器总结
▶ 后代选择器
作用：用来选择后代元素
特征：可以是子孙后代
使用情况：较多
隔开符号及用法：符号是空格，如.nav a
▶ 子选择器
作用：选择最近一级元素
特征：只选亲儿子
使用情况：较少
隔开符号及用法：符号是大于，如.nav>p
▶ 并集选择器
作用：选择某些相同样式的元素
特征：可以用于集体声明
使用情况：较多
隔开符号及用法：符号是逗号，如.nav,div
▶ 链接伪类选择器
作用：选择不同状态的连接
特征：跟链接相关
使用情况：较多
隔开符号及用法：重点记住a{}和a:hover 实际开发的写法
▶ :focus选择器
作用：选择获得光标的表单
特征：跟表单相关
使用情况：较少
隔开符号及用法：input:focus 记住这个语法
