【css】通配符选择器&清除浏览器默认样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了【css】通配符选择器&清除浏览器默认样式相关的知识，希望对你有一定的参考价值。
参考技术A 写法：*
星号即为通配符选择器，写在其中的样式会应用页面到所有的元素中，所以使用的频率并不高，主要用于清除浏览器默认样式。
在使用各种元素的过程中，我们会发现很多元素都是有默认样式的，比如<body>标签有默认的padding值和margin值，<h1>和<p>标签有默认的行高字号，margin值，a标签有默认的下划线，列表前面有小圆点等等，常常会干扰我们进行页面的编写，所以我们可以事先使用通配符选择器进行浏览器默认样式清除。
更精准的清除方法
刚刚我们使用的通配符选择器，会给所有元素都设置一遍默认样式，解析的工作量会比较大，所以我们可以根据我的页面里到底有哪些元素需要清除，使用群组选择器写出更精确的清除默认样式css，如：
可以把它写入一个外部样式表reset.css，如果需要清除直接导入就可以啦。
1、清除在编写页面中由于浏览器默认样式带来的干扰。
2、兼容性更好，不同浏览器的默认样式可能会有所不同，如果不清楚可能会造成我们编写的页面在不同浏览器上的效果有所出入。
选择器部分文章：
选择器介绍（一）标签选择器、id选择器、类选择器
https://www.jianshu.com/p/d2f54bc64302
选择器介绍（二）后代选择器，子代选择器，交集选择器，并集（群组）选择器
https://www.jianshu.com/p/98f6788d0f54
通配符选择器&清除浏览器默认样式
https://www.jianshu.com/p/4eb179b4fdfc
css去掉浏览器默认样式
问题如图，出现与浏览器边缘的空白距离 怎样去掉 ？
html：<body><div class="top"></div></body>
css:.top
height:60px;
background-image:url(../image/daohang1-bg.jpg) ;
background-repeat:repeat-x;
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */
margin: 0;
padding: 0;
/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */
font: 14px/1.5 tahoma, \\5b8b\\4f53, sans-serif;
h1, h2, h3, h4, h5, h6 font-size: 100%; font-weight: normal;
address, cite, dfn, em, var font-style: normal; /* 将斜体扶正 */
code, kbd, pre, samp font-family: courier new, courier, monospace; /* 统一等宽字体 */
small font-size: 12px; /* 小于 12px 的中文很难阅读, 让 small 正常化 */
/** 重置列表元素 **/
ul, ol list-style: none;
/** 重置文本格式元素 **/
a text-decoration: none;
a:hover text-decoration: underline;
sup vertical-align: text-top; /* 重置, 减少对行高的影响 */
sub vertical-align: text-bottom;
/** 重置表单元素 **/
legend color: #000; /* for ie6 */
fieldset, img border: 0; /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table border-collapse: collapse; border-spacing: 0;
/* 重置 HTML5 元素 */
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
summary, time, mark, audio, video
display: block;
margin: 0;
padding: 0;
mark background: #ff0;
理念：
1. reset 的目的不是清除浏览器的默认样式, 这仅是部分工作. 清除和重置是紧密不可分的.
2. reset 的目的不是让默认样式在所有浏览器下一致, 而是减少默认样式有可能带来的问题.
3. reset 期望提供一套普适通用的基础样式. 但没有银弹, 推荐根据具体需求, 裁剪和修改后再使用.
因为各个浏览器默认的样式不同，你这种情况可以使用下面代码清除边距
<style>*margin:0;padding:0;</style>建议做网站的时候，设置个reset.css样式表清除各个浏览器的默认样式，已达到做的网页在各个浏览器中达到统一，下面把YUI Reset CSS代码贴出
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,tdmargin:0;
padding:0;
table
border-collapse:collapse;
border-spacing:0;
fieldset,img
border:0;
address,caption,cite,code,dfn,em,strong,th,var
font-style:normal;
font-weight:normal;
ol,ul
list-style:none;
caption,th
text-align:left;
h1,h2,h3,h4,h5,h6
font-size:100%;
font-weight:normal;
q:before,q:after
content:'';
abbr,acronym border:0;
参考技术B FF中默认是有padding值的,而在IE中只有margin默认有值。修改其值，默认值就没有了。楼上正解：<style>
*margin:0;padding:0;
</style> 参考技术C 您这是默认的边距样式，很多标签都有默认样式
列如：边距、填充、行高、字号、颜色、等等...
一般都是在样式表里首先写出清空所有标签样式
方法一：*padding:0px；margin:0px; (备：“*”代表所有标签)
方法二：body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,tdmargin:0;padding:0
很多大网站都不采取第一种方法，推荐第二种 参考技术D <style>
*margin:0;padding:0;
</style>
以上是关于【css】通配符选择器&清除浏览器默认样式的主要内容，如果未能解决你的问题，请参考以下文章
我可以将样式应用于 CSS 或 Sass 中的所有伪选择器吗？