css在开发中禁止使用通配符

最新推荐文章于 2024-07-07 17:02:21 发布

北湫

最新推荐文章于 2024-07-07 17:02:21 发布

阅读量1.9k

点赞数 1

分类专栏： web前端文章标签： html css

本文链接：https://blog.youkuaiyun.com/qq_38571398/article/details/80460064

版权

web前端专栏收录该内容

5 篇文章

订阅专栏

本文探讨了CSS中通配符选择器的使用及其潜在问题，并介绍了一种更优的做法——使用重置样式来统一元素的内外边距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  css中有一种选择器叫通配符，这种选择器使用非常方便，它能把你所有的样式都改变，虽然说这种选择器很方便，但也是一种很糟糕的选择器，在开发中一般是禁止使用此类选择器的。 

  先来看个例子： 

 <style>
 /*通配符*/
	*{color:yellow;}
	.box{
	    width:100px;
	    height:100px;
	    background-color:red;
	    margin-left:20px;
	    float:left;
	}
  </style>
 </head>
 <body>
    <div class="box">111111</div>
    <div class="box">111111</div>
    <div class="box">111111</div>
    <div class="box">111111</div>
    <div class="box">111111</div>
    <div class="box">111111</div>
    <div class="box">111111</div>
 </body>

效果图如下：

  通过这个通配符所有的标签都会设置*{}里面的样式。可想一下，所有的标签都加上这*{}里的样式，性是有多差，所以通配符在开发当中少用它，最好不要用它。在我以前写代码当中，我最喜欢用通配符来把标签当中默认的margin和padding都设置为0，因为不同的浏览器之间，元素的margin和padding都会有一点小小的差异。接着上面的话题，如果在开发中最好不要使用通配符，那标签的margin和padding怎么来写才好呢？我们可以这样来写，把html中标签有margin和padding的都提取出来，写一个样式，需要用到的时候直接导入进去，下面我是直接套用YUI的 
 重置样式。 

 
 YUI的重置样式： 

body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, button,
textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}