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 记住这个语法