CSS选择器

CSS选择器
要想将CSS样式应用于特定的html元素中，首先需要找到目标元素。在css中，执行这一任务的样式规则部分被称为选择器或者选择符。

标签选择器（元素选择器）

标签选择器是指用html标签作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式。基本语法如下

标签名：{属性1：属性值；属性2：属性值2} 或者
元素名：{属性1：属性值；属性2：属性值2}

选择器的最大优点是能快速为页面同一类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，基本语法如下

.类名：{属性1：属性值；属性2：属性值2}

标签调用的时候class=“类名” 即可。
类选择器的最大优势是可以为元素对象定义单独或相同的样式。

多类名选择器

多类名class可以多个叠加，适用于较为复杂的页面情况，搭配自由，也可以配合js使用。
示例

<div class=”c_c j_c”></div>

以上c_c 和 j_c是两个class，可以分别进行样式操作，有些js运用这些class实现效果。

id选择器

类选择器使用“#”（进行标识，后面紧跟id名，基本语法如下

#id：{属性1：属性值；属性2：属性值2}

基本用法与类选择器相同。
id是唯一的，只能用于某一个具体的元素，和类名选择器的适用范围不一样，通常情况下搭配使用效果更好。

id选择器和类选择器的区别

在同一个html页面中，只能使用一个id，不能重复。
class可以重复使用。
class更像是姓名，id更像是身份证号码。

通配符选择器

通配符选择器用“*”号表示，是所有选择器中作用范围最广的，能匹配页面中的所有元素。
基本语法如下

*：{属性1：属性值；属性2：属性值2}

星号代表的是所有的标签，可以匹配页面中的所有元素。因为其使用范围过于广泛，影响过大，在实际运用中很少用到。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊的效果。
伪类选择器是用“:”冒号隔开

1、链接伪类选择器
伪类选择器中的链接选择器，主要针对于 a

:link		/*未访问的链接*/
:visited		/*已访问的链接*/
:hover		/*鼠标移动到链接上*/
:active		/*选定的链接 当我们点击别松开鼠标 显示的状态*/

注意在写的时候，尽量不要颠倒顺序 lvha
示例

a:link{
color:gray;
}
a:visited{
clolor:red;
}
a:hover{
color:blue;
}
<a href=“#”>链接</a>

【链接伪类选择器的简写】
在实际运用中，用不上这么复杂的效果，一般采用简写，很多不变化的属性都不写。、
示例：

a{	/*a是标签选择器，所有的链接*/
	font-size:16px;
	color:gray;
}
a:hover{		/*:hover 是链接伪类选择器 鼠标经过*/
	color:red;	
}
<a href=“#”>链接</a>

2、结构(位置)伪类选择器 (CSS3)
:first-child:选取属于其父元素的首个子元素的指定选择器。
:last-child: 选取属于其父元素的最后一个子元素的指定选择器。
:nth-child(n):匹配属于其父元素的第N个元素，不论元素的类型even偶数 odd奇数 n从0开始
:nth-last-chiid(n):选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数，n可以是数字、关键词或公式。
示例：

li:first-child { /*选第一个*/
	color:red;
}
li:last-child { /*选最后一个*/
	color:red;
}
li:nth-child(2) { /*选第二个*/
	color:red;
}


<ul>
<li>第一个</li>
<li>第二个</li>

</ul>

注意！！！
:nth-child(n) 中
参数可以用even或者odd 来选中所有的奇数和偶数
参数用 n 选中从0开始的所有元素
参数用2n 则选择所有的偶数
参数用2n+1 则选择所有奇数
参数用3 则选择所有3的倍数，依次类推

:nth-last-chiid(n): 则是相反的效果，是从下往上数，具体的用法相同
3、目标伪类选择器
:target目标伪类选择器：选择器可用于选取当前活动的目标元素

通俗解释：给页面上当前正被选中的目标元素，提供一个样式。
示例：
执行以下代码，点击a标签，目标p段落改变为红色。

<style>
:target{
	color:red;
}
</style>
<a href=”#mb”>点击跳转到目标元素</a>
<p id=”mb”>目标div</p>