<学习CSS>第二天笔记-选择器（标签选择器、类选择器、css命名规范、谷歌案例、多类名选择器、id选择器、通配符选择器、伪类选择器）

四、选择器

要想将CSS样式应用于持定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分则成为选择器（选择符）。

（一）标签选择器（元素选择器）
标签选择器是只用于HTML标签名作为选择器，按标签名分类，为页面中某一类标签指定统一的css样式。
基本语法格式：

标签名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

或
元素名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
（标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。）

（二）类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名
语法格式：
.类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用时用class=”类名”即可

例：
类选择器示例代码图

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

（三）CSS命名规范
*小技巧：①长名称或词组可以使用”-“中横线来为选择器命名；
②不建议使用”_“下划线来命名css选择器；
（浏览器兼容问题‘比如使用_tips的选择器命名，在IE6中是无效的’
能良好区分Java Script变量命名，JS变量命名是用”_“下划线）
③不要纯数字、中文等命名，尽量使用英文字母来表示。

（四）谷歌案例

谷歌案例代码图

谷歌案例效果图

（五）多类名选择器
我们可以给标签指定多个类名，从而达到更多的选择目的
*注意
①样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关；
②各个类名中间用空格隔开。
例：

多类名选择器实例代码图

多类名选择器实例效果图

（六）id选择器
id选择器使用”#“进行标识，后面紧跟id名。
其语法格式：

#id名 {属性1: 属性值1; 属性2: 属性值2；}

该语法格式中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应文档中某一个具体的元素。（用法基本和类选择器相同）

id选择器示例代码图

（七）id选择器和类选择器的区别
W3C标准规定，在同一页面中，不允许有相同的id对象出现，但允许相同名字的class。
类选择器，好比人的名字，是可以多次重复出现使用的；
id选择器，好比人的身份证号码，是唯一的，不得重复的，只能使用一次。

*总结：类选择器和id选择器的区别在于使用次数上。

（八）通配符选择器 [用的比较少，了解一下]
通配符选择器用*表示，*代表所有的选择器。
语法格式：

* { 属性1: 属性1; 属性值2: 属性值2; }

通配符选择器示例代码图

（九）伪类选择器

【1】链接伪类选择器
:link （未访问的链接）
:visited （已访问的链接）
:hover （鼠标移动到链接上）
:active （选定的链接 [当我们点击鼠标未松开时的显示状态] ）

*注：写的时候顺序不能颠倒，必须按照 l v h a 的顺序写。

链接伪类选择器实例代码图

链接伪类选择器的简写方式：

链接伪类选择器简写方式实例代码图

【2】结构伪类选择器（css3）
:first-child：（选取属于其父元素的首个子元素的指定选择器）
:last-child：（选取属于其父元素的最后一个子元素的指定选择器）
:nth-child(n)：（匹配属于其父元素的第n个子元素，不论元素的类型， even’偶数’、odd’奇数’、n ‘从0开始’ 、2n就是0/2/4/6…..、3n就是/3/6/9……）
:nth-last-child(n)：（选择器匹配属于起父元素的滴n个子元素的每一个元素，不论元素的类型，从最后一个子元素开始计数，n可以是数字、关键词或公式）



结构伪类选择器示例代码图

【3】目标伪类选择器
:target 目标伪类选择器：选择器可以用于选取当前活动的目标元素。
例：

<style>:target {        color: red;        font-size: 30px;}</style>