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

html-css020

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

写法:*{}

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

在使用各种元素的过程中,我们会发现很多元素都是有默认样式的,比如<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

新建一个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文件,查看实现的效果。

请点击输入图片描述

只要在样式里面加一句去掉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}