在html中css文件存在冲突吗？我本身的网页有一个css，然后我再引用一个.css文件就出错

Posted 2023-05-17

.style11
color: #205001;
font-size: 12px;
text-decoration: none;

.style12
color: #FF0000;
font-size: 12px;

.style14 font-size: 14px; color: #108410; text-decoration: none;
.style24 color: #000000
-->
</style>
这是一个css代码

参考技术A css代码 后定义先使用的原则
class id重名不会产生错误，定义了相同的样式属性，只会替换，越接近标签的定义优先级越高，如2楼兄弟说的
出现错误应该是添加了多余的属性，检查检查那些是不用的 参考技术B css只会层叠，不会冲突。
另外还有继承的问题。 参考技术C

你的问题说的不清不楚的，到底是样式冲突还是没有正确引用css所以没展现样式？

多个css（包括内联样式，内嵌样式），会有优先级


检查css文件路径，看看是不是没有正确引用导致样式出不来

参考技术D CSS叫”层叠样式表“，为什么叫”层叠“了，因为同一个元素会有不同的样式，你现在遇到的情况就是这样！CSS会选择哪个了，就是规则设置的最细的那个。。
例如：
内联样式 > 内部样式表 > 外部样式表 > 浏览器缺省设 第5个回答  2017-11-16 首先你看看你的 引用路径是否正确，第二看命名是否冲突

如何在 React 中运用 CSS

网页的布局、颜色、形状等UI展示方式主要是由Css进行设置，在ReactJs中也是一样。ReactJs中的Css结构方式与传统的Web网页类似，但依然存在一些差异。ReactJs中Css文件本身的编写上并没有差异，我们可以定义特定的样式类名，也可以正对Html元素定义样式。差异主要在React对Css的使用上（微信react-javascript）：

l 引用的差异：

传统html文件中css文件引用方式：

<link rel="stylesheet" type="text/css" href="mystyle.css">

ReactJs中css文件引用方式：

你可以直接采用require: require('./Category.css');

你也可以采用import: import styles from './Category.css';

l 使用差异：

传统css的使用方式是设置class: <div class=”center”> test </div>

ReactJs中css的使用方式是设置className(因为class已经成为了关键字)。

<div className='entry'>test </div>

另外

如果你采用require的方式，你可以直接在页面元素中使用css文件中的样式名。

如果你采用import styles from './Category.css';的方式，则应采用以下方式。

<div className=style.entry>test </div>

l 最终解析文件的差异：

传统css文件一般依然保持着源码状态。

在ReactJS中，Css文件最终将会对css样式名进行转换，例如在index.js文件中，引用style.css:

.customButton

Width:100px;

Heigth:30px;



将转化为：

.index_customButton_23U0x

Width:100px;

Heigth:30px;

.

其中23U0x是随机数，这样转化的结果将避免最终的单页面中，css样式名不存在同名冲突。

基本上ReactJS的css文件的使用差异到此为止了，你可以按照传统Css样式的定义和使用方式，随意使用了，你可以采用单一样式、设置元素标签样式、组合样式、层级样式等任意方式。 参考技术A 建议 CSS in JS 写法，虽然感觉推翻了多年的 CSS 工作进展。

主要原因还是 CSS 的全局污染。

模块化、组件化一直是前端不断优化追求的目标。传统的 CSS 无法很好的进行模块化。只能人为通过命名空间来约束这段样式在某个模块中，这种约束很弱的，指不定哪天来个新人不知道这个，就随便命名产生冲突影响了其他的组件。

而 CSS in JS 的写法，可以解决这个问题。如果有些场景实在是需要 CSS 外联才能实现（比如 animation 的一些动画），可以使用 Glen Maddern: Internet Pro CSS modules 来解决这个问题。