CSS-选择器及其兼容性_yume_sola的博客-程序员宅基地

技术标签: web前端开发  选择器  

标签选择器

就是用标签名来当做选择器。
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&#8217;container&#8217;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
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yume_sola/article/details/70215695

智能推荐

随便推点