CSS 动态添加不适用于 HTML 元素

Question

我正在创建一个 3D 旋转木马（使用 CSS），它会在用户单击按钮时加载。我让旋转木马自行工作（即打开页面时加载旋转木马）但是当我尝试通过单击按钮动态激活旋转木马时，未应用样式。

下面是有效的代码。轮播在页面加载时加载，您可以看到它运行得非常好。

body > div {
  width: 500px;
  margin: 50px auto;
  text-align: center;
}

figure {
 margin: 0;
}

.container {
 width: 500px;
 height: 300px;
 text-align: left;
 margin: 60px auto;
 -webkit-perspective: 1000px;
 -webkit-perspective-origin: 50% -25%;
}

.carousel {
 -webkit-transform-style: preserve-3d;
 -webkit-transform: translateZ(-540px);
 position: relative;
 margin: 0;
 width: 500px;
 -webkit-transition: 1s;
}

.carousel div {
    display: inline-block !important;
    height: auto !important;
 position: absolute;
    opacity: 0.9;
    text-align: center;
 -webkit-transition: 1s;
    width: 500px;
    height: 300px;
    background-color:rgba(203,203,203,0.5);
    border-style: solid;
}

.carousel div:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); }
.carousel div:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); }

label {
 cursor: pointer;
 background: #eee;
 display: inline-block;
 border-radius: 50%;
 width: 30px;
 padding-top: 7px;
 height: 23px;
 font: .9em Arial;
}

label:hover {
 background: #ddd;
}

input {
 position: absolute;
 left: -9999px;
}

input:checked + label {
 font-weight: bold;
 background: #ddd;
}

input[value="1"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px); }
input[value="2"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-45deg); }
input[value="3"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-90deg); }
input[value="4"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-135deg); }
input[value="5"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-180deg); }
input[value="6"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-225deg); }
input[value="7"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-270deg); }
input[value="8"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-315deg); }

input[value="1"]:checked ~ .container .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }
input[value="2"]:checked ~ .container .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(1); opacity: 1; }
input[value="3"]:checked ~ .container .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(1); opacity: 1; }
input[value="4"]:checked ~ .container .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(1); opacity: 1; }
input[value="5"]:checked ~ .container .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(1); opacity: 1; }
input[value="6"]:checked ~ .container .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(1); opacity: 1; }
input[value="7"]:checked ~ .container .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(1); opacity: 1; }
input[value="8"]:checked ~ .container .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(1); opacity: 1; }

<body>

  <div>

    <input checked id="one" name="multiples" type="radio" value="1">
    <label for="one">1</label>

    <input id="two" name="multiples" type="radio" value="2">
    <label for="two">2</label>

    <input id="three" name="multiples" type="radio" value="3">
    <label for="three">3</label>

    <input id="four" name="multiples" type="radio" value="4">
    <label for="four">4</label>

    <input id="five" name="multiples" type="radio" value="5">
    <label for="five">5</label>

    <input id="six" name="multiples" type="radio" value="6">
    <label for="six">6</label>

    <input id="seven" name="multiples" type="radio" value="7">
    <label for="seven">7</label>

    <input id="eight" name="multiples" type="radio" value="8">
    <label for="eight">8</label>

    <div class="container">
      <div class="carousel">
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
      </div>
    </div>

  </div>

</body>

这里是不起作用的代码：

function load() {
  $("#activate-carousel-button").hide();
  $('#nav1').css('visibility', 'visible');
  $('head').append('<link rel="stylesheet" type="text/css" href="test.css" />');
  console.log("done");

}

body > div {
  width: 500px;
  margin: 50px auto;
  text-align: center;
}

figure {
 margin: 0;
}

.container {
 width: 500px;
 height: 300px;
 text-align: left;
 margin: 60px auto;
 -webkit-perspective: 1000px;
 -webkit-perspective-origin: 50% -25%;
}

.carousel {
 -webkit-transform-style: preserve-3d;
 -webkit-transform: translateZ(-540px);
 position: relative;
 margin: 0;
 width: 500px;
 -webkit-transition: 1s;
}

.carousel div {
    display: inline-block !important;
    height: auto !important;
 position: absolute;
    opacity: 0.9;
    text-align: center;
 -webkit-transition: 1s;
    width: 500px;
    height: 300px;
    background-color:rgba(203,203,203,0.5);
    border-style: solid;
}

