Question

我有一个样式规则：

.tabs li {
    border: 1px solid transparent;
}

.tabs li:hover {
    background-color: rgba(132,141,149,0.05);
    border-color: rgba(228,230,232,0.25);
}

.tabs li:last-child:hover, .tabs li:nth-child(2):hover {
    background-color: transparent;
    border-color: transparent;
}

当鼠标悬停在第二个和最后一个元素上时，应该更改li的背景和边框的颜色，除了第二个和最后一个元素。但不知何故，它适用于所有li元素。我应该使用什么CSS规则？

UPD

saNiks的回答帮助我找到了解决方案。这是css代码应该是什么样的：

$query_site_location =$wpdb->get_results("select DISTINCT 
                      l.siteID,
                      l.locationName, 
                      n.inspectionDate,
                      s.employeeID
                       from site_location l
                       LEFT    
                       JOIN inspection_info n
                       on l.siteID = n.siteID
                       LEFT  
                       JOIN employee s
                       on n.employeeID = s.employeeID");

Answer 1

您可以为要更改的特定<li>标记添加类，例如：

<li class="some_class_name"> Some content</li>

而不是通过

向此<li>添加样式

.some_class_name{... \\your style goes here}

Answer 2

您需要重写样式以使用：not selector来应用您想要的默认样式，如下所示

.tabs li {
   border: 1px solid transparent;
}

.tabs li:hover {
    background-color: rgba(132,141,149,0.05);
    border-color: rgba(228,230,232,0.25);
}

.tabs li:not(:last-child):not(:nth-child(2)):hover {
    background-color: transparent;
    border-color: transparent;
}

在此处使用JSFiddle代码

Answer 3

为什么不这样做呢？如果要对第二个项目“AND”进行样式设置，

.tabs li:hover:not(:last-child):not(:nth-child(2)) {
    background-color: rgba(132,141,149,0.05);
    border-color: rgba(228,230,232,0.25);  
}

：不是伪类不起作用

3 个答案: