前端--CSS选择器、优先级

最新推荐文章于 2022-04-30 06:00:00 发布

玫瑰花的葬礼。

最新推荐文章于 2022-04-30 06:00:00 发布

阅读量673

点赞数

分类专栏：前端文章标签： css html javascript js html5

本文链接：https://blog.csdn.net/nmb_jiang/article/details/108210727

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

初识CSS

CSS 指层叠样式表 (Cascading Style Sheets)，通过CSS定义如何显示HTML元素来提高网页的显示效果。
在包括将尽快改好图片描述
在HTML的基础上引入CSS：
方式1：

/*方式1：内联引入(行内引入)*/
<div style="color: hotpink"></div>

方式2：

/*方式2：内部引入，在head标签中用style标签书写*/
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{  /*对所有div标签生效*/
            color: hotpink;
            background: hotpink;
        }
    </style>
</head>

方式3(推荐使用)：

/*方式3：外部文件引入(外部样式)，工作中用的最多的一种方式*/
<link rel="stylesheet" href="css1.css"> /*href:文件路径*/

CSS选择器

基础选择器器

元素选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{color: gold} <!--所有div标签生效-->
    </style>
</head>
<body>
<div>
    渣男锡纸烫,渣女大波浪
</div>
<div>
    开心你就giao,不开心你就giaogiao

</div>
</body>

ID选择器

如果我们仅仅需要对某个标签改颜色，那么元素选择器就不能够满足需求了，这时候ID选择器可以解决。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{ <!--#号表示id属性，d1表示id属性的值,不能重复；仅对id值为d1的标签生效-->
            color: gold
        }
    </style>
</head>
<body>
<div>
    渣男锡纸烫,渣女大波浪
</div>
<div id="d1">
    开心你就giao,不开心你就giaogiao

</div>
</body>

类选择器

如果想对其中某几个标签同时添加一个样式，而id属性的值又不能重复咋办？有人说我在style标签里面写多几个id选择器，不仅low而且标签多得数不过来的时候要写很多遍。直接上才艺！！！

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d{ <!--.表示class属性，d表示class的值-->
            color: green;
        }
        <!--找某个标签里包含的属性-->
        div.d{
            color: gold;
        }
    </style>
</head>
<body>
<div>
    渣男锡纸烫,渣女大波浪
</div>
<div class="d"> <!--如果属性值有多个用空格隔开-->
    开心你就giao,不开心你就giaogiao。

</div>
<div class="d">
    我的烤面筋,融化你的心。
</div>
</body>

组合选择器

后代选择器

.c3 a{ <!--c3类中的所有a标签-->
      color: pink;
}
<!------------------------>  
<div class="c3">
    <a href="">鲁班</a>
    <a href="">兰陵王</a>
    <div>
        <a href="">芈月</a>
        <a href="">鸡毛信</a>
    </div>

</div>

儿子选择器

div>p{ <!--所有父级标签为div标签的p元素-->
            color: pink;
        }

毗邻选择器

div+p{ <!--紧跟着div标签的的下面的所有p元素-->
            color: pink;
        }
<p>giao有错吗???11111</p> <!--这个是不生效的-->
<div>
<p>giao有错吗???2222</p>

</div>
<div>
   <p>giao有错吗???</p>
</div>

弟弟选择器

#di~p{
            color: pink;
            margin: 5px;
        }
<!------------------------>        
<p>giao有错吗???hhh</p>
<div id="di">
<p>大家好111</p>
<p>giao有错吗???11111</p>
</div>
<p>giao有错吗???444444</p> <!--只有这两个生效-->
<p>giao有错吗???55</p>
<div>
<p>giao有错吗???2222</p>

属性选择器

<!--含有title的p标签-----> 
p[title]{  
            color: green;

        }
<!--含有xxx属性的的所有标签-----> 
[xxx]{color:red;}
<!--含有xxx属性的并且属性值为p2的所有标签-----> 
[xxx='p2']{color:red;}
<!--含有所有有title属性的并且属性值为p2的p标签-----> 
p[title='p2']{xx:xx;}
<!----------------------------------->          
<div id="di">
<p title="t1">大家好111</p>  <!----------> 
<p>giao有错吗???11111</p>
</div>
<p title="t2">giao有错吗???444444</p>  <!--------->

组合选择器

需要多个标签的样式相同的时候，可以使用分组选择器来统一设置样式。

div,p{
            color: fuchsia;
        }

伪类选择器

<style>
        a:link{  /* a标签访问前设置样式 */
            color:red;
        }
        a:active{  /* a标签鼠标点下去显示样式 */
            color: green;
        }
        a:visited{ /* a标签访问后显示样式 */
            color: pink;
        }
        a:hover{ /* 鼠标悬浮到a标签时显示样式，所有标签可以使用hover */
            color:purple;
        }
        div:hover{   /* 鼠标悬浮到div标签时显示样式 */
            background-color: green;
        }
        input:focus{ /* input标签捕获光标时的样式显示 */
            background-color: orange;
        }
    </style>

伪元素选择器

<style>
        div:first-letter{ <!--将div标签中的文本的第一个字改变颜色和大小-->
            color:red;
            font-size: 40px;
        }
    </style>
<body>
    <div>
        一giao窝里giaogiao
    </div>

</body>

<style>
        div:before{ /*在每个div元素之前插入内容:?*/
            content: '?';
            color:red;
        }
    </style>

<body>

<div>
    一giao窝里giaogiao
</div>

<style>
        div:after{ /*在每个div元素之后插入内容:?*/
            content: '?';
            color:red;
        }
    </style>

<body>

<div>
    一giao窝里giaogiao
</div>

通用选择器

*{color:red;}

选择器的优先级

在HTML文本中如果有不同的选择器选中了相同的标签，并赋予了不同的CSS样式，那应该按照那个CSS样式来进行渲染呢？当浏览器打开HTML文件的时候是从上至下读取的，如果是同一级的标签，写在后面的CSS样式会覆盖前面的CSS样式：

    <style>
        a{
            color: yellow;
        }
        a{
            color: pink;
        }
        a{
            color: blue;
        }
    </style>
<body>
<a href=>点我</a>  <!--最终为蓝色-->
</body>

而优先级又会根据样式的权重值来衡量，权重值越大优先级就越高，优先级越高对应选择器的样式就会被优先显示。在组合选择器中，各选择器的权重会相加在一起，但是权重不进位，也就是说组合了11个类选择器优先级也不会比一个id选择器的高；对于权重相同的选择器，谁写在后面就用谁的。

在这里插入图片描述
此外，还可以用!important的方式强制让样式优先生效，但不推荐使用。

#p1{color: darkgreen!important;}

玫瑰花的葬礼。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端--CSS选择器、优先级

初识CSSCSS 指层叠样式表 (Cascading Style Sheets)，通过CSS定义如何显示HTML元素来提高网页的显示效果。在HTML的基础上引入CSS：/*方式1：内联引入*/<div style="color: hotpink">/*方式2：内部引入，在head标签中用style标签书写*/<head> <meta charset="UTF-8"> <title>Title</title> &
复制链接

扫一扫

专栏目录