.carousel div:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); }
.carousel div:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); }

label {
 cursor: pointer;
 background: #eee;
 display: inline-block;
 border-radius: 50%;
 width: 30px;
 padding-top: 7px;
 height: 23px;
 font: .9em Arial;
}

label:hover {
 background: #ddd;
}

input {
 position: absolute;
 left: -9999px;
}

input:checked + label {
 font-weight: bold;
 background: #ddd;
}

input[value="1"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px); }
input[value="2"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-45deg); }
input[value="3"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-90deg); }
input[value="4"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-135deg); }
input[value="5"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-180deg); }
input[value="6"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-225deg); }
input[value="7"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-270deg); }
input[value="8"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-315deg); }

input[value="1"]:checked ~ .container .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }
input[value="2"]:checked ~ .container .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(1); opacity: 1; }
input[value="3"]:checked ~ .container .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(1); opacity: 1; }
input[value="4"]:checked ~ .container .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(1); opacity: 1; }
input[value="5"]:checked ~ .container .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(1); opacity: 1; }
input[value="6"]:checked ~ .container .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(1); opacity: 1; }
input[value="7"]:checked ~ .container .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(1); opacity: 1; }
input[value="8"]:checked ~ .container .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(1); opacity: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="inner">
    <div>
      <img src="Images/logo.png" height="130" width="120"></img>
    </div>
    <div id='nav1' style="visibility:hidden">
      <input checked id="one" name="multiples" type="radio" value="1">
      <label for="one">1</label>
      <input id="two" name="multiples" type="radio" value="2">
      <label for="two">2</label>
      <input id="three" name="multiples" type="radio" value="3">
      <label for="three">3</label>
      <input id="four" name="multiples" type="radio" value="4">
      <label for="four">4</label>
      <input id="five" name="multiples" type="radio" value="5">
      <label for="five">5</label>
      <input id="six" name="multiples" type="radio" value="6">
      <label for="six">6</label>
      <input id="seven" name="multiples" type="radio" value="7">
      <label for="seven">7</label>
      <input id="eight" name="multiples" type="radio" value="8">
      <label for="eight">8</label>
    </div>
    <div class="container" style="padding:8px">
      <div class="carousel">
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
      </div>
    </div>
    <div id="activate-carousel-button">
      <button type="button" onclick="load();" class="btn btn-default">Click to activate carousel controls</button>
    </div>
  </div>
</body>

以上代码的目的如下：当用户点击按钮时，生成html并放入DOM，然后定义轮播的CCS样式表是附加到 html 元素的头部。在我上面的示例中，当用户单击按钮并重新应用 CSS 样式时仅显示轮播控件，但关键是轮播不起作用。

我认为问题的根源在于控制轮播的按钮不起作用。似乎它们的 webkit 属性被某种方式覆盖了（请参阅浏览器开发人员工具 - 我在 chrome 中看到了它）。

我认为这是 CSS 中的一个特异性问题。

我尝试过的：

将所有 class 选择器更改为 ID 选择器，并将相关的 HTML 更改为使用 id 而不是 class。即 <div class="carousel"> 变为 <div id="carousel">。我这样做是因为我认为 id 选择器是最具体的东西，所以它们不应该被覆盖。然而，这没有用。

我还尝试将 !important 添加到所有 webkit 属性，因为这会强制浏览器在所有内容上使用它们。但是，这也没有用。

可能是什么原因造成的，我该如何解决？

编辑：我还尝试将以下行添加到我的 js 代码中：

$('.inner').trigger('create');

也没有用。

编辑 2：

我也试过这个试图强制刷新 CSS:

$('.inner').css('display','block');

但这也不起作用

Answer 1

您的 CSS 选择器不再匹配，因为您将输入和标签放在 #nav1 中。如果你真的想为此继续使用 CSS，你可以删除 #nav1 并分别隐藏所有输入和标签：

$('[name=multiples], [name=multiples] + label').css('visibility', 'hidden');

function load() {
  $("#activate-carousel-button").hide();
  $('[name=multiples], [name=multiples] + label').css('visibility', 'visible');
  $('head').append('<link rel="stylesheet" type="text/css" href="test.css" />');
  console.log("done");
}

