Question

我需要知道我是否可以设计一个功能冲突的HTML页面，例如我有3个css，它们不能在一起，因为我犯了一个大错误;我需要知道我是否可以将这些CSS放在层次结构下，因此CSS中的其他CSS不可能...就像限制CSS一样，我想用一些脚本做同样的事情。

这是我想要做的代码示例。

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  
  <link rel="stylesheet" href="main.css"> <!-- MAIN or GENERAL CSS -->
  
</head>

<body class='landing-page  wsite-theme-light'>

<div> Where CSS 1 IS 
<link rel="stylesheet" href="style01.css">
<div/>

<div> Where CSS 2 IS 
<link rel="stylesheet" href="style02.css">
<div/>

<div> Where CSS 3 IS 
<link rel="stylesheet" href="style03.css">
<div/>


  <div class="nav mobile-nav">{menu}</div>

  <script type="text/javascript" src="/files/theme/plugins01.js"></script>
  <script type="text/javascript" src="/files/theme/custom01.js"></script>
</body>
</html>

＆＃13;

主要问题是CSS有一些我不需要的东西，以及我需要的东西，我无法理解我需要的东西。

Answer 1

这不是CSS的工作方式。 <link rel="stylesheet" ...>标记位于HTML的首尾，这意味着您无法为网页的不同部分设置特定的CSS。

您可以使用类和标识符来使CSS代码特定于某个部分。你可以试试这个：

<div id="style1"> Where CSS 1 IS 
...
<div/>

<div id="style2"> Where CSS 2 IS 
...
<div/>

<div id="style3"> Where CSS 3 IS 
...
<div/>

在CSS中，您可以使用以下代码专门化不同DIV的样式：

#style1 { 
    background-color: yellow;
}
#style2 { 
    background-color: black;
}
#style3 { 
    background-color: orange;
}

设计特定功能

1 个答案: