在学习了css的基本语法之后,今天我跟大家聊一下CSS选择器的分类以及使用方法

css的选择器分为6大类,分别是群组选择器,类选择器,ID选择器,全局选择器,标签选择器,后代选择器

首先我们来看一下群组选择器,之前再跟大家聊CSS基础的时候,我们已经使用过了群组选择器,群组选择器标签之间用都逗号隔开,格式如下

<style type="text/css">
	h1,h2,h5,b{font-size: 30px}/* 这是一个群组选择器*/
</style>

标签选择器中间用逗号隔开,代码以及示例如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之CSS标签选择器</title>
<style type="text/css">
      h1,h2,h5,b{font-size: 30px}/* 这是一个标签选择器*/
    </style>
</head>
<body>
<h1>出师表</h1>
<h2>诸葛亮</h2>
<h3>诸葛亮</h3>
<h4>诸葛亮</h4>
<h5>诸葛亮</h5>
<p>先帝创业未半而中道崩殂,今天下三分,益州疲弊,<b>此诚危急存亡之秋也。</b><br/>
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。<br/>
<b>亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。</b><br/>
<b>臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。</b></p><br/>
<p>先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。<br/>
后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。</p><br/>
<p>今当远离,临表涕零,不知所言。</p><br/>

</body>
</html>

如果我们要对网页内的所有元素使用一种样式,我们可以使用全局选择器

*{colour:red;}/*这是一个全局选择器*/

style标签内的标签选择器包含的内容,在页面内使用该标签的内容都会引用该样式。

下来跟大家聊一下类选择器,首先我们要为标签添加一个class属性,属性值大家可以自定义,然后我们通过选择  .属性

  这种格式来实现类选择器,格式演示如下

    <style type="text/css">
           .ccava{color: #8600FF;}
    </style>
</head>
<body>
	<h1>出师表</h1>
	<h2 class="ccava">诸葛亮</h2>

下面大家来看一段演示与效果图,同一个元素我们也可以使用多个类,类之间用空格隔开,class值是区分大小写的

	<style type="text/css">
	       /* h1,h2,h5,b{font-size: 30px}这是一个标签选择器 */
           .ccava{color: #8600FF;}
           .one{color: #46A3FF;}
           h5.ccava{font-size:50px;}/*只有标签为h5的class样式才会使用字体为50px的样式*/
    </style>
</head>
<body>
	<h1>出师表</h1>
	<h2 class="ccava">诸葛亮</h2>
	<h3>诸葛亮</h3>
	<h4>诸葛亮</h4>
	<h5 class="ccava one">诸葛亮</h5><!--类之间用空格隔开,只能引用类选择器的样式-->

ID选择器,ID选择器和类选择器的使用方法基本一样,但是大家注意类选择class我们前面是用小点(.class),但是ID选择器前面我们是用#号(#ava),ID 选择器具有唯一性,并不能像class一样使用在多个标签内。ID选择器的值是区分大小写的

标签选择器给某一个标签设置一个样式,这个我就不举例了只要给样式前加上网页内对应的标签即可

a{color:blue;}/*这就是给a标签加上一个蓝色的样式*/

最后一个就是后代选择器,这里我们需要了解一个基本概念,那就是父与子的关系,以及祖宗和后代的关系,相同的元素之间,我们叫做兄弟元素

我身为一名画家,我会用我形象的技艺来给大家展示这段关系

后代选择器之间是用空格隔开的,我来举例给大家说明,下面我们给所有p标签下的b标签做一个颜色的样式

	<style type="text/css">
         p b{color: #80FFFF;}/*标签要用空格隔开*/
         h2.ccava b{color: blue}/*这里大家注意空格h2.ccava与b标签中间的空格*/
    </style>
</head>
<body>
	<h1 id="ava">出师表</h1>
	<h2 class="ccava"><b>诸葛亮</b></h2>
	<h3>诸葛亮</h3>
	<h4>诸葛亮</h4>
	<h5 class="ccava one">诸葛亮</h5><!--类之间用空格隔开,只能引用类选择器的样式-->
<p>先帝创业未半而中道崩殂,今天下三分,益州疲弊,<b>此诚危急存亡之秋也。</b><br/>
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。</p><br/>
<p><b>亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。</b></p><br/>
<p><b>臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。</b></p><br/>
<p>先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。<br/>
后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。</p><br/>
<p>今当远离,临表涕零,不知所言。</p><br/>

还有一类就是伪类,因为在某些情况下,我们并不能用标签,ID,class以及其它属性来控制一些内容的样式,所以这个时候我们就要用到伪类。比如a标签内的连接效果,连接伪类有4种状态,激活状态,已访问状态,未访问状态也,鼠标悬停状态

连接伪类(数字代表优先级)
伪类说明
:link(1)未访问的连接
:visited(2)已访问的连接
:hover(3)鼠标悬停状态
:active(4)激活的连接

:hove用于访问的鼠标经过某个元素时,:active用于某一个元素被激活时(鼠标按下以后松开以前)

IE6以及更早的版本支持<a>标签的四种状态,IE6浏览器不支持其它元素的:hover和:active,虽然现在可能没有人用IE6了。

下面给大家附上演示以及代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>漫步白月光之CSS标签选择器</title>
<style type="text/css">
   /* h1,h2,h5,b{font-size: 30px}这是一个标签选择器 */
        /* .ccava{color: #8600FF;}
           .one{color: #46A3FF;}
           h5.ccava{font-size:50px;}只有标签为h5的class样式才会使用字体为50px的样式*/
        /* #ava{color: red} */
        /* p b{color: #80FFFF;}标签要用空格隔开*/
        /*  h2.ccava b{color: blue}这里大家注意空格h2.ccava与b标签中间的空格*/
        a:link{color:#8600FF;}/*未访问状态*/
        a:visited{color:#BEBEBE;}/*已访问状态*/
        a:hover{color:#28FF28;}/*鼠标悬停状态*/
        a:active{color:#E8FFC4;}/*激活状态*/
        p:hover{color: red}
    </style>
</head>
<body>
<h1 id="ava">出师表</h1>
<h2><b>诸葛亮</b></h2>
<h3>诸葛亮</h3>
<h4>诸葛亮</h4>
<h5 class="ccava one">诸葛亮</h5><!--类之间用空格隔开,只能引用类选择器的样式-->
<p>先帝创业未半而中道崩殂,今天下三分,益州疲弊,<b>此诚危急存亡之秋也。</b><br/>
然侍卫之臣不懈于内,忠志之士忘身于外者,盖追先帝之殊遇,欲报之于陛下也。</p><br/>
<p><b>亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所以倾颓也。</b></p><br/>
<p><b>臣本布衣,躬耕于南阳,苟全性命于乱世,不求闻达于诸侯。</b></p><br/>
<p>先帝不以臣卑鄙,猥自枉屈,三顾臣于草庐之中,咨臣以当世之事,由是感激,遂许先帝以驱驰。<br/>
后值倾覆,受任于败军之际,奉命于危难之间,尔来二十有一年矣。</p><br/>
<p>今当远离,临表涕零,不知所言。</p><br/>
     <a href="https://www.ccava.net/" target="_blank">漫步白月光</a>
</body>
</html>

大家可以自己调整链接伪类的顺序,测试一番就会得到以下结论

1,a:hover必须置于a:link和a:visited之后才有效

2,a:hover必须置于a:hover之后才有效

3,伪类名称对大小写不敏感