Question

我不知道这是否有意义，请原谅我的坏术语（刚刚开始学习），但我要做的是将一段代码与另一段代码分开，这样它的标签就不会影响代码我不想受到影响。

我在codepen中更改了一些代码，为页面制作轮播。我在另一个项目中键入了页面代码。我尝试将该轮播代码导入到主页面的代码中，但由于轮播代码中的某些标签与主页面的代码相同，所以它并没有按照我希望的方式进行布局，因为它正在干扰。我会更改标签，但它们是“通用”标签，例如img或a。

有没有办法将CSS代码与主代码分开？就像为它分配一个单独的div并将该div应用于HTML中的轮播容器一样？

Here's the carousel 和the main code（试图在左右的部分下面添加轮播）。

Answer 1

这很简单，使用CSS设计样式的最佳方法是：

不要直接将样式应用于HTML标记，因为这会影响包含样式的所有页面，因此最好：

使用类和ID来设置网页中某些特定元素的样式，这样包括页面中的css只会影响这些特定元素：

#myElementId{
    ...
    ...
}
.myElementsClass{
    ...
    ...
}

注意：

使用id表示页面中的唯一元素，使用class表示页面中的多个元素。

嵌套CSS类：

要回答有关使用嵌套类的问题，不能仅使用 CSS 执行此操作，您应该使用SASS或LESS

<强>参考文献：

如需进一步阅读，请查看：

The answer to Nesting CSS classes question on Stackoverflow

Nested selectors: the inception rule

Answer 2

在这种情况下，您需要为要自定义的标记和css中的标记创建一个类或ID，以标识该类或ID。例如：

<div class="myheader">
    <p>hello</p>
</div>

<div id="myfooter">
</div>

<style>
    .myheader{
        /*ur css for myheader*/
    }

    .myheader > p {
        /*css for <p> tag in myheader class*/
        color:blue !important;
    }
    #myfooter{
        /*ur css for myfooter*/
    }
    p {
        color:red;
    }
</style>

如果您注意到，css中的类标识为.，而ID标识为#。类和ID可以应用于您需要的任何标记。

如果您有如上所示的重叠css，只需使用!important指定哪个优先。

有关详细信息：w3s这是否可以回答您的问题？

Answer 3

这称为CSS冲突，你最好不要直接在标签上应用很多样式属性，在你的类中使用命名空间，比如 -

如果要应用/更改预定义属性类，则可以定义类 -

// same classes with a parent Css class, 
// to show it's effects only for that partcular section

.home .carousel{
    // your css goes code here
}

OR

.someOther .carousel{
    // your css goes code here
}
// Then few more nested classes

或者，如果你要为你的项目定义一大堆新类，你可以做类似的事情 -

.home-carousel{
    // your css goes code here
}

希望解决您的疑问！

将一段代码与另一段代码分开

3 个答案: