选择器和继承

最新推荐文章于 2024-02-15 11:55:29 发布

饼干ヾ

最新推荐文章于 2024-02-15 11:55:29 发布

阅读量422

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/qq_45703928/article/details/104400182

版权

总结专栏收录该内容

13 篇文章 0 订阅

订阅专栏

选择器与继承，行内与块级元素

继承
- - 可继承与不可继承
选择器的优先级
- 就近原则
src与href的区别
块级元素与行内元素
- 行内元素与块级元素
- - 空元素

继承

CSS的继承性指的是应用在一个标签上的那些CSS属性也会应用到字标签上

<div>
	<p></p>
</div>
如果div有color:red属性，那么p也会继承color:red属性

“直接样式”比“祖先样式”优先级高

<div style="color: red">
	<div class="son" style="color: blue">
	</div>
</div>

上面类名为son的显示为蓝色

最近的祖先样式比其他祖先样式优先级高

<div style="color: red">
	<div style="color: blue">
		<div class="son"></div>
	</div>
</div>

上面类名为son的显示为蓝色

可继承与不可继承

可以继承的样式：font-size、font-family、color、list-style、cursor

不可继承的样式：width、height、border、padding、margin、background

选择器的优先级

——优先级关系：内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

#content-id {
	color: red;
}
.content-class {
	color: blue;
}
div {
	color: grey;
}
<!-- html -->

<div class="content-class" id="content-id" style="color: black"></div> 

<div class="content-class" id="content-id"></div> 
 				
div class="content-class"></div>  					

<div></div>

由优先级关系，4个div的color依次为black、red、blue、 grey

就近原则

按顺序依次比较大小，大的优先级高，相等则比较下一个。若都相同，则按“就近原则”来判断

        当使用不同的选择器，选中同一个元素时并且设置相同的样式时
        样式之间产生了冲突，最终的样式取决于选择器的优先级（权重）
        规则：
        内联样式：1000
        id选择器：100
        类和伪类：10
        元素：1
        通配*：0
        继承的样式：没有优先级

<head>
#con-id span {
	color: red;
}
div .con-span {
	color: blue;
}
</head>
<body>
<div id="con-id">
	<span class="con-span"></span>
</div>
</body>

#con-id span 的a值比div .con-span大，所以span的color为red

属性后插有!important的属性拥有最高优先级。若同时插有！important，则再利用加法判断优先级

<head>
#con-id span {
	color: red;
}
div .con-span {
	color: blue !important;
}
</head>
<body>
<div id="con-id">
	<span class="con-span"></span>
</div>
</body>

#con-id span拥有更高权值，但选择器div .con-span中的background属性被插入了!important，所以p的background为red

src与href的区别

href用在link和a等元素上
src用在img，script，iframe上

src 的内容，是页面必不可少的一部分，是引入。遇到src引入时，浏览器需要等待下载完成后才可以继续加载文档，也就是同步
href 的内容，是与该页面有关联，是引用。遇到hrc引入时，浏览器可以继续加载文档，也就是异步

块级元素与行内元素

块级元素
在浏览器显示时，通常会以新行来开始（和结束）。块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素

行内元素

内联元素或称为行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或者其它内联元素

行内元素与块级元素

块级元素会独占一行，其宽度自动填满其父元素宽度；行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化
块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素
行内元素设置width、height、margin-top、margin-bottom、padding-top、padding-bottom无效

空元素

空元素一般指的是无须闭合的标签，如：< br/ >、< hr/ >、< input/ >、< img >、< link >、< meta >等

饼干ヾ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器和继承

选择器与继承继承选择器的优先级就近原则继承CSS的继承性指的是应用在一个标签上的那些CSS属性也会应用到字标签上<div> <p></p></div>如果div有color:red属性，那么p也会继承color:red属性“直接样式”比“祖先样式”优先级高<div style="color: red"> <div...
复制链接

扫一扫