css - 覆盖 CSS 嵌套属性

Question

关于覆盖嵌套的 CSS 属性的简单问题。

我已经尝试转到此画廊样式表的源代码以了解它的基础，但我似乎无法绕过它。

我只是想改变 max-width 和

的宽度

body.gallery .asset.is-landscape img

一个新的值(value)，但即使归因于它似乎也不起作用!重要

这是有问题的 CSS，我打算将上面提到的更改更改为:

body.gallery .asset.is-landscape img, body.gallery .asset.is-square img, body.nested_gallery .asset.is-landscape img, body.nested_gallery .asset.is-square img {
    max-width: 550px;
    width: 80%;
}

这是我彻底尝试更改我认为可能会影响嵌套主体画廊的元素的整个样式表，但没有成功。请记住，我显然不是专家，这可能很容易解决。

/*
------------------------------------------------------------------
Gallery Styles
------------------------------------------------------------------
*/
html.is-changing body.gallery .main, html.is-changing body.nested_gallery .main {
  transform: translate3d(20px, 0, 0);
  opacity: 0; }

body.gallery, body.nested_gallery {
  overflow-y: hidden;
  position: relative;
  height: 100%; }
  body.gallery .page-name-small, body.nested_gallery .page-name-small {
    opacity: 1 !important;
    pointer-events: auto !important;
    top: -2px; }
  body.gallery .breadcrumb-link.bottom, body.nested_gallery .breadcrumb-link.bottom {
    -webkit-transition: opacity 250ms ease;
    transition: opacity 250ms ease;
    display: none;
    position: fixed;
    bottom: 10px;
    left: 20px;
    z-index: 96; }
    body.gallery .breadcrumb-link.bottom.hidden, body.nested_gallery .breadcrumb-link.bottom.hidden {
      opacity: 0; }
  body.gallery .overview-icon-bottom, body.nested_gallery .overview-icon-bottom {
    -webkit-transition: opacity 250ms ease;
    transition: opacity 250ms ease;
    display: none;
    cursor: pointer;
    position: fixed;
    bottom: 9px;
    right: 100px;
    z-index: 96; }
    body.gallery .overview-icon-bottom.hidden, body.nested_gallery .overview-icon-bottom.hidden {
      opacity: 0;
      pointer-events: none; }
  body.gallery .assets-container, body.nested_gallery .assets-container {
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: auto;
    overflow-y: hidden; }
    body.gallery .assets-container.is-draggable .asset.img img, body.nested_gallery .assets-container.is-draggable .asset.img img {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
    body.gallery .assets-container.is-draggable.is-dragging, body.nested_gallery .assets-container.is-draggable.is-dragging {
      cursor: grabbing !important;
      cursor: -moz-grabbing !important;
      cursor: -webkit-grabbing !important; }
  body.gallery .main, body.nested_gallery .main {
    -webkit-transition: opacity 250ms ease, -webkit-transform 250ms ease;
    transition: opacity 250ms ease, -webkit-transform 250ms ease;
    transition: opacity 250ms ease, transform 250ms ease;
    transition: opacity 250ms ease, transform 250ms ease, -webkit-transform 250ms ease;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1; }
    body.gallery .main .assets-container, body.nested_gallery .main .assets-container {
      display: flex;
      height: 100vh; }
  body.gallery .title-element, body.nested_gallery .title-element {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50vw; }
    body.gallery .title-element .text, body.nested_gallery .title-element .text {
      position: relative;
      max-width: 500px;
      padding: 20px;
      width: 80%; }
    body.gallery .title-element img, body.nested_gallery .title-element img {
      max-width: 600px;
      width: 80%; }
  body.gallery .cover-image, body.nested_gallery .cover-image {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50vw; }
    body.gallery .cover-image.is-landscape img, body.gallery .cover-image.is-square img, body.nested_gallery .cover-image.is-landscape img, body.nested_gallery .cover-image.is-square img {
      max-width: 600px;
      width: 80%; }
    body.gallery .cover-image.is-portrait img, body.nested_gallery .cover-image.is-portrait img {
      max-height: 600px;
      height: 80vh; }
  body.gallery .caption, body.nested_gallery .caption {
    max-width: 80%;
    margin-top: 20px;
    position: relative; }
    body.gallery .caption p, body.nested_gallery .caption p {
      margin: 0; }
    body.gallery .caption p + p, body.nested_gallery .caption p + p {
      margin-top: 1em; }
  body.gallery .asset, body.nested_gallery .asset {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50vw; }
    body.gallery .asset.is-landscape img, body.gallery .asset.is-square img, body.nested_gallery .asset.is-landscape img, body.nested_gallery .asset.is-square img {
      max-width: 550px;
      width: 80%; }
    body.gallery .asset.is-portrait img, body.nested_gallery .asset.is-portrait img {
      -o-object-fit: contain;
      object-fit: contain;
      max-height: 700px;
      height: 64vh; }
    body.gallery .asset.image img, body.gallery .asset.video img, body.nested_gallery .asset.image img, body.nested_gallery .asset.video img {
      cursor: pointer; }
    body.gallery .asset.video .video-thumb-container, body.nested_gallery .asset.video .video-thumb-container {
      position: relative;
      width: 80%;
      max-width: 600px; }
      body.gallery .asset.video .video-thumb-container .vimeo_cont, body.gallery .asset.video .video-thumb-container .youtube_cont, body.nested_gallery .asset.video .video-thumb-container .vimeo_cont, body.nested_gallery .asset.video .video-thumb-container .youtube_cont {
        width: 100%; }
      body.gallery .asset.video .video-thumb-container .video-play-icon, body.nested_gallery .asset.video .video-thumb-container .video-play-icon {
        -webkit-transition: all 250ms ease;
        transition: all 250ms ease;
        opacity: 0.9;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -23px;
        margin-left: -23px; }
      body.gallery .asset.video .video-thumb-container:hover .video-play-icon, body.nested_gallery .asset.video .video-thumb-container:hover .video-play-icon {
        -webkit-transform: scale(1.08);
        -ms-transform: scale(1.08);
        transform: scale(1.08);
        opacity: 1; }
    body.gallery .asset.text .text-content, body.nested_gallery .asset.text .text-content {
      max-width: 500px;
      padding: 20px;
      position: relative;
      width: 80%; }
  body.gallery .next-nested-page, body.nested_gallery .next-nested-page {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 50vw; }
    body.gallery .next-nested-page .nexted-nested-page-title, body.nested_gallery .next-nested-page .nexted-nested-page-title {
      padding-left: 20px;
      padding-right: 110px; }
      body.gallery .next-nested-page .nexted-nested-page-title .title, body.nested_gallery .next-nested-page .nexted-nested-page-title .title {
        color: #ffffff;
        font-family: "Miller Banner Black", "Miller Banner Black", serif;
        font-size: 19px;
        font-weight: normal; }
      body.gallery .next-nested-page .nexted-nested-page-title .see-more, body.nested_gallery .next-nested-page .nexted-nested-page-title .see-more {
        color: rgba(40, 40, 40, 0.75);
        font-size: 14px; }
    body.gallery .next-nested-page.is-landscape img, body.gallery .next-nested-page.is-square img, body.nested_gallery .next-nested-page.is-landscape img, body.nested_gallery .next-nested-page.is-square img {
      max-width: 600px;
      width: 80%; }
    body.gallery .next-nested-page.is-portrait img, body.nested_gallery .next-nested-page.is-portrait img {
      max-height: 400px;
      height: 80vh; }
    body.gallery .next-nested-page .nexted-nested-page-cover-image, body.nested_gallery .next-nested-page .nexted-nested-page-cover-image {
      transition: opacity 250ms ease;
      transform: translate(100%, -50%);
      opacity: 0.5;
      position: absolute;
      top: 50%;
      right: 90px; }
    body.gallery .next-nested-page:hover .nexted-nested-page-cover-image, body.nested_gallery .next-nested-page:hover .nexted-nested-page-cover-image {
      opacity: 1; }
  body.gallery .caption, body.nested_gallery .caption {
    color: #282828;
    font-size: 20px;
    line-height: 2;
    font-family: "Miller Banner Roman", "Miller Banner Roman", serif; }
  body.gallery .gallery-zoom-container, body.nested_gallery .gallery-zoom-container {
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 97; }
    body.gallery .gallery-zoom-container .vimeo_cont, body.gallery .gallery-zoom-container .youtube_cont, body.nested_gallery .gallery-zoom-container .vimeo_cont, body.nested_gallery .gallery-zoom-container .youtube_cont {
      width: 85vw; }
    body.gallery .gallery-zoom-container img.fit-h, body.nested_gallery .gallery-zoom-container img.fit-h {
      width: 100vw !important;
      height: auto !important; }
    body.gallery .gallery-zoom-container img.fit-v, body.nested_gallery .gallery-zoom-container img.fit-v {
      width: auto !important;
      height: 100vh !important; }
    body.gallery .gallery-zoom-container.landscape img, body.nested_gallery .gallery-zoom-container.landscape img {
      width: auto;
      height: 100vh; }
    body.gallery .gallery-zoom-container.portrait img.is-landscape, body.nested_gallery .gallery-zoom-container.portrait img.is-landscape {
      width: 100vw;
      height: auto; }
    body.gallery .gallery-zoom-container.portrait img.is-portrait, body.nested_gallery .gallery-zoom-container.portrait img.is-portrait {
      width: auto;
      height: 100vh; }
    body.gallery .gallery-zoom-container.active, body.nested_gallery .gallery-zoom-container.active {
      opacity: 1;
      pointer-events: auto; }
  body.gallery .gallery-counter, body.nested_gallery .gallery-counter {
    -webkit-transition: opacity 250ms ease;
    transition: opacity 250ms ease;
    position: fixed;
    bottom: 20px;
    left: 0;
    text-align: center;
    width: 100%;
    z-index: 96; }
    body.gallery .gallery-counter.hidden, body.nested_gallery .gallery-counter.hidden {
      opacity: 0; }
  body.gallery .gallery-overview-overlay, body.nested_gallery .gallery-overview-overlay {
    background: rgba(255, 255, 255, 0.75);
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    pointer-events: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 97; }
    body.gallery .gallery-overview-overlay .gallery-overview-inner, body.nested_gallery .gallery-overview-overlay .gallery-overview-inner {
      -webkit-overflow-scrolling: touch;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 20px; }
    body.gallery .gallery-overview-overlay.active, body.nested_gallery .gallery-overview-overlay.active {
      opacity: 1;
      pointer-events: auto; }
      body.gallery .gallery-overview-overlay.active .gallery-overview-inner, body.nested_gallery .gallery-overview-overlay.active .gallery-overview-inner {
        overflow-y: auto; }
    body.gallery .gallery-overview-overlay .overview-asset, body.nested_gallery .gallery-overview-overlay .overview-asset {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      min-height: 500px;
      margin: 40px;
      padding: 50px;
      width: calc(33.3333% - 80px); }
      body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content {
        cursor: pointer;
        position: relative;
        max-height: 100%;
        width: 100%; }
        body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-left, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-left {
          left: -50px;
          margin-right: auto; }
        body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-right, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-right {
          left: 50px;
          margin-left: auto; }
        body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-top, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-top {
          -ms-flex-item-align: start;
          align-self: flex-start; }
        body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-bottom, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-bottom {
          -ms-flex-item-align: end;
          align-self: flex-end; }
        body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-h-center, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-h-center {
          margin-left: auto;
          margin-right: auto; }
        body.gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-v-center, body.nested_gallery .gallery-overview-overlay .overview-asset .overview-asset-content.flush-v-center {
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-self: center; }
      body.gallery .gallery-overview-overlay .overview-asset.text .text-content, body.nested_gallery .gallery-overview-overlay .overview-asset.text .text-content {
        background: #ffffff;
        border: 2px solid #282828;
        padding: 50px 30px; }
    body.gallery .gallery-overview-overlay .close-overview, body.nested_gallery .gallery-overview-overlay .close-overview {
      font-size: 4rem;
      color: #282828;
      cursor: pointer;
      position: absolute;
      bottom: 20px;
      left: 50%;
      margin-left: -1rem; }

.is-changing .gallery-counter {
  opacity: 0; }

感谢那些花时间回答和解释我哪里做错了的人:)

Answer 1

您可以使用网络检查工具检查您的样式是否被覆盖。如果是这样，您可以再附加一个类或将另一个 HTML 元素添加到您的标签中，它将覆盖画廊样式。

例子-

body.gallery.one_more_class .asset.is-landscape img

body.gallery .wrapper HTML .asset.is-landscape img