参考网站

http://blog.csdn.net/yume_sola/article/details/70215695

http://www.youdiancms.com/jianrong/614.html

标签选择器

就是用标签名来当做选择器。 
1 、所有标签都能够当做选择器,比如body、h1、dl、ul、span等等 
2 、不管这个标签藏的多深,都能够被选择上。 
3 、选择的是所有的,而不是某一个。所以是共性,而不是特性。

希望页面上所有的超级链接都没有下划线:

        a{
/*去掉下划线:*/
text-decoration: none;
}

id选择器(#X)

#表示选择id,在选择器中使用#可以用id来定位某个元素。然后使用的时候需要问自己一下:我是不是必须要给这个元素来赋值个id来定位它呢?

id选择器是很严格的并且你没办法去复用它。

#pp{
color:black;
}

(1)任何的标签都可以有id,id的命名要以字母开头,可以有数字、下划线。大小写严格区别,a和A是两个不同的id。 
( 2)同一个页面内id不能重复,即使不一样的标签,也不能是相同的id。 
也就是说,如果有一个p的id叫做p1,这个页面内,其他所有的元素的id都不能叫做p1。

兼容性

IE6+

Firefox

Chrome

Safari

Opera

类选择器(.X)

.p {
color: red;
}

总结:

( 1) class可以重复,也就是说,同一个页面上可能有多个标签同时属于某一个类; 
( 2) 同一个标签可以同时携带多个类 
这是个class选择器。它跟id选择器不同的是,它可以定位多个元素。当你想对多个元素进行样式修饰的时候就可以使用class。当你要对某个特定的元素进行修饰那就是用id来定位它。 
( 3) 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。 
( 4) 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。 
( 5 )尽可能的用class,除非极特殊的情况可以用id。 
原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。 
兼容性

IE6+

Firefox

Chrome

Safari

Opera

后代选择器( X Y)

    <style type="text/css">
.div1 p{
color:red;
}
</style>

空格就表示后代,.div1 p 就是.div1的后代所有的p。 
强调一下,选择的是后代,不一定是儿子。 
空格可以多次出现。

        .div1 .li2 p{
color:red;
}

选择的就是.div1里面的后代.li2里面的p。

当要把某一个部分的所有的什么内容,进行样式改变,就要想到后代选择器。

兼容性

IE6+

Firefox

Chrome

Safari

Opera

交集选择器

h3.special{
color:red;
}

选择的元素是同时满足两个条件:必须是h3标签,然后必须是special标签。 
交集选择器没有空格。所以有没有空格div.red和div .red不是一个意思。

注意:交集选择器,我们一般都是以标签名开头,比如div.haha 比如p.special。

并集选择器(分组选择器)

h3,li{
color:red;
}

用逗号就表示并集。

儿子选择器(X>Y)

IE7开始兼容,IE6不兼容。

div>p{
color:red;
}

div的儿子p。和div的后代p的截然不同。 
能够选择:

<div>
<p>我是div的儿子</p>
</div>

不能选择:

<div>
<ul>
<li>
<p>我是div的重孙子</p>
</li>
</ul>
</div>
例如
div#container > ul {
border: 1px solid black;
}

X YX > Y的差别就是后面这个指挥选择它的直接子元素。看下面的例子:

<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>

#Container > ul只会选中id’container’div下的所有直接ul元素。它不会定位到如第一个li下的ul元素。 
由于某些原因,使用子节点组合选择器会在性能上有许多的优势。事实上,当在JavaScript中使用css选择器时候是强烈建议这么做的。

兼容性

IE7+

Firefox

Chrome

Safari

Opera

序选择器

选择第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;
}

IE8开始兼容;IE6、7都不兼容

下一个兄弟选择器

+表示选择下一个兄弟

<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>

IE7开始兼容,IE6不兼容。

CSS的继承性和层叠性

继承性

有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。

能继承的属性:color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的,都能够继承; 所有关于盒子的、定位的、布局的属性都不能继承。继承性是从自己开始,直到最小的元素。

层叠性

就是css处理冲突的能力。 所有的权重计算,没有任何兼容问题!

权重问题大总结: 
1) 先看有没有选中元素,如果选中了,那么以(id数,类数,标签数)来计权重。谁大听谁的。如果都一样,听样式后写的为准。 
2) 如果没有选中,那么权重是0。如果大家都是0,就近原则。 

