Html CSS可用于ID，但不能用于类_Html_Css_Jquery Mobile

Html CSS可用于ID，但不能用于类

html css jquery-mobile

Html CSS可用于ID，但不能用于类,html,css,jquery-mobile,Html,Css,Jquery Mobile,我正在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

我正在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>

如果我将

pageHeader

和

boxLink

类更改为IDs，CSS会执行我希望它在页面上执行的操作（无论出于何种原因，

main

和

headerOne

类似乎可以很好地作为类工作）。但目前，

pageHeader

中的字体大小是我唯一可以更改的，因为它们是我可以在页面上看到更改的类

在前面的一点上，我在

firstLinks

div中还有一个

，其中列表中的每个

都有一个

链接，可以将某人带到站点的另一个页面（我目前没有将这些页面包含在该代码中）。那些

链接本应使用

boxLink

类，但这些链接的格式也没有保留

有解决办法吗？有没有一种方法可以让它成为一个通用类，并将其应用于我想要的任何元素，而不是超指定给特定的

？

似乎您的代码很好，请尝试下面的代码，如果它行得通，那么您的外部样式表似乎有问题。如果你面临同样的问题，请告诉我，我还将JS文件改为底部

    <!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>


标题
#主页{
背景：浅灰色；
}
.页眉{
字体大小：30px；
背景：一枝黄花；
}  
梅因先生{
边缘：实心厚的暗绿叶；
背景：一枝黄花；
边界半径：15px；
} 
#欢迎箱{
宽度：1000px；
高度：125px；
位置：相对位置；
左：12%；
}
.领班{
字体大小：30px；
字体大小：粗体；
}   
#欢迎光临{
位置：相对位置；
左：15%；
}  
#这里{
位置：相对位置；
左：1%；
字体大小：粗体；
}
.boxLink{
颜色：马鞍色；
}
在顶端
欢迎
这里有一些很酷的帮助词！
链接

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

以JQM头为例：

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

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

这是一个非常普遍的要求。对于这项任务，Chrome或Firefox检查员是您最好的朋友。只需查看样式定义的层次结构。您将发现，有些样式更具特殊性，或者是通过使用

声明的！重要信息

覆盖以前定义的某些样式

请注意，自定义

样式.css

文件的自定义

页眉

类中定义的自定义

背景色

样式是如何被

.ui-page-theme-a.ui栏继承jquery-mobile-1.4.5.css
文件中框架定义的JQM属性覆盖的：

对不起，这个无聊的解释，现在开门见山。显然，您不知道在页面加载时应用了哪些样式，而且，在运行时也动态应用了哪些样式。你需要探索这些元素。层次结构从下到上。您将很容易发现页面中发生了什么
这是因为您的自定义字体大小
工作正常，但您的自定义背景色
工作不正常
要应用自定义样式，可以在JQM头类上使用专用性，也可以使用！重要信息
对于背景色
属性：
.ui-header.pageHeader{
  font-size: 30px;
  background: goldenrod;
}  


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

两者都会导致相同的结果，这只是一个偏好的问题，取决于你的需要和你想要达到的目标。以下是一些参考资料：


…只是忘了提及您还可以直接覆盖JQM样式：
.ui-header{
  font-size: 30px;
  background: goldenrod !important;
}  

尝试使用#mainPage.pageHeader{…}
您在这里遇到了CSS专用性问题。@Arkellys问题是，我计划在这个项目中添加更多页面，我希望每个页面上的页眉都有相同的格式。我想知道是否有一种方法可以让我做到这一点，这样我就不必在每次我想要一个页眉时都为每个页面创建新的CSS。我相信你知道，HTML不喜欢重复的id，所以我必须用类来完成。如果你的页面是分开的，那么你可以对每个页面使用相同的id#pageHeader。）好的@scally请给我一分钟时间找到一个合适的理由。感谢You@scally请通过验证程序验证您的CSS代码，我正在粘贴链接，如果您的CSS看起来没有错误，请告诉我，然后我们将继续讨论下一点。我也在检查其他原因。非常感谢。
.ui-header.pageHeader{
  font-size: 30px;
  background: goldenrod;
}  


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

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