CSS基础(一)--选择器与权重计算

最新推荐文章于 2024-07-24 14:20:14 发布

伊莉丝

最新推荐文章于 2024-07-24 14:20:14 发布

阅读量671

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/u013658374/article/details/77607857

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS基础选择器

html负责结构，CSS 负责样式，Js负责行为。

标签选择器

用标签名当选择器

所有标签都能当选择器，例如body,h1,dl,ul等
无论层级多深，都能选中
选择的是所有，而不是某一个标签，所以是共性，不是特性。

   h1 {
            color: blue;
        }

ID选择器

#表示id

  #rc {
            color: red;
        }

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

类选择器

.是类的符号，任何标签可以携带class属性。
class属性可以重复，例如

<h1 class="myclass">Hello</h1>
<h1 class="myclass">World</h1>

css里面用.来表示类：

   .myclass {
            color: pink;
        }

同一个标签，可能同时属于多个类，用空格隔开：

<h1 class="myclass myclass2">World</h1>

class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
同一个标签可以同时携带多个类。

不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

CSS高级选择器

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div p {
            color: blue;
        }
    </style>
</head>
<body>
<div class="div">
    <p>后代</p>
</div>
<p>不是后代</p>

</body>
</html>

空格表示后代，.div p就是.div的后代所有p,注意选择的是后代，不一定是儿子 。比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div p {
            color: blue;
        }
    </style>
</head>
<body>
<div class="div">
    <ul>
        <li><p>后代</p></li>
        <li><p>后代</p></li>
        <li><p>后代</p></li>
    </ul>
</div>
<p>不是后代</p>

</body>
</html>

能够被下面的选择器选择上：

   .div p {
            color: blue;
        }

可以看到这个选择器选择的后代，p这里不是儿子，而是后代，后代选择器能选择包括儿子的后代。

空格可以多次出现

   .div li p {
            color: blue;
        }

.div里面的后代li里面的p。

后代选择器，就是一种平衡：共性、特性的平衡。当要把某一个部分的所有的什么，进行样式改变，就要想到后代选择器。

后代选择器，描述的是祖先结构。

这里写图片描述

交集选择器

   h3.special {
            color: blue;
        }

选择的元素是同时满足两个条件：必须是h3标签，然后必须是.special类的标签。

交集选择器没有空格。

所以h3.special和h3 .special不是一个意思。

交集选择器可以连续交（一般不要这么写）

h3.special.zhongyao{
    color:red;
}

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

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

h3,li{
    color:red;
}

用逗号就表示并集。

通配符`*`

*表示所有元素。

    *{
        color:red;3 }

效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

CSS3选择器

儿子选择器

IE7开始兼容，IE6不兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div > p {
            background-color: blue;
        }
    </style>
</head>
<body>

<div>
    <p>div儿子</p>
    <ul>
        <li><p>不是div儿子</p></li>
    </ul>
</div>

</body>
</html>

序选择器

IE8开始兼容；IE6、7都不兼容
选择第1个li：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        <!--ul 的后代li 第一个元素-->
        ul li:first-child {
            background-color: blue;
        }
    </style>
</head>
<body>

<div>
    <ul>
        <li><p>第一个元素</p></li>
        <li><p>第二个元素</p></li>
        <li><p>第三个元素</p></li>
    </ul>
</div>

</body>
</html>

选择最后一个1i：

   ul li:last-child {
            background-color: blue;
        }

下一个兄弟选择器

IE7开始兼容，IE6不兼容
+表示选择下一个兄弟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h3 + p {
            background-color: blue;
        }

    </style>
</head>
<h3>标题</h3>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<h3>标题</h3>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>
<h3>标题</h3>
<p>段落一</p>
<p>段落二</p>
<p>段落三</p>

<body>


</body>
</html>

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

CSS的继承性和层叠性

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

哪些属性能继承？

color、 text-开头的、line-开头的、font-开头的。

继承性

所以，如果我们的页面的文字，都是yellow，都是16px。那么就可以利用继承性：

   body{
          color: yellow;
          font-size: 16px;
      }

