有没有办法将CSS样式应用于元素只有在应用了2个类时？
例如,将我的自定义样式应用于此:
<div class="one two">Text</div>
但不是这些:
<div class="one">Text</div>
<div class="two">Text</div>
我想知道是否有哪些浏览器不支持这种选择？
1) .class-1.class-2
2) #id-1.class-2
3) .class-1 > .class-2
4) .class-1 + .class-2
5) .class[foo="bar"]
我没有这么多不同的OS与不同的浏览器...所以不知道在哪里可以找到这些兼容性.所以请帮帮忙!
我有以下HTML标记:
<div class="drag a"></div>
<div class="drop a"></div>
我还有以下CSS规则,它只应用于我的第二个div:
.drop.a
{
background-color:red;
}
这工作正常,除了在Internet Explorer 9中CSS规则应用于这两个元素.
为什么是这样？我认为这种CSS与所有浏览器普遍兼容？
在css规则之间放置分号时,将忽略分号后面的规则.这可能会导致一些非常奇怪的结果.MDN有一个jsfiddle可以用来相当清楚地显示这种效果.
幸运的是,从一个人的css块之间排除分号本质上是普遍的做法.
我的问题是:为什么会这样？我听说这是因为它会节省空间(在这种情况下,每个css规则只有一个字符).但这种推理虽然如此,但似乎有点奇怪.我找不到css文件中每个char占用多少空间的细节,但如果它类似于JS,这个SO帖子告诉我们每个char大约是16位,或2个字节.这意味着每条规则可以节省2个字节.
根据该国家平均连接速度列表,全球平均连接速度为5.1兆比特/秒.由于我们通过不允许分号保存每个规则正好1个字符,并且每个字符是16位,我们可以显示平均需要我们节省一秒的规则量是:
5,100,000(bits/second) / 16(bits{saved}/rule)
(5,100,000/16)*[(bits * rule)/(second * bits] or
318750 (rule/second)
因此,基于全球平均连接速度,需要超过300,000条规则来节省我们一秒钟的时间.
当然,必须存在更有效的方法来为用户节省下载时间,并且还有诸如css/js的缩小/丑化.或者减少CSS属性名称的长度,因为它们比1个字符长得多,并且可以出现很多次,与剪掉一个尾随的分号相比,缩短这些可以节省大量字节的数量级.
在我看来,比保存的字节更重要的是,这对于开发人员来说是多么令人困惑.我们中的许多人都习惯于用分号跟随封闭的括号.
returnType/functionDec functionName(arguments){
//...function body
};
在许多语言(包括JavaScript)中都可以找到非常常见的模式,并且可以想象开发人员打字
cssRuleA{
/*style Rules */
};
cssRuleB{
/* Style Rules*/
};
作为这种习惯的偶然结果.控制台将不记录任何错误,开发人员将没有迹象表明在样式之外没有正确显示错误.绝对最糟糕的部分是,即使cssRuleA是导致错误的原因,它也会正常工作,即使没有任何问题,cssRuleB也将无法正确显示.这个事实
特别是在大型项目中会出现问题,因为样式/ UI问题可能有许多不同的根源.
CSS中是否存在一些固有的因素使得这种约定更有意义？我错过了一些白皮书中有什么东西可以解释为什么这就是CSS的行为方式吗？就个人而言,我试图从有限自动机/语法的角度来看是否更快地排除分号,但我无法确定它是否更快.
是否有可能在jQuery或CSS(因为我认为他们使用相同的选择器逻辑)来说出具有多个类的select元素.例如:
<div class='class1'></div>
<div class='class2'></div>
<div class='class1 class2'></div>
有没有办法我可以说我想要class1和class2的元素(因此在这种情况下只获得第三个div)？
这是一段代码:
div.note.note_expanded
这是什么意思？我理解div.className,但第二个点是什么？
我有以下内容:
<a class="nav disabled">Test</a>
如果地址同时包含"nav"和"disabled"类标记,是否有某种方法可以指定背景颜色？换句话说,一个选择器将只选择下面三个中的最后一个:
<a class="nav">Test1</a>
<a class="disabled">Test2</a>
<a class="nav disabled">Test3</a>
我有看起来像这样的旧 CSS：
.btn_1 {
color: #fff;
background: #004dda;
display: inline-block;
}
.btn_1:hover {
background-color: #FFC107;
color: #222 !important;
}
.btn_1.full-width {
display: block;
width: 100%;
}
我想迁移到在 React 中使用样式组件（CSS-in-JS 样式）。
到目前为止，这是我的迁移：
.btn_1 {
color: #fff;
background: #004dda;
display: inline-block;
:hover {
background-color: #FFC107;
color: #222 !important;
}
}
但是在样式化组件中是否有针对选择器的解决方案，.btn_1.full-width或者我应该为此创建另一个 CSS 块？
我认为做这样的事情（或更好）会很酷：
.btn_1 {
${this}.full-width {
display: block;
width: 100%;
}
}
但我似乎无法在文档中找到解决方案。你知道这是怎么可能的，或者这甚至是一个好主意吗？
我有以下HTML:
<div class="block-content no-title grey-bg">
如何将此div的背景设置为#333的颜色？
是否有某种CSS选择器可用于选择那些具有gray-bg的块内容div？
我有以下 HTML：
<div id="footer">
<div class="wrapper clear">
<!-- stuff -->
</div>
<div>
我应该在 css 文件中放入什么来格式化具有包装类和清除类的 div，但仅限于页脚内？
这是与 wordpress.com 一起使用的，所以我无法更改 HTML。
有没有办法将样式应用于包含多个类的元素？
<div class="foo" > foo </div>
<div class="foo bar" > foo bar </div>
<div class="bar" > bar </div>
我只想修改包含类"foo bar"的元素的样式.XPath信息就像是//div[contains(@class,"foo") and contains(@class,"bar")].纯CSS的任何想法,没有必要创建一个独特的类？
我有Internet Explorer的问题,当然它在其他浏览器中工作得很好.所以我有一个CSS clases.我正在做一个像左边,中间和右边部分的框架,但有三种不同的配色方案.所以我不想制作9个不同的类,我使用CSS功能就像这个例子:
.container-header .left { /* Some styles here... */ }
.container-header .left.style1 { /* Some styles here... */ }
.container-header .left.style2 { /* Some styles here... */ }
.container-header .left.style3 { /* Some styles here... */ }
.container-header .middle { /* Some styles here... */ }
.container-header .middle.style1 { /* Some styles here... */ }
.container-header .middle.style2 { /* Some styles here... */ }
.container-header .middle.style3 { /* Some styles here... */ }
.container-header .right { /* Some …