我可以在div元素中添加多个类吗?(Can I add multiple classes to a div element? (CSS) [duplicate])

这个问题在这里已有答案:

是否可以向div元素添加多个类? 我尝试添加完整b类,但它不起作用。

#card { 
/* default for card */
    width: 300px;
    height: 50px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px 40px grey;
}

#card.g {
    background-color: lightgreen;
    box-shadow: 10px 10px 40px grey;
}
#card.b {
    background-color: lightblue;
    box-shadow: 10px 10px 40px grey;
}

#card.full{
    width:100%;
    height:100%;
    padding:10px;
}
<h3 id="card" class="full" class="b">Hi!</h3>

如果这是一个糟糕的问题,我很抱歉,我是编程新手。


This question already has an answer here:

Is it possible to add multiple classes to a div element? I try to add the full and the b class, but it does not work.

#card { 
/* default for card */
    width: 300px;
    height: 50px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px 40px grey;
}

#card.g {
    background-color: lightgreen;
    box-shadow: 10px 10px 40px grey;
}
#card.b {
    background-color: lightblue;
    box-shadow: 10px 10px 40px grey;
}

#card.full{
    width:100%;
    height:100%;
    padding:10px;
}
<h3 id="card" class="full" class="b">Hi!</h3>

I am sorry if this is a bad question, I am new to programming.


原文:https://stackoverflow.com/questions/33694444
2021-12-03 08:12

满意答案

是的,你只需要用空格分隔多个类。 如果你把class=""放在一个元素中,就像你一样,它会忽略第二个

#card { 
/* default for card */
    width: 300px;
    height: 50px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px 40px grey;
}

#card.g {
    background-color: lightgreen;
    box-shadow: 10px 10px 40px grey;
}
#card.b {
    background-color: lightblue;
    box-shadow: 10px 10px 40px grey;
}

#card.full{
    width:100%;
    height:100%;
    padding:10px;
}
<h3 id="card" class="full b">Hi!</h3>


yes, you just put the multiple classes separated by a space. if you put class="" twice in an element, like you did, it will disregard the second one

#card { 
/* default for card */
    width: 300px;
    height: 50px;
    padding: 15px;
    background-color: yellow;
    box-shadow: 10px 10px 40px grey;
}

#card.g {
    background-color: lightgreen;
    box-shadow: 10px 10px 40px grey;
}
#card.b {
    background-color: lightblue;
    box-shadow: 10px 10px 40px grey;
}

#card.full{
    width:100%;
    height:100%;
    padding:10px;
}
<h3 id="card" class="full b">Hi!</h3>

相关问答

更多

css选择一个包含2个类的元素[duplicate](How to select an element with 2 classes [duplicate])

