Javascript CSS冲突生命射线

在同一个Liferay页面中加载2个Portlet时，我遇到了css冲突。当两个portlet在css文件中同时包含相同的命名空间时，就会出现冲突

例如，如果：

Portlet A的mycss.css是：

#legend {

    width: 150px;
    height: 150px;
    bottom: 160px; 
    position: relative; 
}

Portlet B的mycss.css是：

#legend {

    width: 150px;
    height: 150px;
    bottom: 30px
    right: 5px; 
    position: absolute;
} 

如果页面中只有portlet A，它将加载其mycss.css；如果还有portlet B，它将读取第二个portlet的css。 Portlet A有一个没有css的元素，Portlet B有一个与Portlet A具有相同名称空间但有css的元素。同样在本例中，Portlet A读取Portlet B的css文件

我在2个Portlet的view.jsp中加载css，其中包含：

<script src="<%=request.getContextPath()%>/css/mycss.css"></script>

或者在两个不同的liferay-portlet.xml中：

<header-portlet-css>/css/mycss.css</header-portlet-css>

/css/mycss.css

我对js文件也有同样的问题

另外，这两个portlet是从Netbeans导入的

---

谢谢

CSS文件是平台的全局文件。此文件没有作用域。如果只想为portlet应用css，则必须在选择器前面加上portlet的id（或可以添加到liferay-portlet.xml文件中的css类包装器）

在portletA项目外接程序liferay-portlet.xml中，行：

<css-class-wrapper>portletA</css-class-wrapper>

<css-class-wrapper>portletB</css-class-wrapper>

在portletB项目外接程序liferay-portlet.xml中，行：

<css-class-wrapper>portletA</css-class-wrapper>

<css-class-wrapper>portletB</css-class-wrapper>

---

CSS文件是平台的全局文件。此文件没有作用域。如果只想为portlet应用css，则必须在选择器前面加上portlet的id（或可以添加到liferay-portlet.xml文件中的css类包装器）

在portletA项目外接程序liferay-portlet.xml中，行：

<css-class-wrapper>portletA</css-class-wrapper>

<css-class-wrapper>portletB</css-class-wrapper>

在portletB项目外接程序liferay-portlet.xml中，行：

<css-class-wrapper>portletA</css-class-wrapper>

<css-class-wrapper>portletB</css-class-wrapper>

---

请注意，像这样使用HTML ID是不合适的portlet样式：必须保证每个HTML页面上的I是唯一的，这在您的情况下不是这样的。请原谅我没有捕捉到上面的自动更正。读“id”，而不是“I'd”是的，我知道，但我必须导入这些项目…好吧，导入它们然后更改它。这是HTMLDOMS的基本原则。如果不考虑唯一ID的基本假设，就无法解决这个问题。这就是id的意思：标识符！请注意，像这样使用HTML ID是不合适的portlet样式：必须保证每个HTML页面上的I是唯一的，这在您的情况下不是这样的。请原谅我没有捕捉到上面的自动更正。读“id”，而不是“I'd”是的，我知道，但我必须导入这些项目…好吧，导入它们然后更改它。这是HTMLDOMS的基本原则。如果不考虑唯一ID的基本假设，就无法解决这个问题。这就是id的意思：标识符！我注意到，只有当这两个元素中的一个有CSS时，它才起作用。如果两个元素都有CSS，那么就有问题了。你能添加你的新配置和问题的屏幕截图吗？我注意到，只有当两个元素中的一个元素有CSS时，这才有效。如果两者都有CSS，则会出现问题。您可以添加新的配置和问题的屏幕截图吗？