CSS选择器:父类与子类匹配
CSS选择器是一种用于选择HTML或XML文档中特定元素的模式。父类与子类匹配是一种CSS选择器的方式，它可以选择父元素下的特定子元素。
父类与子类匹配的选择器语法是通过在父元素选择器后面加上空格，然后跟上子元素选择器来实现的。例如，如果我们想选择所有父元素为<div>的子元素为<p>的情况，可以使用以下选择器：
div p {
/* CSS样式规则 */
}这个选择器会匹配所有在<div>元素内部的<p>元素。
父类与子类匹配的选择器可以用于实现特定的样式效果或者选择特定的元素。它在前端开发中非常常见，可以用于设计网页布局、样式控制和选择特定的DOM元素。
腾讯云提供了一系列与CSS选择器相关的产品和服务，例如腾讯云CDN（内容分发网络）可以加速网页加载速度，提供更好的用户体验。您可以通过以下链接了解更多关于腾讯云CDN的信息：
请注意，以上提供的链接仅供参考，具体的产品选择应根据实际需求进行评估和决策。
相关·内容
下面的代码片段如所示：
<Slider
aria-label="time-indicator"
size="small"
value={position}
min={0}
step={1}
max={duration}
onChange={(_, value) => setPosition(value as number)}
sx={{
color: theme.palette.mode === 'dark' ? '#fff' : 'rgba(0,0,0,0.87)&
浏览 9提问于2022-09-18得票数 0
2回答
我是相当新的，较少，并一直试图让一个jQuery插件与我的自定义CSS生成通过更少。基本上，我拥有的是由插件生成的以下html：
<div class="classA class B" ....>
<div class="classC classD" ....>
<div class="classE classF" ....>
..........
我不知道如何构造我的较少的文件，以生成符合上述的CSS。
我试过：
.classA {
浏览 3提问于2015-03-08得票数 1
回答已采纳
2回答
我正在查看一些遗留代码，并在css文件中发现如下所示：
.user_modal {
width: auto;
height" auto;
&.modal,
&.fade.in
{
margin-top:0;
margin-left:0;
top:83px;
}
}
“这里”的目的是什么？
浏览 6提问于2014-03-21得票数 0
回答已采纳
我在弄清楚这个问题上有些困难。我有一个无序列表菜单，我想用文件夹图标设置所有最后元素的样式，并用plus.gif图像设置所有可展开(父)元素的样式。我想通过jquery使用.addclass()简单地更改类，jquery将包含用来添加背景图像的css。我下面的jquery代码只选择了": last -child"，即在列表中的最后一个元素上放置一个文件夹图标。我需要在所有没有孩子的“li”前面放一个文件夹图标，在所有有孩子的“li”前面放一个加号图标。有没有办法做到这一点？
这是我的HTML：
<ul id="nav">
<li>Hea
浏览 2提问于2010-03-24得票数 4
回答已采纳
4回答
在我的HTML中，有2行具有相同的类。我希望能够只针对第一个元素，但似乎无法弄清楚。我能够针对这两个元素，但是当我更改CSS以选择第一个子元素时，它不会返回任何内容。
下面是CSS和重复的类
如果我使用svg g.highcharts-axis-labels，它将选择这两个元素。
我试着像下面这样选择第一个子元素，但是它没有返回任何CSS元素。
svg g.highcharts-axis-labels:nth-child(1)
有人能指出我正在犯的错误吗。
浏览 2提问于2014-09-05得票数 1
回答已采纳
我想定位有photo类的图像。然而，nth-child并没有在这个元素上工作。我寻找了很多解决方案，但都不能解决！
.container {
height: 100vh;
position: relative;
}
.irene {
position: absolute;
top: 10%;
left: 10%;
width: 60vw;
}
.irene-img {
position: relative;
}
.irene-img::after {
content: ' ';
z-index: -1;
position: ab
浏览 0提问于2019-08-14得票数 0
给定如下定义的输入：
<input type="text" id="connectionsCount" />
这段代码不应该排除原本会执行的操作吗？
$(".cartOption .value .input").not('#connectionsCount').each(function () {
浏览 0提问于2010-08-25得票数 0
回答已采纳
在WordPress中，它使用li声明菜单项，两个CSS声明#navigator > li和#navigator li的区别是什么？
浏览 1提问于2014-09-25得票数 0
回答已采纳
我有一个带有一些样式的td的表格(我放了截图，因为td的内容很大)
现在，我想在这个表中添加一些css，因此我尝试逐个选择它的td，如果它的类是这样的，并应用如下样式：
jQuery(".graTabbedComponentDefaultTabs").parent('table').css('position','relative');
但是什么都没有happens....Do你看到问题了吗？
提前谢谢。
浏览 3提问于2011-04-06得票数 0
回答已采纳
2回答
我记得不久前在网上看过一段视频，那是雅虎的一位工程师的演讲，他在视频中提到CSS选择器是由浏览器读取的，从右到左，而不是从左到右。这意味着#body .header .links a实际上会取出页面上的所有锚点，过滤那些具有links类的父类的锚点，这些锚点的父类是header的父类，而这些父类的父类的id为body。
我找不到视频，我想知道是否有人有任何参考资料来加强这一点，或者它是不正确的？这不是意味着像#body .header .links li a这样的东西实际上比只说#body .links a慢吗？假设两者都能在给定的页面上工作。
浏览 2提问于2010-02-24得票数 2
回答已采纳
1回答
我有一个带有标签的复选框，在我的css中，这个标签的宽度设置为10厘米，在我的表单中，我有多个标签，但是对于我的一个标签，我希望它跨越整个页面，而不是10厘米。我不想覆盖，如果可能的话，因为这会破坏我的其他形式的外观，因为那里有其他标签等。如何才能为一个复选框标签做到这一点？
浏览 2提问于2014-04-29得票数 0
回答已采纳
我是CSS和SCSS的新手。
在以下代码中，
.title {
width: 718px;
&.sub-title {
width: 938px;
}
}
&.是什么意思？这和筑巢课一样吗？
浏览 1提问于2012-04-03得票数 79
回答已采纳
5回答
为了给出一个简化的例子，我在页面上多次重复下面的代码块(它是动态生成的)：
<div class="box">
<div class="something1"></div>
<div class="something2">
<a class="mylink">My link</a>
</div>
</div>
单击后，我可以使用以下命令访问该链接的父链接：
$(".mylink").clic
浏览 4提问于2010-03-08得票数 96
回答已采纳
1回答
我想弄清楚css是不是选择器。如果页面没有‘InfoRow’类，我会尝试隐藏一个名为“home”的div
我的第一次尝试是：
:not(body.home #InfoRow) {
display:none;
}
浏览 2提问于2020-10-25得票数 2
2回答
我有这样一个简单的html代码：
<section class="main">
<div class="container">
<div class="row">
<header class="verticalCenter">
...
</header>
</div>
</div>
</section>
另外，我有一个
浏览 3提问于2013-09-21得票数 1
回答已采纳
我有两个div id1，id2带有相同的类'orig‘和一个带有'orig2’的div id3。在鼠标悬停在任何.orig上时，所有的divsid1、id2都会变成粉红色，而在.orig2上，鼠标悬停会使divid3变成绿色。
<div id="id1" class="orig">Some Text</div>
<div id="id2" class="orig">Second Div of name 1</div>
<div id="id3"
浏览 0提问于2013-03-03得票数 0
回答已采纳
当用户点击相关帖子时，我试图触发一个事件。
这些类保存在具有以下类的父div中：
示例:查看底部穿帽衫的孩子的照片
我的尝试是：
单击“类”，“与CSS选择器匹配”。相关--单击后单击*
HTML如下：
我就是不能让它起作用！
浏览 0提问于2019-08-16得票数 0
回答已采纳
2回答
CSS继承中断了吗？
、、、
我有嵌套的列表，在li标记中有链接。在嵌套级别x上，我想更改链接的外观。下面是一些示例代码：
CSS：
.blue a { color: blue; }
.red a { color: red; }
HTML：
<ul>
<li class="blue"><a href="#">blue-1</a></li>
<li class="red"><a href="#">red-1</a></li>
浏览 4提问于2012-07-06得票数 0
2回答
我需要隐藏第一个tr.snip行
为什么这个CSS不能工作？
.table tr.snip:first-child {
display:none!important;
}
html
<table>
<tbody>
<tr>...</tr>
<tr class="snip">...</tr>
<tr class="snip">...</tr>
</tbody>
</table>
浏览 0提问于2019-07-27得票数 0
回答已采纳
如何选择所有有“测试类”子类的div？
哇，这被标记为的复制。我读了这个问题这个问题真的是重复的..。然而，我和我想，如果她/想要做我在我的标题中描述的事情，那么没有人会发现这个糟糕的标题问题。
1) CSS有父选择器，但我们正在寻找其他东西
( 2)问题标题是:是否有CSS子选择器？
浏览 0提问于2013-05-03得票数 0
4回答
这个问题听起来可能有点奇怪/新手/愚蠢。请耐心听我说。
下面的代码是我使用CSS、HTML和coldfusion创建的网页的一小部分。
<head>
---------------------Part 1--------------------------------------
<CFIF CompareNoCase('#aid#', 0)>
<cfinclude template="show.cfm">
<cfabort>
浏览 2提问于2012-04-13得票数 4
回答已采纳
3回答
我想在路由器和RouterModule之外创建具有视图层次结构的组件 示例： comp-parent.ts @Component({
selector: 'comp-parent',
template: `
<p>parent works</p>
<router-outlet></router-outlet>
`,
styleUrls: ['./comp-parent.css']
})
export class ComponentParent {
浏览 26提问于2019-02-14得票数 0
2回答
我有如下的div结构
<div class="section-outer">
<div class="section-inner">
<div class="type-1"> Hi </div>
<div class="type-2">sub contents 1</div>
<div class="type-2">sub contents 2</div&g
浏览 6提问于2014-03-16得票数 2
回答已采纳
我有一个查询，它提取产品类别并在div中列出它们。现在，我想向前3条记录提取的css类添加一个页边距底部。
css
.icons-box {padding: 20px 10px 10px 10px;}
php：
$cat_list = "SELECT *
FROM tbl_category
WHERE cat_parent_id >0 ORDER BY cat_id ASC";
$result_list = dbQuery($cat_list);
浏览 1提问于2014-04-08得票数 0
我把我的video-js播放器放在一个百分比宽度的容器里，它终于可以漂亮地调整大小了。但是，控件被放置在视频的顶部而不是底部，并且暂停按钮将不起作用。滑块、音量和全屏都可以工作，但不能暂停。我已经尝试了4.2和4.2.1，但都没有成功。如果我使用托管在这里的版本："“，暂停可以工作，但控件仍然放在顶部。
我已经在firefox和chrome上测试过了，但没有成功。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<tit
浏览 1提问于2013-09-18得票数 0
1回答
我买了一个Joomla模板，但我没有支持订阅，所以我需要自己修改样式。
我想改变背景的突出显示的“紫色”在左侧，与图像背景。
在图像的左边是代码。
我想要放置一个CSS覆盖放置一个图像背景。
浏览 3提问于2021-02-12得票数 0
4回答
我发现了一个奇怪的错误，其中CSS :first-child选择器似乎无法为我选择表行。
我有下表
<table>
<tr class="a">
<td>a</td>
</tr>
<tr class="b">
<td>b</td>
</tr>
<tr class="b">
<td>b</td>
</tr&
浏览 6提问于2014-04-04得票数 1
回答已采纳
3回答
在这段代码中，我有一个类似下面这样的段落
<p class="special">
This is just a test. <em>what color here</em> inheritance work
</p>
我想知道为什么字符串"what color here“不从父p元素获取颜色。我的意思是，特殊类的特异值是10，而像em这样的类型的特异值是1，所以这里10大于1。
所以我的意思是颜色应该取自选择器.special
这是标记和css
<!DOCTYPE html>
<html>
浏览 0提问于2013-09-05得票数 2
jquery中的:nth-child(even)和:even看起来很相似，但选择了不同的元素。请告诉我有什么不同。
快乐的编码...
浏览 1提问于2011-08-03得票数 4
回答已采纳
第一次发帖，当前学生正在学习CSS伪选择器。
问:如果一个元素是两个或多个不同父级的独生子元素，如何仅针对父级中的一个使用独子元素？
上下文:我在CSS Diner上的独生子课程。布局如下:苹果在盘子上，泡菜在盘子上，泡菜在便当上，大橙子和小橙子在盘子上，泡菜在桌子上。我应该用独生子来选择盘子里的苹果和泡菜。这个场景中的模板是父元素。
显然，盘子里的苹果应该是苹果:独生子。然而，我被困在了泡菜上，因为它是盘子和便当的独生子。我的想法是简单地使用plate>pickle，但从课程中听起来，我应该能够通过独生子选择器以某种方式做到这一点。
那么，有没有一种方法可以用独生子来选择盘子上的泡菜而
浏览 0提问于2017-02-16得票数 1
3回答
网站上有一些“内容”类的帖子。 如果"content“类包含另一个名为"rcm”的类和一个块引用，则块引用需要一个css规则。 示例 帖子1： 帖子2： 帖子3： 目标： 只有帖子中的块引用 编号1 我需要下面的css规则，因为只有在Nr.1中，"content“类才有"rcm”类和"blockquote"： $("blockquote").css({"display": "inherit", "width": "auto"}); 我试过了： if (($("
浏览 52提问于2021-03-01得票数 -3
回答已采纳
我不是CSS方面的专家，所以下面的内容让我感到困惑。我对CSS优先级的基本理解是，声明越具体，它的优先级就越高。
因此，我认为这两个链接应该具有相同的颜色，因为在这两种情况下，最内部的元素都有类.inner。但是在我用firefox和chrome(基于)进行的测试中，在第一个链接上应用了a的.container下降规则。
.container a{
color: green;
}
.inner {
color: red;
}
<div class="container">
<a href="google.com" class
浏览 0提问于2016-06-16得票数 2
回答已采纳
因此，对于每个带有".protected_wrap“类的div，我需要上升3个级别，然后向该div添加一个类或css。
我的代码
$( "div.protected_wrap" ).parents().eq(2).className( "hidephotos" )
$( "div.protected_wrap" ).parents().eq(2).css( "display", "none" );
第三个div是".photo_item_wrap“，但是没有做任何事情，比如添加css或类。
似乎什
浏览 0提问于2018-08-30得票数 0
回答已采纳
注:见下文以获得更清晰的解释
我想弄清楚为什么会发生这种事。
<div class="chicken">
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento</div>
<div class="big-chix">Contento
浏览 3提问于2013-09-03得票数 2
回答已采纳
2回答
我想要实践，甚至是最好的实践，用Html+JS+CSS.我只使用一页客户端的Sudoku页面。我的Sudoku标记基本上是一个<table>，带有<td>。
(我愿意听取改善这方面的建议)。
我的要求：
在focus (焦点的键盘概念)下有一个单元格(通过箭头键(加上家庭等)将css突出显示为黄色的css)。类型--将该值设置为当前聚焦的单元格的整数值。
我在每个单元格内使用一个输入按钮。Javascript很好用。
我唯一的问题是显示器。当一个单元格有焦点时，它的高亮显示并不覆盖整个TD，而只是包含在输入按钮中的视觉空间。我在按钮周围有一些不是“黄色”的空间。
我不认
浏览 2提问于2009-08-02得票数 1
回答已采纳
当设置黑色背景时，我要标记为.light的颜色从第二select中消失，
我的CSS怎么了？
body[data-background="Black"] {
background: black
}
body[data-background="Black"] option .light {
display: none !important;
}
<select onchange="document.getElementsByTagName('body')[0].setAttribute('data-backgrou
浏览 7提问于2015-09-13得票数 0
回答已采纳
3回答
我想简单地将一个border-bottom添加到最后一个.slab
我尝试了一些事情，但我无法理解到底发生了什么。
案例1-使用
如果我在或堆栈溢出代码段上尝试这样做，我就不会在上一次.slab上得到一个border-bottom。
如果我在上尝试这一点，或者在Chrome中单独运行代码，我就会在最后一个.slab上得到一个border-bottom。然而，如果我取消评论<div class="something">New</div>，那么border-bottom on last .slab在JSFiddle和Chrome上都会消失。
.wrapp
浏览 4提问于2015-12-25得票数 1
回答已采纳
3回答
我很困惑为什么这个例子不起作用：
CSS:
p {
color: red;
}
div:not(.exclude) p {
color: green;
}
HTML:
<div>
<div class="exclude">
<p>I should be red</p>
</div>
<div>
<p>I should be green</p>
</div>
</div>
最终的结果是，这两个<p>都是绿色的
浏览 5提问于2016-01-28得票数 9
回答已采纳
我目前正在开发一个应用程序，在该应用程序中，我从API调用数据，以查看学生在在线日志中取得了多大的进步。我使用jQuery为每个学生创建一个表来显示他们的进度--基本上，如果学生完成了某个页面，就会有一个背景颜色为绿色的元素。 下面是我正在使用的API类型的一个示例： [
{ "userId": 101,
"name": "Student1",
"lastPageCompleted": 5 },
{ "userId": 102,
"name": "Student2",
浏览 2提问于2019-03-24得票数 0
我尝试在类使用jquery的上层div上添加css。
$(document).ready(function(){
$("span").parents(".s").css({"color": "red", "border": "2px solid red"});
});
.ancestors * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
浏览 1提问于2016-04-14得票数 0
回答已采纳
我的推理错误吗?这是一个有效的CSS规则吗？
首先：
我的身份证比我的班更具体。
第二：
我的ID比父ID更具体。
但是：
父类ID我的类比我的ID更具体
。
这真的让我感到惊讶，因为我以前从未听说过这种组合，在和中都没有听说过。
浏览 2提问于2016-12-13得票数 2
回答已采纳
没有按照CSS在第三行使用第一个子级应用颜色(div.Multiple-alert.Normal:第一个子级范围)。
div.multiple-alerts .high:first-child span{ color: yellow; }
div.multiple-alerts .normal:first-child span{ color: yellow; }
<div class="multiple-alerts">
<div class="cls high"><span>high</span>&l
浏览 0提问于2017-11-17得票数 2
我一直在尝试使用后续同级组合符"~“为同一个类设置不同的样式(当它第二次出现在标记中时)，但它似乎不起作用，也许我使用"~”省略了一个细节，而且……不幸的是，我不能更改html，因为它是由cms生成的。
<div class="root">
<div class="container">
<div class="mosaic big">
<div>Red</div>
</div>
</div>
<div
浏览 24提问于2018-02-09得票数 1
3回答
如何检测未知级别以上的父代？
例如：
<div id="parent-a">
<....>
<....>
<div class="the-child" /> <!-- Comment 1 -->
</....>
</....>
</div>
<div id="parent-b">
<....>
<div class="t
浏览 3提问于2013-05-06得票数 1
1回答
详细信息
我在FirefoxDeveloperEdition工作，并经历了意想不到的选择器优先排序。我已经阅读了，并且，据我所知，我已经构建了它们应该具备的CSS选择器，以便为每个选择器达到预期的特定级别。然而，错误的声明正在被取消。
这有什么问题吗？难道我不完全被选择者的特殊性的工作方式所包围吗？这是个虫子吗？或者别的什么？
工程守则(简化)
/index.html
<head>
<link href="css/style.css">
</head>
<body>
<section class="hud&#
浏览 3提问于2015-01-06得票数 3
回答已采纳
为什么Node.removeChild()不能工作它在我的JavaScript文件的最后部分？我知道CSS/HTML并不完美。大多数HTML都来自于一个模板。JavaScript才是我真正关心的。Node.removeChild()方法从DOM中删除一个子节点，并返回删除的节点。不过，我不需要返回已删除的节点。 const mainHeader = document.querySelector(".main-header") ;
const mainFooter = document.querySelector(".main-footer") ;
cons
浏览 15提问于2019-04-12得票数 1
回答已采纳
4回答
如何将跨度添加到父菜单
、、、
如何为具有子元素(ul.sub- ul.menu li )菜单li添加具有箭头图片的跨度。
HTML
<ul class="menu">
<li><a href="#">hhh</a></li>
<li><a href="#">hhh</a>
<ul class="submenu">
<li><a href="#">kkk<
浏览 2提问于2013-10-23得票数 0
我正在创建一个使用UL/LI结构的菜单系统。我正在尝试使用同级选择器来悬停/显示子菜单。
我正在使用这个；
#MainMenu li.Sel ul li.HasSub a:hover+ul {
display: block;
}
UL结构应该是这样的；
<ul id='MainMenu'>
<li class='Sel'>
<a href='#'>Click Me</a>
<ul>
<li class='Ha
浏览 0提问于2009-10-23得票数 5
回答已采纳
6回答
如果在浏览器中查看以下代码，则链接显示为红色。我希望它是绿色的，因为次要div嵌套在主div中。它看起来颜色是由css文件中元素的顺序决定的。如果我在.secondary之后移动.primary，链接是绿色的。
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.sec
浏览 0提问于2014-03-07得票数 4
回答已采纳
我在python工作，在Scrapy库的帮助下制作爬虫。当我使用选择器response.xpath和response.css获取数据时，结果就不同了。就像我使用xpath时一样，它没有显示结果，如果我用css替换xpath，那么它将显示结果。请帮助我理解这个概念。
xpath查询
img = response.xpath('//div[@class="product-images"]//img/@src').extract()
css查询
img = response.css('div.product-images img::attr(src)
浏览 1提问于2017-08-01得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
