带逗号的CSS选择器？
带逗号的CSS选择器是一种用于同时选择多个元素的方法。它允许我们通过在选择器中使用逗号分隔不同的选择器来选择多个元素，并将样式应用于这些元素。
例如，如果我们想要选择所有的段落和标题元素，并将它们的颜色设置为红色，我们可以使用带逗号的CSS选择器：
p, h1, h2 {
color: red;
}这个选择器将选择所有的<p>、<h1>和<h2>元素，并将它们的颜色设置为红色。
带逗号的CSS选择器在以下情况下非常有用：
- 同时选择多个元素并应用相同的样式。
- 选择多个不同类型的元素并应用相同的样式。
- 选择多个具有相同类名或属性的元素并应用相同的样式。
带逗号的CSS选择器的优势是可以简化样式表的编写，减少重复的代码。它可以提高代码的可读性和维护性，并且可以更快地选择和应用样式。
在腾讯云的产品中，与CSS选择器相关的产品是腾讯云CDN（内容分发网络）。CDN可以帮助加速网站的内容传输，提高用户访问网站的速度和体验。您可以通过腾讯云CDN产品来优化和加速您的网站，提供更好的用户体验。
腾讯云CDN产品介绍链接地址：腾讯云CDN
相关·内容
2回答
如何简单地在所有CSS选择器前加上前缀？
在我的CSS文件中，我有很多类，但我不希望这些样式应用于整个HTML，而是一个特定的div。
例如,
//In css file
.myClass{
//Some Styling
}
//In HTML
<div class=myClass></div>
<div id="styleOnlyInsideMe">
<div class=myClass></div>
</div>
如果我能在我的选择器前加上id
#styleOnlyInsideMe .myClass
浏览 1提问于2013-10-11得票数 0
回答已采纳
1回答
用验证解析错误
、、、
我试图验证我的css，这段代码在css验证器中给了我一个错误，只是想知道我在这里可能做错了什么，错误是：
select Parse Error [inp_submit]
select Parse Error select) { padding-top: 3px; }
CSS代码如下：
content form :not(#inp_submit, select) {
padding-top: 3px;
}
如果你对可能出了什么问题有什么建议，请告诉我，谢谢。
浏览 5提问于2013-11-12得票数 0
回答已采纳
如果我使用下面的javascript函数，以的CSS选择器值“#对策 .screen.active"作为参数
var activeScreen = document.querySelectorAll("#game .screen.active")[0];
上面的语句将将文档元素分配给activeScreen变量
Id=“游戏”和class=“屏幕”，目前是一个活动屏幕。
我有以下问题：
这是真的吗，在任何时候只有一个活动屏幕？
如果为querySelectorAll()函数提供多个 CSS选择器作为参数，
我们是否必须像下面这样使用逗号(‘，')来分隔
浏览 0提问于2018-12-29得票数 1
我想用相同的值更新很多类对象的css。例如：
$("selector1").css("background-color", "#abc");
$("selector2").css("background-color", "#abc");
...
$("selector50").css("background-color", "#abc");
我使用的是一个小部件框架，它有数百个类，我需要用一些jquery函数来更新它们的css，有点像简化的主题可视化。
浏览 1提问于2015-11-05得票数 0
回答已采纳
css文件中有两个相同的css选择器。
div.left {
margin:0 auto;
float:left;
width:300px;
height:200px;
border:2px solid black; }
div.right {
margin:0 auto;
float:left;
width:300px;
height:200px;
border:2px solid black; }
我发现div.left div.right不能组合成一个css选择器。
div.left div.right
浏览 2提问于2016-02-29得票数 1
回答已采纳
1回答
我有这样的代码：
$(window).scroll(function(){
$('#globalnav').css('left',-$(window).scrollLeft());
$('#globalborder').css('left',-$(window).scrollLeft());
$('#backgroundlayer').css('left',-$(window).scrollLeft());
});
如何将所有变量编译在
浏览 5提问于2014-04-15得票数 2
回答已采纳
1回答
我有一个关于CSS选择器的问题。首先，这里是一个截图：
这是显示DOM树的Firebug。看看这个问号。为什么这条规则会被应用？所选元素不在具有此ID的(单个)元素中。
样式侧面板显示应用于左侧选定元素的所有CSS规则。
浏览 3提问于2016-01-22得票数 0
回答已采纳
推特启动版： 2.0.3
示例HTML代码：
<!DOCTYPE html>
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
<script type=&
浏览 8提问于2012-05-09得票数 29
回答已采纳
2回答
我正在为我的项目中的表使用JQuery Bootgrid。
我在针对特定元素的特定类时遇到问题。我无法更改类或应用我自己的类，因为该类是由Bootgrid为表创建的。
我尝试将选择框隐藏在#table1中，但不隐藏在#table2中。我试图通过在相关的类上设置不同的宽度值来做到这一点。
我已经创建了一个来更好地显示问题。您可以在CSS部分的最底部找到我遇到问题的CSS。
// This works:
#table1 .bootgrid-table td.select-cell, .bootgrid-table th.select-cell {
width: 1%;
}
// Bu
浏览 13提问于2016-09-02得票数 0
1回答
我有一个用于表定义的css类，如下所示
.tabborder
{
border: 1px solid black;
border-collapse: collapse;
}
然后，我希望嵌套在具有选项卡边框“class=”的元素中的所有th和td元素执行以下操作
.tabborder th, td
{
border: 1px solid black;
border-spacing: 0;
}
当只有th或td按我想要的方式工作时，th, td是不会工作的。
有什么解决方法吗？我知道像下面这样写独立的定义是可行的，但是
浏览 1提问于2012-12-08得票数 2
回答已采纳
2回答
我有一个简单的HTML页面如下：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="div1">
<form>
<table>
<tr>
<td>
浏览 4提问于2014-02-19得票数 0
回答已采纳
2回答
我有4个容器，每个容器都有自己的ID，我可以不多次使用相同的css属性来针对所有4个ID，下面是示例：
#Container1{
background-color:red;
font:200;
}
#Container2{
background-color:red;
font:200;
}
#Container3{
background-color:red;
font:200;
}
谁知道，也许可以这样做：
#Container1,2,3{
background-color:red;
font:200;
}
或任何类似的，任何帮助都将不胜感激。
每个容器都有自己的标识，别让我把它们写在1以
浏览 1提问于2015-12-29得票数 0
回答已采纳
我遇到了一种情况，我只能在Edge和IE浏览器中应用特定的CSS样式。我在网上发现，您可以使用_：-ms(X)添加CSS选择器，这种样式只适用于IE和Edge。
但我想知道，这个修复方法到底是如何起作用的？据我所知，逗号只会分离不同的选择器，这意味着其他浏览器也应该解释和使用这种样式。
下面是一个示例：
假设我们只想在边缘和IE中将94 IE的宽度应用于.selector元素。
_:-ms-lang(x), .selector {
width: 94px;
}
边缘浏览器将应用这种样式，而其他浏览器则不会。但为什么不呢？
选择器中的逗号应该将样式应用于_：-ms(X)元素和.sele
浏览 0提问于2018-12-25得票数 1
回答已采纳
3回答
使用jQuery 1.4.2 (兼容模式下的IE8)
鉴于以下结构：
<div id='something'>something</div>
<div id='parental'>
<div><p>hi there</p> goats</div>
<p>hello again</p>
</div>
<div> end of the line</div>
这个代码是：
var Fred= $('#p
浏览 5提问于2010-09-22得票数 0
回答已采纳
我能得到一点关于这个CSS的帮助吗？在我的样式表中，我定义了锚点颜色：
a:link {}
a:visited {}
a:hover {}
在后面的样式表中，我在一个范围内有一些锚点，定义如下：
span.logout {}
span.logout a:link, a:visited {}
span.logout a:hover {}
唯一的问题是，我在注销范围中的锚点颜色覆盖了我的主要锚点颜色。我对为什么会发生这种情况感到困惑。我认为只有“注销”范围内的锚点才会受到此CSS的影响。
不管怎样，如果有人能帮上忙，我将不胜感激。另外，我是否正确地使用了CSS“子类”这个术语？
感谢您抽出时间阅读
浏览 0提问于2012-11-15得票数 1
回答已采纳
我不能将这些选择器组合成一个CSS规则。我试图编辑某些表单字段的宽度。
input#input_9_2 {
max-width: 500px;
}
input#input_9_3 {
max-width: 500px;
}
当我试图组合它们时，这一规则不适用于任何一种。但是，正如上面所述，它们在单独编写时起作用。
浏览 0提问于2019-07-15得票数 1
回答已采纳
1回答
我的js的以下部分显示并隐藏了一个名为gallery_item_details_list的ul类，它工作得很好。
var detailsBlock = $(location.hash);
$(".gallery_item_details_list .gallery_item_details").css("display", "none");
detailsBlock.css("display", "block");
var galleryItem =
浏览 1提问于2013-04-11得票数 0
回答已采纳
CSS
form input:not([type='button']),form input:not([type='submit']) { width: 200px }
<form>
<input type='button' value='button' />
<input type='submit' value='submit' />
<input type='text' value='text' />
浏览 8提问于2012-01-09得票数 7
回答已采纳
我有一个小问题，为什么这个简单的代码不能工作？
html：
<input type="text" name="a" id="a">
<input type="text" name="ab" id="ab">
<input type="text" name="b" id="b">
<input type="text" name="c" id="c">
<
浏览 2提问于2011-06-24得票数 2
1回答
请您澄清一下，我使用的CSS选择器是否不正确地使用逗号，还是我不完全理解它应该如何工作？
我试图解析这个页面的表
下面的CSS选择器返回树元素，而不是两个
div.panel-body.news > table > tbody > tr:eq(2),tr:eq(1)
您可以使用进行测试。
浏览 3提问于2016-06-01得票数 2
回答已采纳
3回答
我试图使用Nokogiri解析一个HTML表。该表被标记得很好，没有任何结构问题，只是将表头嵌入为实际行，而不是使用<thead>。我的问题是，除了第一行之外，我想要每一行，因为我对标题不感兴趣，而是对后面的所有内容都感兴趣。下面是表的结构示例。
<table id="foo">
<tbody>
<tr class="headerrow">....</tr>
<tr class="row">...</tr>
<tr class="row_
浏览 5提问于2015-06-09得票数 1
回答已采纳
2回答
我试图排除CSS选择器中的两种情况。当前，选择器如下所示：
$$('select:not([class=session])').each(function(){
//blah blah
})
但我想排除另一个名为"sessionproperties“的类。
在一个选择器语句中是否有任何方法排除多个选择器语句？在这方面的任何帮助都将不胜感激。
注意:我尝试过使用~=操作符来表示“会话”，但是它对我完全不起作用。
浏览 1提问于2011-01-17得票数 3
回答已采纳
2回答
我有一个HTML：
<input type="text" class="example" placeholder="Example"><br><br>
<input type="text" class="example" placeholder="Example"><br><br>
<input type="text" class="example" placeholder="Exa
浏览 5提问于2016-02-04得票数 0
回答已采纳
是的，我们都知道是什么意思。
这是不同的。我以为我对CSS相当了解，但今天我遇到了一些我从未见过的东西--声明块之间的逗号。我一直在使用，它生成了这个缩小的、干净的输出(我重新插入了一些空格以提高可读性)：
body .container
{
color:#EEE
}
,
.navbar-default .navbar-nav>.active>a:hover,
h1
{
color:#000
}
注意body .container声明块中的大括号结束后的逗号(我在自己的行中放置了这个逗号)。这是有效的CSS？如果是，那又意味着什么呢？
我为清洁CSS输入的css如下
浏览 6提问于2016-04-04得票数 1
回答已采纳
2回答
当我尝试在CSS类选择器的基础上为某些div应用简单的css时，不同的选择器组合具有相同的css样式，但没有得到应用。如果我分别为每个选择器组合编写这个css，那么它是工作的。我不明白它为什么会失败。如果我的CSS选择器工作，那么“左DIV \左得分”应该转到右边。
JSFiddle:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.team-info.team-pre-info.lpanel.Soccer
div.team-info.team-final-
浏览 4提问于2016-04-26得票数 0
回答已采纳
2回答
我正在使用JQuery UI创建一个模式窗口，该窗口弹出并提示您在表单中输入一些信息。如果用户不输入所需的信息，则文本字段将以红色边框高亮显示。
但是，由于我手动更改了字段的边框，因此边框仅更改为文本区域的红色。尽管我的输入和textfield有相同的CSS规则，但我的结果是不同的。
输入字段的错误：
Textarea的错误：
CSS:
#emailField input, textarea
{
padding: .7em;
border-radius: 5px;
border: 1px solid #999;
}
.ui-state-error,
浏览 5提问于2013-10-09得票数 1
回答已采纳
3回答
我认为我的CSS写得很好，但我似乎不明白为什么会出现这个问题。我一定是做错了什么。
因此，如果我想选择多个div的子元素，我可以这样写：
#mydiv > input, label{
}
我说的对吗？我原以为这是真的，直到我意识到我的站点中的其他输入和标签正在继承这些CSS属性，尽管它们不在名为#mydiv的div中。要解决我不得不使用的问题：
#mydiv > input, #mydiv > label {
}
但我很确定这不是最快的方法。我尝试查看W3.org上的，但他们没有针对我的情况给出示例。
我做错了什么？
浏览 0提问于2012-08-07得票数 2
回答已采纳
我正在查看Nokogiri::CSS的源代码，因为我需要将CSS选择器转换为XPATH。在运行示例代码并调用xpath_for方法之后，我看到它返回一个数组。为什么会这样呢？CSS选择器是否有可能返回多个xpath？
[18] pry(main)> Nokogiri::CSS.xpath_for 'div.divddy input:first'
=> ["//div[contains(concat(' ', @class, ' '), ' divddy ')]//input[position() = 1]
浏览 2提问于2012-05-09得票数 2
回答已采纳
3回答
刮除逗号
、、、
import scrapy
import pandas as pd
from ..items import HomedepotpricespiderItem
from scrapy.http import Request
class HomedepotspiderSpider(scrapy.Spider):
name = 'homeDepotSpider'
allowed_domains = ['homedepot.com']
start_urls = ['https://www.homedepot.com/pep
浏览 7提问于2020-11-12得票数 0
回答已采纳
在JQuery中的单行中编写两个或多个元素样式，其中由json object.value创建的连接文本的元素的id
checkSucess = function(first,last,value) {
// Jquery ajax with url,params and response
doPost('sucess.php',
'first=' + first +
'&last=' + last,
浏览 1提问于2011-12-05得票数 1
回答已采纳
2回答
我想用and操作符绑定两个css选择器，例如：
$( 'input[class*="ng-invalid"] input[type="number"]')
表示$( 'inputclass*="ng-invalid") &&(inputtype="number"')
但它不会返回任何结果，无论我有什么。
浏览 1提问于2015-11-19得票数 0
2回答
你能在jQuery做一些像(a || b).click()这样的事情吗？
当点击a或b时，我正在尝试发生一些事情。在下面的示例中，我希望它在任何地方显示为button[i]，因为它旁边有一个menubutton[i]，这样所有事情都可以在单击button[i]或menubutton[i]时发生。
for (let i = 0; i < 4; i++) {
$(button[i]).click(function() {
if (divClosed[i]) {
$('#icons-pattern-main').css({
'he
浏览 2提问于2022-03-03得票数 0
回答已采纳
.css
.Fchkbox, .Fchkbox-lg {
position: absolute;
display: block;
margin-top: 10px;
}
这里我得到了样式属性值，如果
1>getStyleRuleValue("margin-top",".Fchkbox");
result:-10px;
2>getStyleRuleValue("margin-top", ".Fchkbox-lg");
所以在这里，我没有得到作为10px....why的结果？我怎么解决这个问题？
浏览 4提问于2016-10-24得票数 0
以下CSS代码：
<style type="text/css">
#box1 div.spec2 p,
#box1 #box2 p {
color: blue;
}
#box1 #box3 p {
color: green;
}
</style>
这两个规则都针对元素<p>，其中的文本具有green颜色。
我认为应该是blue，因为在第一条规则中有3 ids，1 class和2 tags，在第2条规则中只有2 ids。然而，网站计算的特异性表明：
第一条规则具有特异
浏览 2提问于2017-05-13得票数 2
回答已采纳
我有两个带float:左侧的块，所以显示取决于页面的宽度：
[Block A] [Block B]
或
[Block A]
[Block B]
有用来区分这两种情况的css选择器吗？例如，它可能是
.block:below { margin-left: 20px; }
浏览 4提问于2017-03-16得票数 0
回答已采纳
3回答
我不是CSS专家，但我相信我的代码应该能工作(?)。
我可以在不应用任何类的情况下使代码工作，但有时我需要限制继承类中的某些表。
工作，而不应用<table>中的类。
在<table>中应用类时不工作。
浏览 2提问于2015-01-14得票数 1
回答已采纳
在下面的代码中，我想在值域中使用"or“"and”运算符，这样，如果我发现不同的css选择器指向相同的位置，我就不必每次都写一个新的步骤。提前谢谢你
{
"name": "cardAccount.accountHolder",
"locator": {
"locatorType": "BY_CSSSELECTOR",
"value": "#login>div>b || #login>span"
}
浏览 0提问于2014-07-20得票数 0
我使用的是jQuery 1.6.2
我正在尝试将表格的第一个和最后一个单元格变为黄色。
基本上，我使用两行代码来完成此任务。
$("tr:first").children("td:first").css("background", "yellow");
$("tr:first").children("td:last").css("background", "yellow");
如何将这两个过滤器组合在一起，以获得一行中的第一个和最后一个tds？
浏览 0提问于2011-11-29得票数 3
回答已采纳
我对CSS选择器有点困惑，我知道如果多个css选择器有相似的属性，我们可以用逗号对它们进行分组，但是如果多个css选择器没有逗号呢?例如：
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
浏览 2提问于2012-12-09得票数 13
回答已采纳
1回答
我在不同的透明标签上使用mouseover和mouseleave来交换页面上的背景图像。如果我单击其中一个标记，函数将退出，鼠标悬停在背景图像上。单击时还会将div显示设置为block，这在css中设置为none。我有另一个点击函数，它将背景图像设置为原始背景图像，并将div重置为无显示。我知道有一种更有效的方法可以做到这一点，而不是编写这两个函数14次，但我不确定如何……
$(document).ready(function() {
$('.tips-number-14').on({
mouseover: function(){
浏览 0提问于2015-06-02得票数 0
2回答
HTML5占位符总是略高于输入的中心，所以我尝试使用CSS (比如::-webkit-input-placeholder )将它们向下推。因为某种原因，我不能组合选择器。这里有一个Fiddle演示了这个：
我不想将它们分开，因为我使用的CSS压缩工具自动组合行。现在，我可以手动分离它们，但是在将来，我会忘记我不能组合这些行。
浏览 1提问于2014-02-17得票数 7
回答已采纳
我刚刚发现了Skeleton样板，它使用网格。这是github上的css：
不同的列类布局为.one.columns、.two.columns等。
我以前没有在CSS中看到过这种语法。
假设.one.columns {}与.one, .columns {}不同，前者只影响带有class="one columns"的元素，而后者影响带有class="one"和class="columns"的两个元素，这样的假设是否正确
这就是：
.one.columns = .one AND .columns
.one, .columns = .one OR .
浏览 2提问于2012-07-26得票数 0
回答已采纳
6回答
我有以下CSS：
.foo .bar {
background: red;
}
它可以很好地处理以下HTML：
<div class="foo">
<div class="bar">I have a red background</div>
</div>
但是当我不在父/子关系中时，我似乎找不到重用CSS定义的方法。例如，如何将相同的CSS应用于以下DIV：
<div class="???">I want a red background!</div>
浏览 0提问于2010-01-27得票数 0
回答已采纳
2回答
我尝试在不使用file.css的情况下插入css样式，但通过jquery使用file.js，您能帮我吗？
$( document ).ready(function(){
$( ".ytp-gradient-top", ".ytp-gradient-bottom" ).css({
"border": "3px solid red"
)};
)};
浏览 3提问于2017-10-06得票数 0
回答已采纳
我有一个这样的选择器
var word = 'word';
$('#id tr:not(.class):has(*>a[href*="'+word+'"])').css('color','red')
这只适用于一个词。
如何让它搜索多个单词(超过10个)？
浏览 1提问于2014-05-30得票数 0
回答已采纳
我使用这个类来解析.css文件。我认为这很简单，但是这个类很复杂，而且我对面向对象编程完全陌生，所以我遇到了一个问题。
(...)包括所有类文件等。
$oParser = new CSSParser(file_get_contents('files/sample.css'));
$oDoc = $oParser->parse();
$selectors=$oDoc->getAllRuleSets();
$nazwy=$oDoc->getContents();
foreach($selectors as $selektor=> $val)
{
浏览 2提问于2012-06-20得票数 1
回答已采纳
4回答
选择多个元素jQuery
、、、、
我是jQuery的新手，所以如果这听起来很愚蠢，请不要跳过我。我想知道是否有一种方法可以选择“#ammountest2”、"input“和"textarea”，这样我就可以用一个选择器同时隐藏和清除其中的所有值，这样我就不必拼写出每个值。比如兄弟姐妹或父母。这样我就可以在末尾加上：".val('').css('display'，none')“
$('#ammountbest').change(function () {
var ammountbest = ""
$('#ammountbes
浏览 2提问于2012-08-11得票数 2
回答已采纳
1回答
我想要dropdown类的隐形。dropdown只用于特定的li标记。我试过了，但没用：
.dropdown{
display:none;
}
有办法让这件事成功吗？我在CSS中做错什么了吗？
HTML：
<div id="MainNavigation" class="nContainer" name="MainNav" value="MainNavigation">
<ul class="nav navbar-nav">
<li class="
浏览 2提问于2014-09-03得票数 0
回答已采纳
$(document).on('click','#closeNewProductExpand', function() {
$('#newProductExpand').css('width', '0');
});
$(document).on('click', '#searchProduct', function() {
$('#newProductExpand').css('width', &#
浏览 8提问于2021-07-10得票数 1
回答已采纳
我目前有不同的CSS类，但用于具有相同类(ChildClass)的子类的元素。当父类处于活动状态时，我希望更改子类的不透明度。现在，我正在使用许多CSS声明(参见下面的示例)来执行此操作。一次申报就能做到这一点吗？
电流CSS
.class1 {
...elided...
}
.class2 {
...elided...
}
.class1:active .ChildClass {
...elided...
}
.class2:active .ChildClass {
...elided...
}
对于这两种情况，子类的更改都是相同的。我能做这样的事吗？
浏览 4提问于2013-10-23得票数 0
回答已采纳
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
腾讯云开发者
