2021-07-24 通配符选择器*与标签选择器body的区别及其对ul标签垂直居中的影响

最新推荐文章于 2022-11-27 17:33:21 发布

Alonelyi

最新推荐文章于 2022-11-27 17:33:21 发布

阅读量1k

点赞数 2

分类专栏：前端学习笔记文章标签： html css

本文链接：https://blog.csdn.net/Longyi_ly/article/details/119064278

版权

前端学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了CSS中通配符选择器（*）与标签选择器（body）的区别，强调了它们在设置样式时的不同效果。错误地使用标签选择器可能导致样式无法正确继承，例如在创建导航栏时遇到的垂直居中问题。解决方案是正确使用通配符选择器消除所有元素的内外边距，并针对特定标签如ul设置样式。理解CSS的继承属性和不可继承属性对于优化布局至关重要。

摘要由CSDN通过智能技术生成

相关定义

通配符选择器：*，表示选取页面中所有元素（标签），如html、body、li、a等元素

不需要调用，自动给所有元素使用样式
常用场景：清除所有元素标签的内外边距

* {
	margin: 0;
	padding: 0;
}

标签选择器body：仅作用于body层，仅影响body下所有元素的相应属性为继承性质的值

继承属性：
(1)常用的css不可继承的属性（参考链接：css属性继承有哪些？css中可继承的属性和不可继承属性的总结）
display：规定元素应该生成的框的类型
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
盒子模型的属性：width、height、margin 、border、padding
背景属性：background
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
(2) a标签的文字颜色和下划线是不能被继承的
h标签的文字大小是不能被继承的

相关问题

问题

用li包含链接的方式设置导航栏时，发现ul标签的内容无法在父级div中垂直居中显示：

引起原因

误以为通配符选择器（*）与标签选择器（body）的作用一样
忽略了标签选择器的子级对父级的继承性及部分属性是不可继承的

问题页面css相关代码

body{
/*由于此处是对body设置的margin、padding值，而这两个属性不能被继承，因而在页面内其余标签仍有内外边距，导致ul标签无法在div中垂直居中*/
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.header{
    height: 42px;
    background-color: pink;
    margin: 30px auto;
}
.nav {
    float: left;
}
.nav ul li {
    float: left;
}
.nav ul li a {
    display: block;
    height: 42px; /*因为导航栏里面文字不一样多，最好给链接a左右padding撑开盒子而不是指定宽度*/
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
}

解决方法

将body选择器改为通配符选择器*

* {
	margin: 0;
	padding: 0;
}

增加对ul标签内外边距的设置

.nav ul { 
	margin: 0;
    padding: 0;
}

ul标签下的内容居中显示