下列都是IE6兼容的选择器:


p
#box
.spec
div.box
div .box
div , .box
*

下列都是IE7开始兼容:

div>p
div+p

下列都是IE8开始兼容:

div p:first-child
div p:last-child

CSS 选择器的兼容性的更多相关文章

  1. CSS选择器的兼容性

    CSS 1 CSS2.1 CSS3 :hover 在IE6中只有a元素可用.E:empty 貌似在webkit核心浏览器中有些小bug.如果这个bug依然存在,不太确定如何测试.IE6不支持.clas ...

  2. 目前最全的浏览器/CSS选择器兼容性总结(2009-8-10更新)

    2009年2月24日,Safari 4.0 beta版正式发布,Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3).不过为了方便大家的工作,下面提供了最新版本的CSS选 ...

  3. 总结30个CSS选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  4. CSS选择器和jQuery选择器的区别与联系之一

    到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...

  5. CSS选择器实现搜索功能 驱动过滤搜索技术

    一.CSS选择器可以用来实现搜索功能 CSS选择器可以用来实现搜索功能. 作者以前提过CSS3的选择器结合表单元素可以用来控制元素的显隐,这里,类似的,还是CSS3的选择器,用来过滤和搜索页面元素. ...

  6. 30个最常用css选择器解析(zz)

    你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...

  7. css选择器分类

    css选择器大致可以分为10大类: 1.元素选择器 如:p{} 2.类选择器 如:.xx{} 3.ID选择器 如:#xx{} 4.关联选择器 如:p a{} 5.子元素选择器 如:p>a{} 6 ...

  8. 30类css选择器

    大概大家都知道id,class以及descendant选择器,并且整体都在使用它们,那么你正在错误拥有更大级别的灵活性的选择方式.这篇文章里面提到的大部分选择器都是在CSS3标准下的,所以它们只能在相 ...

  9. 30个最常用css选择器解析

    转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远 ...

随机推荐

  1. KVM虚拟化图

  2. day16 Python map函数

    num_l=[1,2,10,5,3,7] #lambda x:x+1 # def add_one(x): # return x+1 #lambda x:x+1 # def reduce_one(x): ...

  3. Vue2 第三天学习

    个人小总结:1年多没有写博客,感觉很多知识点生疏了,虽然工作上能解决问题,但是当别人问到某个知识点的时候,还是迷迷糊糊的,所以坚持写博客是硬道理的,因为大脑不可能把所有的知识点记住,有可能某一天忘了, ...

  4. 3.0+百度地图在地图初始化的时候就弹框展示一个信息框,而不是用户点击poi时才弹出

    有些时候我们会有这样的业务:当用户根据地址跳转到地图后,希望能够立即弹框展示该poi的地址信息. 实现方法: 百度地图3.0+的类BaiduMap中提供了一个方法showInfoWindow(Info ...

  5. UOJ14 DZY Loves Graph 并查集

    传送门 题意:给出一张$N$个点,最开始没有边的图,$M$次操作,操作为加入边(边权为当前的操作编号).删除前$K$大边.撤销前一次操作,每一次操作后询问最小生成树边权和.$N \leq 3 \tim ...

  6. el取bean 对象属性规则

    1,去map  根据map key 2,取bean中属性 根据get方法,getaaa() getAaa() ${xxx.aaa}可以取到此方法. ${xxx.Aaa}报错

  7. odoo 11导入外部数据过程记录

    在开发过程中,遇见需要将SQL Server中的数据转移到Pg数据库的情况,那么如何做才能解决这一问题呢? 1.自己写代码,将数据从SQL Server到PG. 2.利用odoo自带的导入功能导入. ...

  8. React 开发注意事项

    引用自定义组件的时候,组件名称首字母大写 import CustomComponent from "./customComponent "; render(){ return ( ...

  9. 6大爱上react 的理由

    本文翻译自:https://blog.syncano.io/reactjs-reasons-why-part-1/ 书写javascript 更加简单 (⚠️js 中混用html 也一直是外界所诟病的 ...

  10. HDU-6440-费马小定理

    亏我前几天还学数论呢...没有深入研究费马小定理这个东西...做事情一定要静下心来啊... 题目要求满足(m+n)^p=m^p+n^p,要你定义一个封闭的新的加法和乘法运算 我们知道费马小定理中有两种 ...