元素选择器（Element Selector）
元素选择器真是好用极了！就是CSS3这货里的解码神器，好比个找东西的机器猫，只要告诉它啥玩意儿在哪，立马就能找出HTML里对应的部分，然后给你改个妆容出来。想改N段文本？那就输”p”得了；要换个顶级的标题，那就敲个”h1″，多省事儿啊对不？用了这家伙儿，我们网页上所有元素都能穿同一套衣裳，颜值自然就上去了！
别急我马上跟你说怎么让每段都变成蓝字。这个超简单滴！
css p { color: blue; }
这样就能够快速地将页面中所有的段落文字颜色统一修改为蓝色。
类选择器（Class Selector）
学CSS3得熟悉类选择器！给HTML元素添上class属性，然后在CSS里写对应的样式，就搞定了。如果好几个元素需要同样效果？别急，给它们都打上个通用的class名，这样大家就能统一变身，既简单方便，还不用费脑筋！
p {
color: red;
}
想让所有名叫”highlight”的变成黄颜色吗？快试试看这个方法吧：
.highlight {
background-color: yellow;
在HTML里面，给元素添加个class=”highlight”就能让它变黄。
ID选择器（ID Selector）
这个，你选ID和选择类别没啥区别。主要就是为了标注页面元素，注意同一个页面内ID只能出现一次！如果想改变某个地方的颜色或是大小啥的，那就先用ID给他们贴标签儿，接下来就在CSS中设定对应的形状就OK了！
最简单的办法就是把这个页面的大标题变成红色，而且要调到24个像素那么高！操作如下：
#header {
color: red;
.class1 {
background-color: yellow;
}
font-size: 24px;
这款工具能把名字叫”header”的字变成红色，看起来大了好多倍~
伪类选择器（Pseudo-class Selector）
小伙伴们，CSS3可是炒鸡神奇，有位叫做伪类选择器的助手能够给 HTML 元素穿上美丽服装！像:hover啊、:visited啊、:first-child什么的用得超多哟~我来详细说说这:hover咋回事，只要轻轻将鼠标放在上面，元素就会变得更炫酷了！
比如，想让链接上的字变色为红色的话，就写成这样子吧：
a:hover {
这段代码表示当鼠标悬停在链接上时，链接文字颜色会变成红色。
属性选择器（Attribute Selector）
挑样式，首先要明白HTML元素的特点，接着把它用起来。比如说有title属性的图片，就能借助这个属性找到它们，再给他们加个颜色边框。
#id1 {
font-size: 20px;
}
想让title属性的图片都穿上绿色框架，很简单！只需按照这样做就行啦～
img[title]{
border: 1px solid green;
这段代码会使得带有title属性的图片都拥有绿色边框。
子选择器（Child Selector）
你知道么，小个子的儿子选择器其实蛮强大的，它能找出元素最开始时候（就是第一代的样子）的形态。这就像个侦探，找自家孩子，对外貌不太关心。利用好它的话，我们就可以随心所欲地安排网页每个部分的布局和位置了！
例如，如果我们想要设置列表ul下直接子级li元素的样式：
ul > li {
list-style-type: square;
以上代码会使得ul下直接子级li显示为方形列表符号。
a:hover {
color: red;
}
通配符选择器（Universal Selector）
这个东西用起来真方便，到处都行。但是你得悠着点，比如开全屏的时候，要是太快了，就容易误操作，把不该动的给改了，甚至还可能盖住原本的效果。
举例来说，在某些情况下需要对全局文本字体进行设置时：
*{
用字体 Arial 或 san-serif；
搞定这玩意儿后，网页上的文字就得变成我们熟悉的Arial字体，或者也可以试试用Sans-serif替代。
组合子选择器（Combinator Selector）
到底什么是组合子？简单来说，就是通过各种各样的条件，找出符合需求的那些HTML文件节点。常见的组合子大约就那几种，比如子孙组合子、邻居或哥哥弟弟组合子啥的，当然还有最普通的哥哥弟弟组合子咯。
记得设计导航菜单时，别忘各选项中间留点空间，这样看得更清晰！
img[title] {
border: 1px solid green;
}
nav a + a {
margin-left: 10px;
以上代码表示nav下相邻链接a之间左侧间距为10像素。
关于CSS3选择器，不要只会挑自己要用的那个！灵活运用它们，网页排版和设计起来就容易多~练熟之后，结合实战经验，就能做出高大上且效果赞的网页或网站辣！
评论0