Question

我正在WebStorm中开发一个项目，看来我要应用于该项目部分的CSS在连接到ID时有效，但在类时却不起作用。这是我当前的基本格式的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="firstJS.js"></script>
    <link rel="stylesheet" href="styles.css"/>
    <title>title</title>
</head>
<body>

<div data-role="page" id="mainPage">
    <div data-role="header" class="pageHeader">
        <h1>at the top</h1>
    </div>
    <div role="main" class="ui-content">
    </div>
    <div id="welcomeBox" class="main">
        <div id="welcome" class="headerOne">Welcome!</div>
        <div id="here">
            <div>here's some cool words <a class="boxLink" href="https://twitter.com">Contact</a> for help!</div>
        </div>
        <div id="firstLinks" class="main">
            <div class="headerOne">LINKS</div>
        </div>
    </div>
</div>  
</body>
</html>

这是我的CSS：

#mainPage{
    background: lightgrey;
}
.pageHeader{
    font-size: 30px;
    background: goldenrod;
}  
.main{
    border: solid thick darkgoldenrod;
    background: goldenrod;
    border-radius: 15px;
} 
#welcomeBox{
    width: 1000px;
    height: 125px;
    position: relative;
    left: 12%;
}
.headerOne{
    font-size: 30px;
    font-weight: bold;
}   
#welcome{
    position: relative;
    left: 15%;
}  
#here{
    position: relative;
    left: 1%;
    font-weight: bold;
}
.boxLink{
    color: saddlebrown;
}

如果我将pageHeader和boxLink类更改为ID，则CSS会执行我希望在页面上执行的操作（main和headerOne类似乎会无论出于何种原因，都可以完美地用作类。）但是目前，pageHeader中的字体大小是我可以更改的唯一东西，而它们是我实际上可以在页面上看到的类。

在较早的时候，我在<ul> div中也有一个firstLinks，其中该列表中的每个<li>上都有一个<a>链接，可将某人带到网站的另一个页面（目前我不在代码中包含这些页面）。那些<a>链接应该使用boxLink类，但是格式也没有保留。

是否有解决方法？我有办法让它成为通用类，并将其应用于我想要的任何元素，而不是将其超指定给特定的<div>吗？

Answer 1

您在项目中使用的是jQuery Mobile框架，它是CSS-JavaScript混合框架。这是什么意思？在混合CSS / JS框架中，您将在运行时在CSS样式表中以及在该层上声明一些CSS类。框架将创建其他一些HTML片段，并将其注入现有的DOM中。在运行时，已在CSS样式表中定义的Framework的CSS类将应用于HTML页面的这些新部分。

以JQM标头为例：

<div data-role="header">
    <h1>at the top</h1>
</div>

如果已经在head中引用了JQM框架并对其进行了实例化，则在页面加载之后，它将解析您的HTML并使用相应的框架类增强您的现有标签。工具栏（header）是最简单的增强功能之一。例如，以更复杂的方式增强了JQM列表或复选框/单选按钮。

具有自定义data-role="header"属性的每个标签都将进行如下增强：

<div data-role="header" class="ui-header ui-bar-inherit" role="banner">
    <h1 class="ui-title" role="heading" aria-level="1">Page Title</h1>
</div>

现在，如果您需要更改某些框架的默认框架样式该怎么办？

这是一个非常常见的要求。对于此任务，Chrome或Firefox检查器是您最好的朋友。只需查看样式定义的层次结构即可。您会发现，某些更具特异性或通过使用!important声明的样式将覆盖某些先前定义的样式。

请注意，您的自定义background-color文件的自定义pageHeader类中定义的自定义style.css样式如何被.ui-page-theme-a .ui-bar-inherit内部框架定义的JQM属性覆盖jquery-mobile-1.4.5.css文件的类：

对于这个无聊的解释，很抱歉，到现在为止。显然，您不完全知道在页面加载时应用了哪些样式，而且在运行时还动态地应用了哪些样式。您需要来探索元素。层次结构从下到上。您可以轻松地找到页面中发生的情况。

这是因为您的自定义font-size运作良好，但您的自定义background-color无效。

要应用您的自定义样式，可以对JQM标头类使用特定性，或者对!important属性使用background-color：

.ui-header.pageHeader{
  font-size: 30px;
  background: goldenrod;
}  


.pageHeader{
  font-size: 30px;
  background: goldenrod !important;
}

两者都会导致相同的结果，这只是一个偏好问题，具体取决于您的需求和您要实现的目标。这里是一些参考：

https://www.w3schools.com/css/css_specificity.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

...只是忘了提到您还可以直接覆盖JQM样式：

.ui-header{
  font-size: 30px;
  background: goldenrod !important;
}

Answer 2

似乎您的代码很好，请尝试以下代码（如果可行），则外部样式表似乎有问题。如果您遇到同样的问题，请告诉我，另外我已经将JS文件更改为Bottom。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <link rel="stylesheet" href="styles.css"/>
    <title>title</title>
<style>
 #mainPage{
    background: lightgrey;
}
.pageHeader{
    font-size: 30px;
    background: goldenrod;
}  
.main{
    border: solid thick darkgoldenrod;
    background: goldenrod;
    border-radius: 15px;
} 
#welcomeBox{
    width: 1000px;
    height: 125px;
    position: relative;
    left: 12%;
}
.headerOne{
    font-size: 30px;
    font-weight: bold;
}   
#welcome{
    position: relative;
    left: 15%;
}  
#here{
    position: relative;
    left: 1%;
    font-weight: bold;
}
.boxLink{
    color: saddlebrown;
}
</style>
</head>
<body>

<div data-role="page" id="mainPage">
    <div data-role="header" class="pageHeader">
        <h1>at the top</h1>
    </div>
    <div role="main" class="ui-content">
    </div>
    <div id="welcomeBox" class="main">
        <div id="welcome" class="headerOne">Welcome!</div>
        <div id="here">
            <div>here's some cool words <a class="boxLink" href="https://twitter.com">Contact</a> for help!</div>
        </div>
        <div id="firstLinks" class="main">
            <div class="headerOne">LINKS</div>
        </div>
    </div>
</div>  

 <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="firstJS.js"></script>
</body>
</html>

CSS适用于ID，但不适用于类

2 个答案: