css选择器

最新推荐文章于 2023-08-21 19:50:49 发布

fairyL

最新推荐文章于 2023-08-21 19:50:49 发布

阅读量264

点赞数 1

分类专栏： css选择器文章标签： css 标签

本文链接：https://blog.csdn.net/github_39904994/article/details/77883795

版权

css选择器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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.选择上了，数权重。如果权重一样，谁写在后面听谁的。没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重一样重，谁写在后面听谁的。