SVG中嵌套类的CSS选择器
Posted
技术标签:
【中文标题】SVG中嵌套类的CSS选择器【英文标题】：CSS selector for nested class in SVG 【发布时间】：2022-01-10 08:34:31 【问题描述】：毫无疑问，我的理解是，.classA .classB 表示一个选择器，该选择器将定位带有 classB 的元素，这些元素嵌套在带有 classA 的另一个元素中。但是，我在下面的示例中看到的内容并未证实这一点。
#welcomeFooter
position:fixed;
display:flex;
justify-content:space-around;
width:100%;
left:0;
right:0;
bottom:0;
z-index:1000;
height:4em;
background-color:orange;
.thumb
position:relative;
width:2em;
.thumb > svg
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
pointer-events:all;
cursor:pointer;
.thBack
visibility:hidden;
.raised
top:-30% !important;
bottom:30% !important;
.raised .thBack
visibility:visible !important;
.thIconfill:white;
.raised .thIconfill:black;<footer id='welcomeFooter'>
<div class='thumb'>
<svg id="search" class="raised" viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><g class = "thBack"><ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b"/><path d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z" style="fill:#ff971b"/><rect x="21.27" y="276.39" style="fill:#ff971b"/></g><ellipse class = "thBack"" cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff"/><path d="m397.045 325.403-64.573-64.578a112.914 112.914 0 0 0 17.339-60.268c0-62.681-50.814-113.489-113.494-113.489s-113.489 50.808-113.489 113.489c0 62.685 50.807 113.487 113.489 113.487 23.18.03 45.817-7.076 64.822-20.347l63.805 63.81a22.648 22.648 0 0 0 16.051 6.635 22.663 22.663 0 0 0 16.057-6.635c8.802-8.808 8.798-23.298-.007-32.104Zm-160.728-48.127c-42.366 0-76.714-34.346-76.714-76.714 0-42.367 34.348-76.716 76.714-76.716 42.368 0 76.713 34.349 76.713 76.716 0 42.368-34.345 76.714-76.713 76.714Z" style="fill-rule:nonzero" class="thIcon"/></svg>
</div>
<div class='thumb'>
<svg id='home' viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b"/><path d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z" style="fill:#ff971b"/><rect x="21.27" y="276.39" style="fill:#ff971b"/><ellipse cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff"/><g><path d="M383.118 276.368a6.084 6.084 0 0 0-4.278-1.777 6.085 6.085 0 0 0-4.278 1.777 6.105 6.105 0 0 0-1.773 4.287c0 1.595.647 3.16 1.773 4.287a6.09 6.09 0 0 0 4.278 1.778 6.085 6.085 0 0 0 4.278-1.778 6.109 6.109 0 0 0 1.774-4.287 6.112 6.112 0 0 0-1.774-4.287Z" style="fill-rule:nonzero"/><path d="M411.52 358.278h-26.628V301.88c0-3.348-2.71-6.064-6.052-6.064-3.341 0-6.051 2.716-6.051 6.064v56.398H181.554v-57.004c0-3.349-2.71-6.064-6.052-6.064-3.342 0-6.052 2.715-6.052 6.064v57.004h-16.945V198.789l110.142-86.165 110.142 86.165v57.609c0 3.349 2.71 6.065 6.051 6.065 3.342 0 6.052-2.716 6.052-6.065v-48.14l1.058.827a6.042 6.042 0 0 0 8.003-.491l21.828-21.874a6.076 6.076 0 0 0-.556-9.069l-36.385-28.464V88.418c0-3.349-2.71-6.064-6.051-6.064h-35.075c-3.342 0-6.052 2.715-6.052 6.064v23.86L266.371 61.2a6.06 6.06 0 0 0-7.448 0L110.068 177.651a6.074 6.074 0 0 0-.555 9.069l21.828 21.874a6.065 6.065 0 0 0 8.003.491l1.058-.827v150.02h-26.628c-3.341 0-6.051 2.716-6.051 6.064 0 3.349 2.71 6.065 6.051 6.065H411.52c3.341 0 6.051-2.716 6.051-6.065 0-3.348-2.71-6.064-6.051-6.064ZM343.766 94.482h22.971v45.236l-22.971-17.971V94.482ZM136.115 196.225l-13.205-13.233L262.647 73.673l139.737 109.319-13.205 13.233-122.808-96.075a6.039 6.039 0 0 0-7.448 0l-122.808 96.075Z" style="fill-rule:nonzero"/><path d="M320.744 192.117H204.55c-3.341 0-6.051 2.715-6.051 6.064v116.434c0 3.349 2.71 6.065 6.051 6.065h116.194c3.341 0 6.051-2.716 6.051-6.065V198.181c0-3.349-2.71-6.064-6.051-6.064Zm-64.149 116.434h-45.993v-46.088h45.993v46.088Zm0-58.217h-45.993v-46.088h45.993v46.088Zm58.097 58.217h-45.993v-46.088h45.993v46.088Zm0-58.217h-45.993v-46.088h45.993v46.088Zm-139.19 20.925c-3.342 0-6.052 2.715-6.052 6.065v.097c0 3.349 2.71 6.065 6.052 6.065 3.342 0 6.052-2.716 6.052-6.065v-.097c0-3.349-2.71-6.065-6.052-6.065Z" style="fill-rule:nonzero"/></g></svg>
</div>
<div class='thumb'>
<svg id='map' viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b"/><path d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z" style="fill:#ff971b"/><rect x="21.27" y="276.39" style="fill:#ff971b"/><ellipse cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff"/><g><path d="M187.122 221.773H173.88c-3.465.001-6.612 2.173-7.984 5.51l-36.656 89.512 87.055-46.629c-10.421-15.122-20.733-31.801-29.173-48.393Zm168.421 5.51c-1.37-3.337-4.517-5.509-7.982-5.51H334.32c-15.941 31.327-39.164 63.7-53.937 81.51-10.39 12.498-28.948 12.483-39.322 0-1.061-1.277-6.6-8.004-14.231-18.347l-15.694 8.411 59.369 62.14 112.492-61.16-27.454-67.044ZM118.53 342.954l-4.734 11.564c-2.452 5.985 1.746 12.668 7.981 12.668h127.479c.798-.621.807-.584 5.087-2.911l-59.456-62.222-76.357 40.901Zm289.117 11.565-17.788-43.437-103.194 56.104h113c6.22 0 10.437-6.672 7.982-12.667ZM269.405 139.375c0-5.013-3.897-9.088-8.684-9.088-4.79 0-8.685 4.075-8.685 9.088 0 5.011 3.895 9.089 8.685 9.089 4.786 0 8.684-4.078 8.684-9.089Z" style="fill-rule:nonzero"/><path d="M267.274 290.75c2.924-3.52 71.603-86.835 71.603-144.105 0-118.096-156.312-119.537-156.312 0 0 57.27 68.679 140.585 71.603 144.105 3.462 4.166 9.65 4.161 13.106 0Zm-32.606-151.375c0-15.035 11.687-27.265 26.053-27.265 14.363 0 26.051 12.23 26.051 27.265 0 15.033-11.688 27.263-26.051 27.263-14.366 0-26.053-12.23-26.053-27.263Z" style="fill-rule:nonzero"/></g></svg>
</div>
</footer>这里想要的结果是
正常图标显示为白色，没有白色和橙色背景层。 凸起图标显示为黑色带有白色和橙色背景层我曾预计 .raised .thBack 和 .raised .thIcon 选择器会在这里解决问题。显然他们不是。我做错了什么？
【问题讨论】：
【参考方案1】：您尚未将 thBack 和 thIcon 类添加到剩余的两个 SVG：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#welcomeFooter
position: fixed;
display: flex;
justify-content: space-around;
width: 100%;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
height: 4em;
background-color: orange;
.thumb
position: relative;
width: 2em;
.thumb>svg
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: all;
cursor: pointer;
.thBack
visibility: hidden;
.raised
top: -30% !important;
bottom: 30% !important;
.raised .thBack
visibility: visible !important;
.thIcon
fill: white;
.raised .thIcon
fill: black;
</style>
</head>
<body>
<footer id='welcomeFooter'>
<div class='thumb'>
<svg id="search" class="raised" viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
<g class="thBack">
<ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b" />
<path
d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z"
style="fill:#ff971b" />
<rect x="21.27" y="276.39" style="fill:#ff971b" />
</g>
<ellipse class="thBack"" cx=" 258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff" />
<path
d="m397.045 325.403-64.573-64.578a112.914 112.914 0 0 0 17.339-60.268c0-62.681-50.814-113.489-113.494-113.489s-113.489 50.808-113.489 113.489c0 62.685 50.807 113.487 113.489 113.487 23.18.03 45.817-7.076 64.822-20.347l63.805 63.81a22.648 22.648 0 0 0 16.051 6.635 22.663 22.663 0 0 0 16.057-6.635c8.802-8.808 8.798-23.298-.007-32.104Zm-160.728-48.127c-42.366 0-76.714-34.346-76.714-76.714 0-42.367 34.348-76.716 76.714-76.716 42.368 0 76.713 34.349 76.713 76.716 0 42.368-34.345 76.714-76.713 76.714Z"
style="fill-rule:nonzero" class="thIcon" />
</svg>
</div>
<div class='thumb'>
<svg id='home' viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
<ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b" />
<path
d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z"
style="fill:#ff971b" />
<rect x="21.27" y="276.39" style="fill:#ff971b" />
<ellipse class="thBack" cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff" />
<g class="thIcon">
<path
d="M383.118 276.368a6.084 6.084 0 0 0-4.278-1.777 6.085 6.085 0 0 0-4.278 1.777 6.105 6.105 0 0 0-1.773 4.287c0 1.595.647 3.16 1.773 4.287a6.09 6.09 0 0 0 4.278 1.778 6.085 6.085 0 0 0 4.278-1.778 6.109 6.109 0 0 0 1.774-4.287 6.112 6.112 0 0 0-1.774-4.287Z"
style="fill-rule:nonzero" />
<path
d="M411.52 358.278h-26.628V301.88c0-3.348-2.71-6.064-6.052-6.064-3.341 0-6.051 2.716-6.051 6.064v56.398H181.554v-57.004c0-3.349-2.71-6.064-6.052-6.064-3.342 0-6.052 2.715-6.052 6.064v57.004h-16.945V198.789l110.142-86.165 110.142 86.165v57.609c0 3.349 2.71 6.065 6.051 6.065 3.342 0 6.052-2.716 6.052-6.065v-48.14l1.058.827a6.042 6.042 0 0 0 8.003-.491l21.828-21.874a6.076 6.076 0 0 0-.556-9.069l-36.385-28.464V88.418c0-3.349-2.71-6.064-6.051-6.064h-35.075c-3.342 0-6.052 2.715-6.052 6.064v23.86L266.371 61.2a6.06 6.06 0 0 0-7.448 0L110.068 177.651a6.074 6.074 0 0 0-.555 9.069l21.828 21.874a6.065 6.065 0 0 0 8.003.491l1.058-.827v150.02h-26.628c-3.341 0-6.051 2.716-6.051 6.064 0 3.349 2.71 6.065 6.051 6.065H411.52c3.341 0 6.051-2.716 6.051-6.065 0-3.348-2.71-6.064-6.051-6.064ZM343.766 94.482h22.971v45.236l-22.971-17.971V94.482ZM136.115 196.225l-13.205-13.233L262.647 73.673l139.737 109.319-13.205 13.233-122.808-96.075a6.039 6.039 0 0 0-7.448 0l-122.808 96.075Z"
style="fill-rule:nonzero" />
<path
d="M320.744 192.117H204.55c-3.341 0-6.051 2.715-6.051 6.064v116.434c0 3.349 2.71 6.065 6.051 6.065h116.194c3.341 0 6.051-2.716 6.051-6.065V198.181c0-3.349-2.71-6.064-6.051-6.064Zm-64.149 116.434h-45.993v-46.088h45.993v46.088Zm0-58.217h-45.993v-46.088h45.993v46.088Zm58.097 58.217h-45.993v-46.088h45.993v46.088Zm0-58.217h-45.993v-46.088h45.993v46.088Zm-139.19 20.925c-3.342 0-6.052 2.715-6.052 6.065v.097c0 3.349 2.71 6.065 6.052 6.065 3.342 0 6.052-2.716 6.052-6.065v-.097c0-3.349-2.71-6.065-6.052-6.065Z"
style="fill-rule:nonzero" />
</g>
</svg>
</div>
<div class='thumb'>
<svg id='map' viewBox="0 0 510 465" xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
<ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b" />
<path
d="M491.88 206.599c-14.818 2.847-22.802 26.23-17.816 52.184 4.986 25.955 21.065 44.716 35.884 41.869-6.553-10.119-13.485-26.72-17.089-45.479-3.603-18.759-3.316-36.747-.979-48.574ZM0 295.383c19.189 5.142 40.098-10.575 46.663-35.076 6.565-24.5-3.684-48.566-22.873-53.708 2.981 11.901 3.28 29.479-1.465 47.187S8.532 286.567 0 295.383Z"
style="fill:#ff971b" />
<rect x="21.27" y="276.39" style="fill:#ff971b" />
<ellipse class="thBack" cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff" />
<g class="thIcon">
<path
d="M187.122 221.773H173.88c-3.465.001-6.612 2.173-7.984 5.51l-36.656 89.512 87.055-46.629c-10.421-15.122-20.733-31.801-29.173-48.393Zm168.421 5.51c-1.37-3.337-4.517-5.509-7.982-5.51H334.32c-15.941 31.327-39.164 63.7-53.937 81.51-10.39 12.498-28.948 12.483-39.322 0-1.061-1.277-6.6-8.004-14.231-18.347l-15.694 8.411 59.369 62.14 112.492-61.16-27.454-67.044ZM118.53 342.954l-4.734 11.564c-2.452 5.985 1.746 12.668 7.981 12.668h127.479c.798-.621.807-.584 5.087-2.911l-59.456-62.222-76.357 40.901Zm289.117 11.565-17.788-43.437-103.194 56.104h113c6.22 0 10.437-6.672 7.982-12.667ZM269.405 139.375c0-5.013-3.897-9.088-8.684-9.088-4.79 0-8.685 4.075-8.685 9.088 0 5.011 3.895 9.089 8.685 9.089 4.786 0 8.684-4.078 8.684-9.089Z"
style="fill-rule:nonzero" />
<path
d="M267.274 290.75c2.924-3.52 71.603-86.835 71.603-144.105 0-118.096-156.312-119.537-156.312 0 0 57.27 68.679 140.585 71.603 144.105 3.462 4.166 9.65 4.161 13.106 0Zm-32.606-151.375c0-15.035 11.687-27.265 26.053-27.265 14.363 0 26.051 12.23 26.051 27.265 0 15.033-11.688 27.263-26.051 27.263-14.366 0-26.053-12.23-26.053-27.263Z"
style="fill-rule:nonzero" />
</g>
</svg>
</div>
</footer>
</body>
</html>【讨论】：
在 cmets 中无法使用脸红表情符号 :-(以上是关于SVG中嵌套类的CSS选择器的主要内容，如果未能解决你的问题，请参考以下文章