WEB学习-CSS基础选择器
- 基础选择器
-
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写的很乱。 现在,我们知道层叠性能比较很多东西: 选择器的写法权重,谁离的近,谁写在下面。