如何查看一个标签的当前css样式

如上图所示

1. 先用标签选择器选择某个标签
2. 然后在elements区域就会自动找到该标签
3. 然后在右侧的styles区域整个区域都是该标签的样式，从上到下是显示的优先级，被划掉的Style就是说明是被另一个样式覆盖了
4. 把鼠标移动到style的样式上，会在每个样式上显示一个复选框，点击选中或者不选中就能本地调试样式
5. 还能自己手动在element.style{}里面写上样式，element.style区域的css样式就是行内样式的意思，是最高级的样式
6. 还能看到该样式的文件位置，也可能是行内样式
7. 在本地调试完你自己想要的样式后，就可以去代码里改成一样的

修改已有的样式有两种方式

1. 一种是把原本的样式改了
2. 另一种是用更高的选择器盖住原有的样式

先讲讲把原本的样式改了的方式，在调试图里我们可以看到最后一个红色的框是一个css文件，这个文件就是这个样式的所在文件位置，去到样式源文件，搜索到code这个标签，把原本的样式删了，换新的上去就行

但是如果原本的样式是在公共文件，你随便删，会让整个项目的样式都发生改变，就不能用上诉方法，就需要用更高的选择器盖住原有的样式

css样式的优先级是同级显示后加载的，也就是自己的样式要写在最下面，在最后link引入，其实只要保证样式一样的选择器等级，写在最后加载就可以了,如果说不要，我就是要等级比原本的高，那就用样式等级去打败原本的样式，等级由标签内的style > id > class > tag,还有加法运算，比如id + class会大于id，这个具体自己分析，不难!

行内样式是最强的，是<style></style>和css文件不能比的，但是，除了封装插件，别用行内样式，因为这样html标签真的特别的难看，又臭又长，多用class选择器和id选择器

还有一个很强大的样式叫!important，他在行内样式没有一样用!important的情况下，比行内样式还高级，可以说是一个外挂一样的存在，平时写样式完全不会用这个的，只有在使用一些外部插件，需要修改外部插件的样式，并且是行内样式的时候，才会用到！

除了id选择器，class选择器，标签选择器外，还有些特殊的选择器

子元素选择器>，只给子元素添加对应的样式，同级或者子元素的子元素是不被影响的

#aa>.aa{  }

第一个弟弟选择器+只有写在他后面的同级的符合条件的第一个标签元素会被添加样式

#aa+.aa{  }

所有弟弟选择器~只有写在他后面的同级的符合条件的所有标签元素会被添加样式

#aa~.aa{  }

属性选择器,自定义属性也行

[disabled]{   }
[checked]{   }
[data-xx]{   }
input[type="text"]{   }

伪类选择器

#aa:after{   }
#aa:before{   }

序号选择权

.list:nth-of-type(2n){   }

优先级

• 不同级别优先级： !important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
• 相同级别优先级： 内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用CSS3怎么试下背景图遮罩，但背景图文字显示的效果

  这篇文章主要介绍了CSS3为背景图设置遮罩并解决遮罩样式继承问题,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 如何用CSS实现折叠纸飞机并飞出去的动画？

  大家童年都有折过纸飞机的吧，今天我们就来看看如何用代码来实现。文中分享的示例用CSS+JS实现了折叠纸飞机并飞出去的动画效果，实现效果及代码如下，感兴趣的朋友接下来就跟随小编往下看吧。

• CSS3旋转木马效果的详细方法是什么

  今天来分享一篇关于“css3旋转木马的详细介绍”内容给大家，下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• CSS3自定义滚动条样怎样实现的，包括哪些部分

  滚动条组成1::-webkit-scrollbar滚动条整体部分2::-webkit-scrollbar-thumb滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）3::-webkit-scrollbar-track滚动条的轨道（里面装有Thumb）4::-webkit-scrollbar-button滚动条的轨道的两端按钮，允许

• 用CSS3怎么实现移动端响应式布局，要点有哪些

  这篇文章主要介绍了CSS3移动端vw+rem不依赖JS实现响应式布局的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