网页前端CSS之选择器

1.类选择器

以 " . "开头,在<style>标签中使用,在HTML标签中调用的使用使用class属性,使用如下:

<style>

     .red { color : red;}

</style>
<span class="red" > 123 </span> 

2.ID选择器

以 " #  "开头, 在<style>标签中使用,在HTML标签中调用的使用使用class属性,使用如下:

<style>

     #red { color : red;}

</style>
<span id="red" > 123 </span>

PS:类选择器和ID选择器的区别在于类选择器可以重复多次使用,即多个HTML标签使用,ID选择器是唯一的,只能使用一次.

3.通配符选择器(一般不使用,作用范围太广,代表所有选择器)

<style>

     * { color : red;}

</style>

4.伪类选择器

向某些选择器中添加特殊的效果,比如给链接添加效果,鼠标移上变色等

1) 链接伪类选择器 (书写方式:  a:link {})

    :link {} 未访问的链接

    :visted {} 已经访问的链接

    :hover {} 鼠标移动到连接上

    :active {} 选定的链接    

PS: 以上四个伪类选择器的属性不能改变,否则不能正常的显示效果

一般只写鼠标经过就可以了,如下所示:

<style>

     a  {}

     a:hover {}

</style>

PS:要让这些连接发挥作用在其他的html标签上，那么需要这些这些变化的html标签是:hover 的子元素，如下:

<div>
     <span>a </span>
</div>

div:hover span {
  color: red;
}  //让span的中的字发生变化

2) 结构(位置)伪类选择器 (书写方式 : li:first-child {} )

    :first-child  {} 父元素的第一个子元素

    :last-child {} 父元素的最后一个子元素

    :nth-child(n) 父元素的第n个子元素

    :nth-last-child(n) 从最后一个开始数

    PS:n可以是表达式,3n(3的倍数的元素)  或 2n+1(奇数元素) ,另外 n可以是 odd表示奇数,even表示偶数,

3) 目标伪类选择器

选取当前活动的目标元素 ,语法如下:

    :target {}    可以和锚点一起使用,用来强调在哪个锚点区域