$('[name=multiples], [name=multiples] + label').css('visibility', 'hidden');

function load() {
  $("#activate-carousel-button").hide();
  $('[name=multiples], [name=multiples] + label').css('visibility', 'visible');
  $('head').append('<link rel="stylesheet" type="text/css" href="test.css" />');
  console.log("done");
}

body > div {
  width: 500px;
  margin: 50px auto;
  text-align: center;
}

figure {
 margin: 0;
}

.container {
 width: 500px;
 height: 300px;
 text-align: left;
 margin: 60px auto;
 -webkit-perspective: 1000px;
 -webkit-perspective-origin: 50% -25%;
}

.carousel {
 -webkit-transform-style: preserve-3d;
 -webkit-transform: translateZ(-540px);
 position: relative;
 margin: 0;
 width: 500px;
 -webkit-transition: 1s;
}

.carousel div {
    display: inline-block !important;
    height: auto !important;
 position: absolute;
    opacity: 0.9;
    text-align: center;
 -webkit-transition: 1s;
    width: 500px;
    height: 300px;
    background-color:rgba(203,203,203,0.5);
    border-style: solid;
}

.carousel div:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); }
.carousel div:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); }
.carousel div:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); }

label {
 cursor: pointer;
 background: #eee;
 display: inline-block;
 border-radius: 50%;
 width: 30px;
 padding-top: 7px;
 height: 23px;
 font: .9em Arial;
}

label:hover {
 background: #ddd;
}

input {
 position: absolute;
 left: -9999px;
}

input:checked + label {
 font-weight: bold;
 background: #ddd;
}

input[value="1"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px); }
input[value="2"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-45deg); }
input[value="3"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-90deg); }
input[value="4"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-135deg); }
input[value="5"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-180deg); }
input[value="6"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-225deg); }
input[value="7"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-270deg); }
input[value="8"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-315deg); }

input[value="1"]:checked ~ .container .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }
input[value="2"]:checked ~ .container .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(1); opacity: 1; }
input[value="3"]:checked ~ .container .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(1); opacity: 1; }
input[value="4"]:checked ~ .container .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(1); opacity: 1; }
input[value="5"]:checked ~ .container .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(1); opacity: 1; }
input[value="6"]:checked ~ .container .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(1); opacity: 1; }
input[value="7"]:checked ~ .container .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(1); opacity: 1; }
input[value="8"]:checked ~ .container .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(1); opacity: 1; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="inner">
    <div>
      <img src="Images/logo.png" height="130" width="120"></img>
    </div>
      <input checked id="one" name="multiples" type="radio" value="1">
      <label for="one">1</label>
      <input id="two" name="multiples" type="radio" value="2">
      <label for="two">2</label>
      <input id="three" name="multiples" type="radio" value="3">
      <label for="three">3</label>
      <input id="four" name="multiples" type="radio" value="4">
      <label for="four">4</label>
      <input id="five" name="multiples" type="radio" value="5">
      <label for="five">5</label>
      <input id="six" name="multiples" type="radio" value="6">
      <label for="six">6</label>
      <input id="seven" name="multiples" type="radio" value="7">
      <label for="seven">7</label>
      <input id="eight" name="multiples" type="radio" value="8">
      <label for="eight">8</label>
    <div class="container" style="padding:8px">
      <div class="carousel">
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>john</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="">has the following info</p>
        </div>
        <div class="member">
          <img src="" style="margin:auto">
          <h4>John</h4>
          <p style="text-align:center">has the following info</p>
        </div>
      </div>
    </div>
    <div id="activate-carousel-button">
      <button type="button" onclick="load();" class="btn btn-default">Click to activate carousel controls</button>
    </div>
  </div>
</body>

Answer 2

您的示例的结构略有不同。在第二个示例中，您将输入包装在 id='nav1' 中。这意味着同级选择器将不起作用，因为 .container 不是第一个示例中输入的同级。

一个简单的测试方法是删除控件周围的 #nav1 div 包装器并重试。

CSS 动态添加不适用于 HTML 元素

CSS added dynamically does not apply to HTML elements

html

javascript

css

jquery

webkit