您可以链接类选择器,它们之间没有空格: .a.b { color: #666; } 请注意,如果对您很重要,IE6将.ab视为.b ,因此在该浏览器中, div.ab和div.b将具有灰色文本。 看到这个答案是为了比较正确的浏览器和IE6。 You can chain class selectors without a space between them: .a.b { color: #666; } Note that, if it matters to you, IE6...

addClass - 可以在同一个div上添加多个类?(addClass - can add multiple classes on same div?)

$('.page-address-edit').addClass('test1 test2 test3'); 参考 $('.page-address-edit').addClass('test1 test2 test3'); Ref- jQuery

一个div可以有多个类(Twitter Bootstrap)(Can a div have multiple classes (Twitter Bootstrap) [duplicate])

当然,一个div可以有你想要的类(这是关于引导和HTML一般): <div class="active dropdown-toggle"></div> 只需将空格分开。 另外:请记住,一些引导类应该用于相同的东西,但在不同的情况下(例如对齐类 ,您可能需要左,右或中心对齐,但必须只有其中一个 )和您不应该一起使用它们,否则你会得到一个意想不到的结果(会发生什么是最后定义在css上的类将被应用)。 所以请记住,你应该避免做这样的事情: <p class="text-center text-left...

选择具有多个类的特定元素?(Select a specific element which has multiple classes? [duplicate])

你可以在DEMO下面做: CSS: .alpha.beta.gamma{color:red;} HTML: <div class="alpha beta gamma"> hello </div> <div class="alpha beta gamma delta"> hello </div> <div class="alpha beta delta"> hello </div> 这将改变所有具有这三个类的div的颜色。 You can just do like below...

我可以在div元素中添加多个类吗?(Can I add multiple classes to a div element? (CSS) [duplicate])

是的,你只需要用空格分隔多个类。 如果你把class=""放在一个元素中,就像你一样,它会忽略第二个 #card { /* default for card */ width: 300px; height: 50px; padding: 15px; background-color: yellow; box-shadow: 10px 10px 40px grey; } #card.g { background-color: l...

在cakephp中为表单元素添加多个类(adding multiple class for form elements in cakephp)

只需按空格分隔每个类名。 如下。 $this->Form->select('subcat_id',$SubCategoryList, array('class'=>'form-control col-sm-4')); Just separates each class name by space. like below. $this->Form->select('subcat_id',$SubCategoryList, array('class'=>'form-control col...

如何在JQuery中为Div元素添加css类?(How do I add a css class to an Div element in JQuery?)

$("#element_id").removeClass( "oldclass").addClass("newclass"); $("#element_id").removeClass( "oldclass").addClass("newclass");

如何为ul元素添加多个类[复制](How to add multiple classes for ul element [duplicate])

在HTML中,类由空格分隔。 所以, <ul class="sub-menu insert"> In HTML, classes are separated by space. So, <ul class="sub-menu insert">

jquery为元素添加多个css类(jquery add multiple css classes to an element)

... $('#photo-' + imageDataNum).css('background-image', 'url(' + imgURL + ')').removeClass('fade-out').addClass('fade-in').addClass('popup'); ... 要么 $('<img />').attr({'src': imgURL, 'data-image-num': i}).load(function() { console.log('ima...

Intellisense不允许在元素的class属性中添加多个css类(Intellisense doesn't allow adding multiple css classes in class attribute of an element)

这是VS2012的一个已知问题。 微软已经意识到这一点并正在修复( BUG 760316:Intellinsense不能用于添加多个类 ) 您仍然可以添加多个类,只需键入它们即可。 This issue is now fixed with Visual Studio 2012 Update 2

相关文章

更多

Becoming a data scientist

Data Week: Becoming a data scientist Data Pointed, ...

《DIV.CSS应用视频教程》(DIV+CSS)[压缩包]

中文名: DIV.CSS应用视频教程 英文名: DIV+CSS 资源格式: 压缩包 ...

Solr: a custom Search RequestHandler

As you know, I've been playing with Solr lately, tr ...

Solr4:Tomcat7与Solr之多核配置(Multiple Cores)

1. 背景 多核,官方说法,让你只用一个Solr实例,实现多配置多索引的功能,为不同的应用保留不同的 ...

CSS基础视频教程-尚学堂视频教程

内容包括css基础、css选择器上、css属性、背景、颜色、边框、字体文本文本装饰、列表、css元素分 ...

Create a Bootable MicroSD Card

http://gumstix.org/create-a-bootable-microsd-card.h ...

html中一个div的id是“1:222”的话,怎么利用id给它定义css啊?

如 &lt;style&gt; #1:2{ height:100px; width:100px ...

Hadoop的I/O

1. 数据完整性:任何语言对IO的操作都要保持其数据的完整性。Hadoop当然希望数据在存储和处理中不 ...

求教一个 table的css

想要实现这个一个Table,table的padding和下面的黑线一直实现不了,求各位大牛指点。 ...

CSS样式

&lt;table &gt; &lt;tr &gt; &lt;td &gt;&lt;input t ...

最新问答

更多

将十六进制的字符串转换为字符串(Convert hex-encoded String to String)

您希望将十六进制编码的数据用作AES密钥,但数据不是有效的UTF-8序列。 您可以将其解释为ISO Latin编码中的字符串,但AES(key: String, ...)初始化程序将该字符串转换回其UTF-8表示形式,也就是说,您将从开始时获得不同的关键数据。 所以你不应该把它转换成字符串。 使用 extension Data { init?(fromHexEncodedString string: String) } 方法从Swift中进行十六进制/二进制字符串转换,将十六进制编码的

将friendly_id添加到用户模型后,登录后的友好转发不起作用(Friendly forwarding after login doesn't work after adding friendly_id to the user model)

在应用程序控制器中,将redirect_back_or(path)方法更改为此方法。 def redirect_back_or(path) redirect_to session[:forwarding_url] || path session.delete(:forwarding_url) end 你有redirect_to request.referer之前负责将你重定向到最后一个url,即login_url。 我不知道为什么你要定义两个不同的方法

Qt + VS2010:由于 .dll从您的计算机丢失,程序无法启动(Qt + VS2010: The program can't start because .dll is missing from your computer)

您可能需要将有问题的DLL复制到您的可执行文件所在的文件夹中,或者确保DLL位于系统PATH中的文件夹中。 You likely need to copy the DLLs in question to the folder your executable is in, or ensure that the DLLs are located in a folder in the system's PATH.

AutoFixture使用内部setter创建属性(AutoFixture create property with internal setter)

理想情况下 ,测试不应该与类的internal成员交互,因为它们明确地从其公共API中排除 。 相反,这些成员将通过公共API启动的代码路径间接测试。 但是,如果在您的特定情况下这不可行,则可能的解决方法是从测试中明确地为内部属性赋值 。 您可以通过以下两种方式之一来实现: 通过使用InternalsVisibleTo属性将程序集中的所有内部成员公开给测试项目。 通过在特定接口中表示类的可修改状态并明确地实现它。 在您的示例中,选项1将是: // [assembly:InternalsVisib

使用Trigger.IO/PhoneGap在UIWebView中使用focus()事件自动显示键盘(Show keyboard automatically with focus() event in UIWebView using Trigger.IO/PhoneGap)

访问UIWebView不是我们在当前版本的插件中正确公开的东西(但我们很快就会支持)。 现在,如果您想尝试一下,可以添加 extern UIWebView *webView; 在插件文件的顶部,这将使您的API方法中的变量webView可用。 这将很快停止工作,所以我建议你现在只用它来测试一下。 2012年10月更新 : 该应用程序的Web视图现在通过ForgeApp : http : ForgeApp 例如: [ForgeApp sharedApp].webView Access to t

ASP.NET MVC控件(ASP.NET MVC Control)

您可以使用RadComboBox以及此处找到的此telerik社区项目提供的一些小调整。 应该在MVC中都能正常工作。 You can use the RadComboBox along with a little tweaking as provided for by this telerik community project, found here. Should all work fine in MVC.

在后期保存上下文 - 将指针保存到上下文?(Saving Context At a Later Stage - Saving Pointer To Context ? Core Data)

是的,您可以在循环后保存上下文。 它比每次迭代中的保存要好得多。 如果你看一下MagicalRecord src,你会看到MR_contextForCurrentThread总是为相同的线程返回相同的上下文,如果没有上下文的线程,MagicalRecord会创建它。 此外,您不需要传递上下文[_entityClass createInContext:context] ,只需要[_entityClass MR_createEntity] - 它将在当前线程的上下文中创建 Yes, you can

tinyMce函数用于确定弹出窗口是否已打开(tinyMce function to determine if popup is already open)

这是我要去的解决方案: 我似乎已经确认: - windowManager.open()不会像window.open()那样返回对窗口的引用 - windowManager没有内置方法来限制可以打开的实例数。 但它确实有一种方法可以将onClose函数添加到插件窗口:ed.windowManager.onClose.add(function(){alert('Closing!');}); 所以我将在onClick代码中使用一个变量来跟踪弹出窗口是否已被打开和关闭。 onClose函数将该变量标记为

使用nil调用Document.find在mongodb中无效(Calling Document.find with nil is invalid in mongodb)

OrderController #new调用OrderController#current_cart,它运行Cart.find(session [:cart_id])。 在会话开始时没有:cart_id,即session [:cart_id]为nil,你得到上面的Mongoid :: Errors :: InvalidFind异常。 请注意,当您正在抢救ActiveRecord :: RecordNotFound时,您的救援子句不会挽救该异常。 您正在使用Mongoid,而不是ActiveRec

在函数中返回postgresql查询结果(Return postgresql query result in a function)

假设您正在使用nodejs和pg模块。 正如您所说,由于查询功能是异步的,您无法直接将结果返回给调用者。 传统上,在nodejs中,调用者传递一个回调函数来处理结果或错误(如果有的话)。 在Kotlin中,这看起来像: client.query(MY_QUERY_TEMPLATE, params) { err, result -> if (err != null) { // do something with the error }