- 基础选择器
-
1 标签选择器 就是标签的名字。 • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style type="text/css"> • span{ • color:red; • } • </style> 注意的是： 1） 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input • ul{ • background-color: yellow; • } 2） 无论这个标签藏的多深，一定能够被选择上： • <ul> • <li> • <ul> • <li> • <ul> • <li> • <ul> • <li> • <p>我是很深的p</p> • </li> • </ul> • </li> • </ul> • </li> • </ul> • </li> • </ul> css： • p{ • color:blue; • } 能够让很深的p变蓝。 3） 选择的所有，而不是一个。 标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”的。 2 id选择器 • <p>我是段落1</p> • <p id="para2">我是段落2</p> • <p>我是段落3</p> css： • <style type="text/css"> • #para2{ • color:red; • } • </style> id选择器的选择符是“#”。 任何的HTML标签都可以有id属性。表示这个标签的名字。 这个标签的名字，可以任取，但是： 1） 只能有字母、数字、下划线 2） 必须以字母开头 3） 不能和标签同名。比如id不能叫做body、img、a 一个HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！ 一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义。
- 类选择器
-
.就是类的符号。类的英语叫做class。 所谓的类，就是class属性，class属性和id非常相似，任何的标签都可以携带class属性。 class属性可以重复，比如，页面上可能有很多标签都有teshu这个类： <h3>我是一个h3啊</h3> <h3 class="teshu">我是一个h3啊</h3> <h3>我是一个h3啊</h3> <p>我是一个段落啊</p> <p class="teshu">我是一个段落啊</p> <p class="teshu">我是一个段落啊</p> css里面用.来表示类： .teshu{ color: red; } 同一个标签，可能同时属于多个类，用空格隔开： <h3 class="teshu zhongyao">我是一个h3啊</h3> 这样，这个h3就同时属于teshu类，也同时属于zhongyao类。 初学者常见的错误，就是写成了两个class： <h3 class="teshu" class="zhongyao">我是一个h3啊</h3> 所以要总结两条： 1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类； 2） 同一个标签可以同时携带多个类。 比如，我们现在要做一个页面： 段落1 段落2 段落3 正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化： <style type="text/css"> .lv{ color:green; } .da{ font-size: 60px; } .xian{ text-decoration: underline; } </style> 每个标签，就去选取自己想要的类： <p class="lv da">段落1</p> <p class="lv xian">段落2</p> <p class="da xian">段落3</p> 也就是说： 1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。 2） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。 到底用id还是用class？ 答案：尽可能的用class，除非极特殊的情况可以用id。 原因：id是js用的。也就是说，js要通过id属性得到标签，所以我们css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。
- 后代选择器
-
<style type="text/css"> .div1 p{ color:red; } </style> 空格就表示后代，.div1 p 就是.div1的后代所有的p。 强调一下，选择的是后代，不一定是儿子。 比如： <div class="div1"> <ul> <li> <p>段落</p> <p>段落</p> <p>段落</p> </li> </ul> </div> 能够被下面的选择器选择上： .div1 p{ color:red; } 所以，看见这个选择器要知道是后代，而不是儿子。选择的是所有.div1“中的”p，就是后代p。 空格可以多次出现。 .div1 .li2 p{ color:red; } 就是.div1里面的后代.li2里面的p。 后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。 后代选择器，描述的是祖先结构。
- 交集选择器
-
h3.special{ color:red; } 选择的元素是同时满足两个条件：必须是h3标签，然后必须是special标签。 交集选择器没有空格。 所以有没有空格 div.red 和 div .red 不是一个意思。交集选择器可以连续交（一般不要这么写）
1 h3.special.zhongyao{
2 color:red;
3 }
交集选择器，我们一般都是以标签名开头，比如div.haha 比如p.special。
- 并集选择器（分组选择器）
-
h3,li{ color:red; } 用逗号就表示并集。 - 通配符*
-
*就表示所有元素。 *{ color:red; } 效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
CSS3选择器的部分了解
- 兼容问题了解
-
IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。 windows xp 操作系统安装的IE6 windows vista 操作系统安装的IE7 windows 7 操作系统安装的IE8 windows 8 操作系统安装的IE9 windows10 操作系统安装的edge 浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。 浏览器的市场占有率： http://tongji.baidu.com/data/ 今天： IE9 5.94% IE8 21.19% IE7 4.79% IE6 4.11% 要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8。 HTML5浏览器打分： http://html5test.com/results/desktop.html
各个浏览器的比较： （http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/）
- 儿子选择器（ > ）
-
IE7开始兼容，IE6不兼容。 div>p{. //注意 没有空格 color:red; } div的儿子p。和div的后代p的截然不同。 能够选择： <div> <p>我是div的儿子</p> </div> 不能选择： <div> <ul> <li> <p>我是div的重孙子</p> </li> </ul> </div>
- 序选择器
-
IE8开始兼容；IE6、7都不兼容 选择第1个li： <style type="text/css"> ul li:first-child{ color:red; } </style> 选择最后一个1i： ul li:last-child{ color:blue; } 由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名： <ul> <li class="first">项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li class="last">项目</li> </ul> 用类选择器来选择第一个或者最后一个： ul li.first{ color:red; } ul li.last{ color:blue; }
- 下一个兄弟选择器
-
IE7开始兼容，IE6不兼容。 +表示选择下一个兄弟 <style type="text/css"> h3+p{ color:red; } </style> 选择上的是h3元素后面紧挨着的第一个兄弟。 <h3>我是一个标题</h3> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <h3>我是一个标题</h3> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <h3>我是一个标题</h3> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <h3>我是一个标题</h3> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。
- 继承性
-
有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。 哪些属性能继承？ color、 text-开头的、line-开头的、font-开头的。 这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。 所以，如果我们的页面的文字，都是灰色，都是14px。那么就可以利用继承性： body{ color:gray; font-size:14px; } 继承性是从自己开始，直到最小的元素。
- 层叠性
-
层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！ 当选择器，选择上了某个元素的时候，那么要这么统计权重： id的数量，类的数量，标签的数量 不进位，实际上能进位（奇淫知识点：255个标签，等于1个类名）但是没有实战意义！ 如果权重一样，那么以后出现的为准： 如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。 如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。 权重问题大总结： 1） 先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，听后写的为准。 2） 如果没有选中，那么权重是0。如果大家都是0，就近原则。
- !important标记
-
<style type="text/css"> p{ color:red !important; } #para1{ color:blue; } .spec{ color:green; } </style> important是英语里面的“重要的”的意思。我们可以通过语法： k:v !important; 来给一个属性提高权重。这个属性的权重就是无穷大。 一定要注意语法： 正确的： font-size:60px !important; 错误的： font-size:60px; !important; → 不能把!important写在外面 font-size:60px important; → 不能忘记感叹号 !important需要强调3点： 1） !important提升的是一个属性，而不是一个选择器 p{ color:red !important; → 只写了这一个!important，所以就字体颜色属性提升权重 font-size: 100px ; → 这条属性没有写!important，所以没有提升权重 } #para1{ color:blue; font-size: 50px; } .spec{ color:green; font-size: 20px; } 所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）; 2） !important无法提升继承的权重，该是0还是0 比如HTML结构： <div> <p>哈哈哈哈哈哈哈哈</p> </div> 有CSS样式： div{ color:red !important; } p{ color:blue; } 由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。 干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。 3）!important不影响就近原则 如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？ 答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。 ! important做站的时候，不允许使用。因为会让css写的很乱。 现在，我们知道层叠性能比较很多东西： 选择器的写法权重，谁离的近，谁写在下面。