css选择器

来源：互联网发布：网络夏令营编辑：程序博客网时间：2024/06/15 19:36

css选择器

1.类选择器

<1>. 是类的符号。所谓的类，就是class属性.
<2>任何标签都可以携带class属性。
<3>class属性可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类。
<4>同一个标签可能属于多个类，用空格隔开。

<h3 class=“teshu  zhongyao”>我是一个h3</h3>

<5>在id和class中尽可能使用class。
原因：id 是js用的。js要用id属性得到标签。另外一个层面，我们会认为有id属性的页面，有动态效果。
<6>类上样式，id上行为。

2.标签选择器：p{ }

3.id选择器：#box{ }

4.css高级选择器

4.1后代选择器

    <style>        .div1 p{            color: pink;        }    </style>

<1>空格就表示后代，.div1 p就是div1后代的所有p.
<2>空格可以多次出现。

4.2 交集选择器

<1>选择的元素是同时满足两个条件，没有空格。

h3.special{color:red;}

<2>交集选择器可以连续交。（这种写法是IE7开始兼容的。）
<3>交集选择器，一般都是以标签名开头。

4.3并集选择器

<1>用逗号表示并集。

h3,li{    color:red;}

<2>并集选择器，要拆开计算权重。

4.4通配符 *

<1>* 就表示所有元素。

*{  color:red;}

<2>通配符效率不高。

- - -

5. CSS3的选择器：IE7开始兼容。

5.1 儿子选择器 >

<1>div的亲儿子p.

div>p{color:red;}

5.2 序选择器

ul li:first-child{clolor:red;}

5.3 下一个兄弟选择

<1>+号表示下一个兄弟。

h3+p{color:red;}

<2>选择上的是h3元素后面紧挨着的第一个兄弟。

6.css的继承性和层叠性

6.1继承性

<1>有一些属性，当给自己设置的时候，自己的后代都可以继承，这就是继承性。
<2>可以继承的属性：color、text开头的、line开头的、font开头的。
这些关于文字样式的，都可以继承。所有关于盒子的、定位的、布局的属性都不能继承。
<3>继承性是从大贯穿到最小的元素。

6.2层叠性

<1>层叠性：就是css处理冲突的能力。
权重问题总结：
<2>当选择器选择上了元素，统计权重：
我们要分别数一下id选择器的数量、类选择器的数量、标签选择器的数量。
<3> 如果权重一样，那么以以后出现的为准。
<4>如果不能直接选中某个元素，权重为0.（开始数权重之前，一定要看看是不是真的选中了文字所在的最内层标签。)
<5>没有选中元素，如果大家的权重都为0，采用就近原则。

7.权重精选五题

第一题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style type="text/css">        #box1 .spec2 p{            color:red;        }        div div #box3 p{            color:blue;        }        div.spec1 div.spec2 div.spec3 p{            color:green;        }    </style></head><body>    <div id="box1" class="spec1">        <div id="box2" class="spec2">            <div id="box3" class="spec3">                <p>fairyL</p>            </div>        </div>    </div></body></html>

答：第三个中没有选中，所以排除。第一个和第二个的权重比分别为：1,1,1和0,2,4.所以最后文字会显示红色。

第二题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style type="text/css">        div p{            color:red;        }        #box{            color:blue;        }    </style></head><body>    <div id="box">        <p id="para" class="spec">            <span>fairyL</span>        </p>    </div></body></html>

答：由于两个都没有选中元素，所以采用就近原则。文字最后显示为红色。

第三题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style type="text/css">        span{            color:green;        }        .nav{            color:red;        }        .nav ul li{            color:blue;        }    </style></head><body>    <div class="nav">        <ul>            <li><span>文字</span></li>            <li><span>文字</span></li>            <li><span>文字</span></li>            <li><span>文字</span></li>        </ul>    </div></body></html>

答：span直接选中，所以文字颜色为绿色。

第四题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style type="text/css">        #box1 div.spec2 p , #box1 #box2 p{            color:blue;        }        #box1 #box3 p{            color:green;        }    </style></head><body>    <div id="box1" class="spec1">        <div id="box2" class="spec2">            <div id="box3" class="spec3">                <p>文字</p>            </div>        </div>    </div></body></html>

答：第一个中采用了交集选择器，所以逗号两边分开看。所以分开后为：

#box1 div.spec2 p {            color:blue;        }#box1 #box2 p{            color:blue;        }

经过比较，三个的权重之比分别1,1,2和2,0,1和2,0,1.第二个与第三个相同，采用就近原则。文字颜色为绿色。

第五题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style type="text/css">        div div div div div div div div div div div div p{            color:red;        }        .haha{            color:blue;        }    </style></head><body>    <div>        <div>            <div>                <div>                    <div>                        <div>                            <div>                                <div>                                    <div>                                        <div>                                            <div>                                                <div>                                                    <p class="haha">文字</p>                                                </div>                                            </div>                                        </div>                                    </div>                                </div>                            </div>                        </div>                    </div>                </div>            </div>        </div>    </div></body></html>

答：标签直接被选中，所以文字颜色为蓝色。
2017.9.10 复习
1.选择器只表示选中没选中。
2.选择器看祖先结构。
3.同一个标签,携带多个类名，有冲突：

<p class="spec1 spec2">我是什么颜色？</p><p class="spec2 spec1">我是什么颜色？</p>

和在标签中的挂类名的顺序无关，只和CSS的顺序有关：

.spce2{    color:blue;}.spec1{    color:red;}

文字颜色最后显示为红色。
4.！important标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Document</title>    <style>        P{            color: red;        }        #para1{            color: blue;        }        .spec{            color: green!important;        }    </style></head><body>    <p id="para1" class="spec">文字</p></body></html>

语法：k:v ！important；来给一个属性提高权重。
<1>!important提升的是一个属性，而不是一个选择器。
<2>!important无法提升继承的权重。
<3>important不影响就近原则。
<4> important做站的时候，不允许使用，因为会让css写的很乱。
5.选择上了，数权重。如果权重一样，谁写在后面听谁的。没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重一样重，谁写在后面听谁的。

阅读全文

0 0