CSS02_选择器补充知识

最新推荐文章于 2024-07-12 20:49:16 发布

霄雨Blog

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量51

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_41225951/article/details/125887231

版权

title: CSS02
date: 2022-01-20 17:10:58
tags:

继承

继承

我们为一个元素设置的样式同时也会应用到它的后代元素上，继承的设计是为了方便我们的开发，我们可以将一些通用的样式设置到祖先元素上，这样只需要设计一次，就可以让所有元素都获取到改样式。

并不是所有样式都会继承

背景和布局相关的都不会被继承

background-color div里面的元素也会显示一样的color是因为background-color默认是透明，他们透过去了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            font-size:20px;
        }
        /* p{
            color:red;
        } */
        div{
            color:blue;
            background-color:orange;
        }
    </style>
</head>
<body>
    <!--继承：我们为一个元素设置的样式同时也会应用到它的后代元素上
    继承的设计是为了方便我们的开发
    -->
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>
    <span>我是p元素外的span元素</span>
    <div>
        我是div元素
        <p>
            我是div中的p元素
            <span>我是div中p元素中的span元素</span>
        </p>
        <span>
            我是div中的span元素
        </span>
    </div>
</body>
</html>

选择器的权重

样式冲突

不同选择器选择同一元素且为相同样式设置不同值

发生样式冲突时，由选择器的权重决定

选择器的权重

优先级越高越优先显示

优先级:内联样式 1,0,0,0>id选择器 0,1,0,0>类和伪类选择器 0,0,1,0>元素选择器 0,0,0,1

比较优先级时,需要将所有选择器的优先级相加计算,谁最高就选谁,分组选择器是单独计算

选择器的累加不会超过最大的数量级,比如类选择器再高也不会超过id选择器

如果优先级计算后相等,此时优先使用靠下的样式

通配选择器的优先级 0,0,0,0

继承的样式 没有优先级

举例:

<style>
    div{
        font-size:20;
    }
    *{
        font-size:50;
    }
</style>
<div>div里有个<span>span</span></div>

span的尺寸会是50,因为虽然span继承了div的样式20,继承的样式优先级为0,所有span会优先显示通配选择器样式50.

可以加某一个样式后面!important,则此时该样式会获得最先优先级,甚至会超过内联样式,但是请注意,在开发中!important需要慎用,因为之后都改不了了

超链接伪类举例

超链接主要一共有4个伪类

a:link

a:visited

a:hover

a:active

如果不按照以上顺序写,而是如下

a:hover{
	color:red;
}
a:active{
	color:chocolate;
}
a:link{
	color:green;
}
a:visited{
	color:greenyellow;
}

a:hover和a:active的样式将不会展现, 因为优先级相同,后面的将前面的样式覆盖了,前面的不再能显示出来

长度单位

像素

屏幕(显示屏)实际上是由一个一个小点构成的, 我们称小点为像素

分辨率: 1366*768 指的是屏幕横着有1366个像素,竖着有768个像素

不同屏幕像素大小不同,像素越小的屏幕显示的越清晰

所以同样的200像素在不同设备上显示效果不一样,很多高清屏为了大家能看清会自动放大125%/150%

百分比

可以将属性值设置为相对于父元素属性的百分比

可以使子元素跟随父元素来进行改变

 <style>
        .box1{
            background-color:red;
            width:300px;
            height:300px;
        }
        .box2{
            background-color:purple;
            width:50%;
            height:50%;
        }
  </style>
   <div class="box1">

        <div class="box2"> </div>

    </div>

em

<style>
    .box3{
        font-size:20px;
        background-color:rosybrown;
        height:10em;
        width:10em;
    }
</style>
<div class:box3></div>

em是相对元素的字体的大小来计算的,1em=1font-size,浏览器默认字体大小是16px

rem

rem是相对html的字体大小来计算的,如下代码,最后的box3结果为100X100px 的块,而非200X200px的块

<style>
	html{
		font-size:10px;
	}
	.box3{
		font-size:20px;
        background-color:rosybrown;
        height:10rem;
        width:10rem;
	}
</style>
<div class:box3></div>

颜色

颜色名

用颜色名来设置各种颜色,比如red,blue,green…

产生的问题是:直接使用颜色名不方便,记不住

RGB值

RGB通过三种颜色不同的浓度来调配出不同的颜色

R Red, G Green, B Blue

每一种颜色的范围在0-255(0%-255%)之间

语法:RGB() eg.(255,0,0)->red

工具:FastStone Capture,可以找到颜色的rgb

RGBA

rgba(R,G,B,A) A是透明度,范围0-1

 <style>
        .box1{
            background-color:rgb(22,255,255);
            width:200px;
            height:200px;
        }
        .box2{
            background-color: rgba(255,0,100,0.5);
            width:300px;
            height:200px;
        }
    </style>
    
     <div class="box1"> <div class="box2"> </div> </div>