css去掉默认样式,css取消样式

【css】通配符选择器&清除浏览器默认样式

写法：*{}

星号即为通配符选择器，写在其中的样式会应用页面到所有的元素中，所以使用的频率并不高，主要用于清除浏览器默认样式。

在使用各种元素的过程中，我们会发现很多元素都是有默认样式的，比如body标签有默认的padding值和margin值，h1和p标签有默认的行高字号，margin值，a标签有默认的下划线，列表前面有小圆点等等，常常会干扰我们进行页面的编写，所以我们可以事先使用通配符选择器进行浏览器默认样式清除。

更精准的清除方法

刚刚我们使用的通配符选择器，会给所有元素都设置一遍默认样式，解析的工作量会比较大，所以我们可以根据我的页面里到底有哪些元素需要清除，使用群组选择器写出更精确的清除默认样式css，如：

可以把它写入一个外部样式表reset.css，如果需要清除直接导入就可以啦。

1、清除在编写页面中由于浏览器默认样式带来的干扰。

2、兼容性更好，不同浏览器的默认样式可能会有所不同，如果不清楚可能会造成我们编写的页面在不同浏览器上的效果有所出入。

选择器部分文章：

选择器介绍（一）标签选择器、id选择器、类选择器

选择器介绍（二）后代选择器，子代选择器，交集选择器，并集（群组）选择器

通配符选择器清除浏览器默认样式

相关问答

Q1: css 苹果手机按钮默认样式如何去掉

只要在样式里面加一句去掉css去掉iPhone、iPad的默认按钮样式就可以了。 （不要写在class里哦）

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}

textarea {  -webkit-appearance: none;}

如果还有圆角的问题，

.button{ border-radius: 0; }

1、去除Chrome等浏览器文本框默认发光边框

input:focus, textarea:focus {outline: none;}

去掉高光样式：

input:focus{

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;}

当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，这样的话，当文本框载入焦点时，边框颜色就会变为橙色，给用户一个反馈。

2、去除IE10+浏览器文本框后面的小叉叉，只需下面一句就ok了

input::-ms-clear {display: none;}

Q2: 如何去掉列表的默认样式

新建一个html文件，命名为test.html，用于讲解css如何清除li列表默认样式。

请点击输入图片描述

在test.html文件内，使用ul、li标签创建一个列表。

请点击输入图片描述

在test.html文件内，设置ul标签的class属性为mycss。

请点击输入图片描述

在css标签内，通过class设置ul的样式，将list-style属性设置为none，消除列表的默认序号。

请点击输入图片描述

在css标签内，再将padding属性和margin属性消除li列表的内外边距。

请点击输入图片描述

6

在浏览器打开test.html文件，查看实现的效果。

请点击输入图片描述

Q3: css去掉浏览器默认样式

因为各个浏览器默认的样式不同，你这种情况可以使用下面代码清除边距

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,td {

margin: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;

}