继承性是从自己开始，直到最小的元素。

层叠性

选中标签

权重计算

当选择器，选择上了某个元素的时候，那么要这么统计权重：
id的数量>类的数量>标签的数量
要分别计算id的数量，类的数量，标签的数量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box1 .hezi2 p {
            color: red;
        }

        div div #box3 p {
            color: green;
        }
         div.hezi1 div.hezi2 div.hezi3 p{
            color: blue;
        }

    </style>
</head>
<div class="hezi1" id="box1">
    <div class="hezi2" id="box2">
        <div class="hezi3" id="box3">
            <p>这字体是什么颜色?</p>
        </div>
    </div>
</div>
<body>
</body>
</html>

首先记住一点上面的三个选择器都选中了标签P

   #box1 .hezi2 p {
            color: red;
        }

权重是:1，1，1(1个id,一个类，一个标签)

  div div #box3 p {
            color: green;
        }

权重：1，0，3(一个id,0个类，3个标签)

    div.hezi1 div.hezi2 div.hezi3 p{
            color: blue;
        }

权重：0，3，4(0个id，3个类，4个标签)

因为第一个权重最大，所以P标签的字体颜色是red色。

不进位

  /*权重0，0，3*/
        div div div p {
            color: red;
        }
        /*权重0，1，1*/
        .hezi3 p {
            color: blue;
        }

没有进位的说法，所以P标签的字体颜色是blue色。

权重一样的情况

如果权重一样，那么以后出现的为准：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*权重1，1，1*/
        .hezi2 #box3 p {
            color: blue;
        }

        /*权重1，1，1*/
        #box2 .hezi3 p {
            color: yellow;
        }


    </style>
</head>
<div class="hezi1" id="box1">
    <div class="hezi2" id="box2">
        <div class="hezi3" id="box3">
            <p>这字体是什么颜色?</p>
        </div>
    </div>
</div>
<body>
</body>
</html>

两个选择器都选择上了P标签，所以接下来比较权重，因为两者权重一样（1，1，1），所以后出现的选择上，那么P标签的颜色是yellow。
如果把两个选择器调换

   /*权重1，1，1*/
        #box2 .hezi3 p {
            color: yellow;
        }

        /*权重1，1，1*/
        .hezi2 #box3 p {
            color: blue;
        }

那么是blue色。

没有选中标签

如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /* 权重0，0，3*/
        div div p {
            color: red;
        }
        /* 权重0*/
        #box1 #box2 #box3 {
            color: blue;
        }
        /* 权重0*/
        .hezi1 .hezi2 .hezi3 {
            color: yellow;
        }

    </style>
</head>
<div class="hezi1" id="box1">
    <div class="hezi2" id="box2">
        <div class="hezi3" id="box3">
            <p>这字体是什么颜色?</p>
        </div>
    </div>
</div>
<body>
</body>
</html>

那么P标签的颜色是red。

如果权重都是0

那么使用就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       /*下面 两个选择器都没有选中，所以使用就近原则*/

       /*描述的更加近，故颜色是蓝色*/
        #box3 {
            color: blue;
        }

        #box1 #box2 {
            color: red;
        }

    </style>
</head>
<div class="hezi1" id="box1">
    <div class="hezi2" id="box2">
        <div class="hezi3" id="box3">
            <p>这字体是什么颜色?</p>
        </div>
    </div>
</div>
<body>
</body>
</html>

权重总结

首先看选择器是否选中标签。
如果选中标签，那么计算权重(id>class>标签数)，谁大听谁的，如果权重一样，那么后写为准。
如果没选中，那么权重都是0，如果大家都是0，那么就使用就近原则。

练习

伊莉丝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础(一)--选择器与权重计算

CSS基础选择器html负责结构，CSS 负责样式，Js负责行为。标签选择器用标签名当选择器所有标签都能当选择器，例如body,h1,dl,ul等无论层级多深，都能选中选择的是所有，而不是某一个标签，所以是共性，不是特性。 h1 { color: blue; }ID选择器#表示id #rc { color: red;
复制链接

扫一扫