Html 如何从多个样式表中选择要使用的CSS规则

我将

bootstrap.css

和

login.css

附加到

index.php

。在

index.php

中有几个表单元素，例如

input type['text']

。但是，这两个附加的CSS文件的目标都是

输入类型['text']

。我的另一个css文件上方链接了

bootstrap.css

：

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/login.css">

---

如何指定我希望

input type['text']

使用

login.css

中指定的规则，而不是使用

bootstrap.css

中的规则？我通常需要

bootstrap.css

更多，但要偶尔实现我自己的规则，因为

bootstrap.css

中的规则是首先呈现的，因为它是首先列出的。

您定义的css越具体，它在css中的优先级就越高。 您需要定义比引导规则更相关的自定义规则。 例如：

p.test{
颜色：绿色；
}
.测试{
颜色：蓝色；
}

---

teststring

好吧，您可以使用类似于“CSS规则hirache”的内容来实现您的理想效果。简而言之：最“高”的CSS规则赢得游戏

如果你用Chrome或FF开发，你可以用开发工具调试任何东西（我喜欢这个例子中的Chrome），看看为什么它会被引导覆盖。主要是CSS级别的规则或类似的东西

我建议您在包装器元素上使用自己的类，并根据需要重写样式。看看我下面的例子，了解我的意思

旁注：我认为CSS技巧教程很好地描述了CSS规则的进展，以及最具体的规则是如何进入游戏的

/*只是一个基本的样式*/
ul{列表样式：无；}
{文本装饰：无；字体系列：Verdana；颜色：黑色；}
/*让我们将所有列表元素设为蓝色。这对你来说应该很熟悉，
*这是css类的标准覆盖（是否这样称呼？）。
*/
.list LIA{颜色：蓝色；}
/*现在看这个例子，我们指定第三个list元素。
*由于此规则更多地指定为第9行中的规则，
*此规则在第三行生效，其他行将保持蓝色。
* +
*为了证明你不能“推翻”这条规则，我放了一条
*下面的一行告诉你们，即使是另一个低层规则也不能覆盖它。
*第20行比第21行更具体，即使它在后面。
*/
.list li:n子（3）a{color:pink；}
.list LIA{颜色：蓝色；}
/*另一个更高CSS等级的例子是这一行。
*我们将一个DOM元素放得更高，猜猜看：
*如果你在这里注释掉这一行，它就会生效。
*/
/*.wrapper li:n子（3）a{color:seagreen；}*/

您可以将引导链接放在login.css之后，然后随时从login访问属性，只需添加！之后很重要。它将超越自举模式。但是，必须为每个属性执行此操作。您也可以使用php逻辑来回送基于变量的类。要针对输入类型，请使用input[type=“text”]——据我所知，CSS规则的优先级是自上而下级联的，因此如果login.CSS附加在bootstrap.CSS之后，即使它们都有input[type=“text”]规则，应应用最后列出的规则。最后呈现的Css工作表优先。您需要使login.css中的样式比引导更具体。