CSS简单学习（二）-CSS选择器

最新推荐文章于 2023-06-13 23:30:23 发布

zhang___gang

最新推荐文章于 2023-06-13 23:30:23 发布

阅读量132

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/zhang___gang/article/details/84871473

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css选择器

选择器

选择器{
    key:value;
    key:value;
    ......
}

元素选择器

元素名作为选择器，针对所有这样的元素修饰

eg：

<!--元素选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <style type="text/css">
        p{
            font-size:20px;
        }
        div{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    <div>这是一个div</div>
    <div>这是一个div</div>
</body>
</html>

类选择器

可以给元素指定类，class属性，可以有多个类别值，多个值用空格隔开
类选择器：
```
.类{}
```
针对这个类所有的元素修饰

eg:

<!--类选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        .one{
            background-color: yellow;
        }
        .two{
            color:deeppink;
        }
    </style>
</head>
<body>
    <p class="one">这是一个段落</p>
    <p class="two">这是一个段落</p>
    <div class="one">这是一个div</div>
    <div class="two">这是一个div</div>
    <div class="one two">这是一个div</div> <!--加多个类别-->
</body>
</html>

id选择器

可以给元素加id属性，
一个页面建议id不重复，利用id代表唯一的它
CSS中可以通过id修饰这个元素
JS中可以通过id找到这个元素操作它
id选择器
```
#id{}
```
一个元素，不存在多个id之说

eg：

<!--id选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #one{
            background-color: yellow;
        }
        #two{
            color:deeppink;
        }
    </style>
</head>
<body>
    <!--一般不嵌套多个-->
    <p id="one">这是一个段落</p>
    <div id="two">这是一个div</div>
</body>
</html>

选择器组合

多个选择器用逗号隔开
选择器组合中的每个选择器有同样的属性

<!--选择器组合-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器组合</title>
    <!--组合选择器中的每个选择器有同样的属性-->
    <style type="text/css">
        #one,p,div{
            font-size: 20px;
            background-color: lightcyan;
        }
    </style>
</head>
<body>
    <h2 id="one">标题</h2>
    <p>段落</p>
    <p>段落</p>
    <p>段落</p>
    <div>div</div>
</body>
</html>

选择器嵌套

```
selector1,selector2{}
```
selector1对应的元素里面符号selector2的元素，儿子，孙子都可以

<!--选择器嵌套-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器嵌套</title>
    <style type="text/css">
        p span{
            color: red;
        }
        div span{
            color: red;
        }
    </style>
</head>
<body>
    <p>段落中有一个<span>这是p中的span</span></p><!--也可以直接在p中span加，但嵌套选择器更方便-->
    <div> <!--不是直接子元素也可以-->
        <p>段落中有一个<span>这是p中的span</span></p>
    </div>
    <span>这是一个独立的span</span>
</body>
</html>

选择器的优先级

字体，颜色，列表等样式，子元素继承父元素的样式
继承的样式优先级低于当前元素新增加的样式
对于当前元素的样式：
1. 可以加权计算
2. id选择器，加100
3. 类选择器，加10
4. 元素选择器，加1
5. 结果大的优先级最高
6. 结果一样的按照先后顺序，后面的覆盖前面的

eg：

<!--选择器优先级测试-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器优先级测试</title>
    <style type="text/css">
        div span{  /*权值为2  1+1*/
            color:purple;
        }
        span{ /*权值为1*/
            color:blue;
        }
        p{
            color:red;
        }
        .one span{  /*权值为11  10 + 1*/
            color: yellow;
        }
    </style>
</head>
<body>
    <div> div
        <p class="one"> 段落
            <span>这是一个span1</span> <!--span继承了红色，但又加了蓝色和紫色和黄色，
            这三个优先级都高于继承的红色，根据加权计算，最后是黄色-->
        </p>
    </div>
    <p>这是一个段落</p>
    <span>这是一个span</span>
</body>
</html>

zhang___gang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS简单学习（二）-CSS选择器

css选择器选择器选择器{ key:value; key:value; ......}元素选择器元素名作为选择器，针对所有这样的元素修饰 eg： &lt;!--元素选择器--&gt;&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="...
复制链接

扫一扫