css选择类名相同的第二个div下的span元素

可以使用以下 CSS 选择器来选取类名相同的第二个 div 下的 span 元素：

div[class='相同的类名']:nth-of-type(2) span {
  /* CSS 样式 */
}

其中，`相同的类名` 指的是相同的类名，`:nth-of-type(2)` 表示选中第二个该种类型的元素，`span` 表示选中 div 下的 span 元素。

相关问题

一个具有类名div下面有好几个类名相同的子元素，css如何选取第二个子元素下的span标签

你可以使用以下 CSS 选择器来选取第二个具有相同类名的子元素下的 `span` 标签：

div.className:nth-of-type(2) > .className:nth-of-type(2) span {
  /* style */
}

这个选择器的意思是：选取第二个具有 `className` 类名的 `div` 元素，再选取该 `div` 元素下的第二个具有 `className` 类名的子元素，最后选取该子元素下的 `span` 元素。其中 `>` 符号表示选择直接子元素。

在li里有p标签和div两个兄弟标签，并且div是个弹窗，点击p标签div弹窗打开同时p标签里的span加一个类名，在点击同一个p标签，div弹窗关闭。有5个li

您可以使用以下的HTML和JavaScript代码来实现这个功能。

HTML代码示例：

<ul>
  <li>
    <p class="trigger">点击我打开弹窗<span></span></p>
    <div class="popup">弹窗内容</div>
  </li>
  <li>
    <p class="trigger">点击我打开弹窗<span></span></p>
    <div class="popup">弹窗内容</div>
  </li>
  <li>
    <p class="trigger">点击我打开弹窗<span></span></p>
    <div class="popup">弹窗内容</div>
  </li>
  <li>
    <p class="trigger">点击我打开弹窗<span></span></p>
    <div class="popup">弹窗内容</div>
  </li>
  <li>
    <p class="trigger">点击我打开弹窗<span></span></p>
    <div class="popup">弹窗内容</div>
  </li>
</ul>

JavaScript代码示例：

// 获取所有的触发器(p标签)和弹窗(div标签)
var triggers = document.querySelectorAll(".trigger");
var popups = document.querySelectorAll(".popup");

// 遍历每个触发器，并为其添加点击事件监听器
for (var i = 0; i < triggers.length; i++) {
  triggers[i].addEventListener("click", function() {
    // 切换对应的弹窗的显示状态
    var popup = this.nextElementSibling;
    popup.classList.toggle("show-popup");

    // 给点击的p标签里的span添加类名
    var span = this.querySelector("span");
    span.classList.add("new-class");
  });
}

CSS代码示例：

.popup {
  display: none;
}

.show-popup {
  display: block;
}

.new-class {
  /* span的新样式 */
}

通过以上代码，每个li元素中的p标签都作为触发器，点击触发器时，对应的div弹窗的显示状态会切换，并且点击的p标签里的span会添加一个新的类名。再次点击同一个p标签时，对应的div弹窗会关闭。

提示：您可以根据需要修改CSS样式以及JavaScript代码来适应您的具体需求。