#html #css #svg #nested #css-selectors
#HTML #CSS #svg #вложенный #css-селекторы
Вопрос:
Мое, по общему признанию, нечеткое понимание состояло в том, что .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 gt; 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;} lt;footer id='welcomeFooter'gt; lt;div class='thumb'gt; lt;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"gt;lt;g class = "thBack"gt;lt;ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b"/gt;lt;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"/gt;lt;rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b"/gt;lt;/ggt;lt;ellipse class = "thBack"" cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff"/gt;lt;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"/gt;lt;/svggt; lt;/divgt; lt;div class='thumb'gt; lt;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"gt;lt;ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b"/gt;lt;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"/gt;lt;rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b"/gt;lt;ellipse cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff"/gt;lt;ggt;lt;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"/gt;lt;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"/gt;lt;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"/gt;lt;/ggt;lt;/svggt; lt;/divgt; lt;div class='thumb'gt; lt;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"gt;lt;ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b"/gt;lt;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"/gt;lt;rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b"/gt;lt;ellipse cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff"/gt;lt;ggt;lt;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"/gt;lt;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"/gt;lt;/ggt;lt;/svggt; lt;/divgt; lt;/footergt; Желаемый результат здесь таков
- Обычный значок отображается белым цветом без слоев белого и оранжевого фона.
- Поднятый значок отображается черным цветом со слоями белого и оранжевого фона
Я ожидал .raised .thBack .raised .thIcon , что здесь сработают селекторы и селекторы. Очевидно, что это не так. Что я делаю не так?
Ответ №1:
Вы не добавили thBack thIcon классы и к оставшимся двум SVG:
lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;stylegt; #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; } .thumbgt;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; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;footer id='welcomeFooter'gt; lt;div class='thumb'gt; lt;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"gt; lt;g class="thBack"gt; lt;ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b" /gt; lt;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" /gt; lt;rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b" /gt; lt;/ggt; lt;ellipse class="thBack"" cx=" 258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff" /gt; lt;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" /gt; lt;/svggt; lt;/divgt; lt;div class='thumb'gt; lt;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"gt; lt;ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b" /gt; lt;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" /gt; lt;rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b" /gt; lt;ellipse class="thBack" cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff" /gt; lt;g class="thIcon"gt; lt;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" /gt; lt;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" /gt; lt;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" /gt; lt;/ggt; lt;/svggt; lt;/divgt; lt;div class='thumb'gt; lt;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"gt; lt;ellipse cx="258.291" cy="208.739" rx="233.164" ry="208.739" style="fill:#ff971b" /gt; lt;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" /gt; lt;rect x="21.27" y="276.39" width="477.576" height="23.14" style="fill:#ff971b" /gt; lt;ellipse class="thBack" cx="258.911" cy="236.169" rx="217.715" ry="228.321" style="fill:#fff" /gt; lt;g class="thIcon"gt; lt;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" /gt; lt;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" /gt; lt;/ggt; lt;/svggt; lt;/divgt; lt;/footergt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. Краснеет смайлик невозможно в комментариях 🙁