怎样避免全局CSS作用于特定图片样式？

当前这个问题困扰了很更多搞网页开发的人。就是说 你弄了一个全局的CSS样式，想让全部图片都一个样，但有时候你又想让部分图片看起来不一样，这时候就尴尬了。

问题从哪里来？

比如 你在CSS文件里写了这样一段代码：img { border: 1px solid #ddd; border-radius: 2px; padding: 5px; max-width: auto; max-height: auto; display: block; margin-left: auto; margin-right: auto; width: 100px; /* 默认较宽度 */ height: 100px; /* 默认较高度 */ }这段代码的意思是让全部图片都有1像素的边框，圆角，内边距啥的，正宗。。

但有时候，你有可能想让部分图片，比如缩略图或者正方形图片，看起来不一样。

为哪些会这样？

这是这是因为CSS有优先级规则。当更多个不同样式规则应用于同一个元素时浏览器会根据优先级来决定用哪个样式。 简单来说... 简洁优先级较高的规则会覆盖优先级较低的规则。

CSS优先级的计算涉及以下几个方面：

• 内联样式直接在HTML元素上写的style属性，优先级最较高。
• ID选择器比如#id，优先级很较高。
• 类选择器比如.class，优先级中等。
• 标签选择器比如img，优先级较较低。

怎么解决？

话虽然是这么说… 为了避免全局img样式作用于到特定图片， 能够采用以下几种方法：

1. 采用类选择器为需要特殊样式的图片添加一个或更多个不同类名，然后在CSS中采用类选择器来定义这一些图片的样式。比如：.thumbnail { width: 150px; /* 缩略图的特定较宽度 */ height: 150px; /* 缩略图的特定较高度 */ } .squared-image { width: 200px; /* 正方形图片的特定较宽度 */ height: 200px; /* 正方形图片的特定较高度 */ object-fit: cover; /* 确保图片填充整个正方形区域 */ }，谨记...

2. 采用更具体的选择器能够采用更具体的选择器来覆盖全局样式。比如能够采用.child-1 img来选择.child-1下的全部img元素。

   .child-1 img {
       border: 2px solid blue; /* 只会作用于.child-1内的图片 */
   }

3. 这事儿我可太有发言权了。 BEM命名法: 采用BEM命名法来规范类名，降较低样式冲突的风险因素。举个例子.aritcle_card__img--large{...}代表了块是 .aritcle_card ,元素是.aritcle_card__img ,修饰符是 .aritcle_card__img--large .

示例代码

太治愈了。 总之呢， 就是要合理利用CSS的优先级规则和选择器，来避免全局样式作用于到特定元素。只要你掌握了这一些技巧，就能够轻巧松解决CSS样式冲突的问题，让你的网页看起来更漂亮！😊

希望当前这个修改后的版本能够的文章。😄