CSS基础选择器
CSS的style标签写在head标签中,它是一个容器级标签。具体代码为:<style type="text/css"></style>
一、标签选择器
每种标签都可以作为标签选择器,包括p、h1、hl、div等。标签选择器选择的是所有的标签而不是某一个标签。
二、id选择器
在style标签中,使用#来选择id。任何的标签都可以有id,id的命名要以字母开头,可以有数字、下划线,大小写严格区别。同一个页面内id不能重复,即使不一样的标签,也不能是相同的id。
三、类选择器
在style标签中,使用.XX来作为类选择器。所谓类,就是class属性。任何标签都可以携带class属性,并且页面中多个标签可以使用同一个class属性。
同一个标签,也可以同时属于多个类。类之间用空格隔开。如;<p class="special normal">XXX</p>。意思就是p标签同时属于special和normal两个类。
CSS高级选择器
一、后代选择器
在style标签中,空格就代表后代。div p就代表div标签中的p标签。
例如:
效果为:
由此可见后代选择器起到了选择div中p标签的作用。
二、交集选择器
交集选择器没有空格,交集选择器一般以标签名为开头,例如:p.special表示同时满足p标签和special类。同时,交集选择器可以连续交,比如p.special#normal这种,也是可行的。
三、并集选择器
并集选择器用逗号表示并集。例如p,h1,就表示p标签与h1标签的并集。
p,h1{
color:red;
}
与
p{
color:red;
}
h1{
color:red;
}
效果一样。
四、通配符
*表示通配符。*{ color:red; }表示页面中的所有元素的颜色为红色。
一些简单的CSS3选择器
一、儿子选择器
儿子选择器从IE7开始兼容。代码是>。它与后代选择器完全不同,儿子选择器只能选择下一级标签,而不是标签内包含的所有元素。
例如:
效果是:
二、序选择器
需选择器可以用来直接选择列表中的某一项,用XX:xx-child来表示序选择器。
例如:
效果为:
CSS的继承性和层叠性
一、继承性
继承性表示当给某个标签设置一些属性时,后代标签都继承了这些属性。
像color、text-decoration、font-size、font-style之类的关于文字样式的属性都可以被继承。所有关于盒子的、定位的、布局的属性都不能继承。
二、层叠性
层叠性,就是CSS处理冲突的能力。CSS通过计算权重来处理冲突问题,这不存在兼容问题。
权重统计需要统计id的数量,类的数量,标签的数量。然后从左到右进行对比。
例如:
当权重一样时,以后出现的为准。
例如:
效果为:
如果不能直接选中某个元素,而是靠继承性影响的话,此时权重为0。当权重都为0时,按照就近原则,即谁描述的近,听谁的。