Question

我的属性:nth-child有问题，当此div处于悬停位置时，我正在尝试修改div子属性，但它无法正常工作，什么也没发生，有人可以解决吗？

这是我的代码：

.army_selection:hover::nth-child(1) {
  visibility: visible;
  transition: 0.2s;
}

.army_selection_bloc {
  width: 300px;
  height: 400px;
  background-color: aqua;
  visibility: hidden;
}

<div id="army1" class="army_selection">
  <div class="army_selection_bloc">
   
  </div>
</div>

Answer 1

问题夫妇...

应该只有一个 nth-child前的冒号。双冒号语法用于伪 elements （例如::before，::after），而不是伪 selectors 。
:nth-child前应该有一个空格。您想选择一个子元素，而不是元素本身。
visibility是不可设置动画的属性，因此无法转换。你可以用改为opacity。

.army_selection:hover :nth-child(1) {
  opacity: 1;
  transition: 0.2s;
}

.army_selection_bloc {
  width: 300px;
  height: 400px;
  background-color: aqua;
  opacity: 0;
}

<div id="army1" class="army_selection">
  <div class="army_selection_bloc">
   
  </div>
</div>

这可能不是您想要的效果，但是如果将过渡状态从悬停状态移动到默认状态，该元素将淡入和淡出。

.army_selection:hover :nth-child(1) {
  opacity: 1;
}

.army_selection_bloc {
  width: 300px;
  height: 400px;
  background-color: aqua;
  opacity: 0;
  transition: 0.2s;
}

<div id="army1" class="army_selection">
  <div class="army_selection_bloc">
   
  </div>
</div>

Answer 2

"Venue Name","","","Total Calls","Total %","Effective Calls","Effective %","Ineffective Calls","Ineffective %","Unique Calls","Unique %"
"Upstairs at Clarette","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Blacks Members Club","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Madison Roof Top Bar & Restaurant","","","8","0.54","8","100.00","0","0.00","8","100.00"
"Orphans Yard","","","0","0.00","0","","0","","0",""
"Oui 2 Rooms","","","7","0.47","7","100.00","0","0.00","5","71.43"
"Oval Space","","","7","0.47","4","57.14","3","42.86","6","85.71"
"OXO2","","","0","0.00","0","","0","","0",""
"Painters' Hall","","","0","0.00","0","","0","","0",""
"Dining Room at Clarette","","","0","0.00","0","","0","","0",""
"Park Lane Club London","","","0","0.00","0","","0","","0",""
"Park Village Studios","","","0","0.00","0","","0","","0",""
"Patron Bar a Vin","","","0","0.00","0","","0","","0",""
"PAUSE BAR","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Peckham Springs","","","6","0.40","6","100.00","0","0.00","4","66.67"
"School of Wok","","","0","0.00","0","","0","","0",""
"Penton Street Gallery","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Pewterers' Hall","","","3","0.20","1","33.33","2","66.67","1","33.33"
"Piccadilly Chambers","","","0","0.00","0","","0","","0",""
"Piccadilly Institute","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Pop Brixton","","","5","0.34","5","100.00","0","0.00","4","80.00"
"Porchester Hall","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Portland House","","","0","0.00","0","","0","","0",""
"Portobello Star","","","2","0.13","2","100.00","0","0.00","2","100.00"
"Prince of Peckham","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Prince Philip House","","","0","0.00","0","","0","","0",""
"Private Dining Room at Albert's Club","","","0","0.00","0","","0","","0",""
"Proud Camden","","","0","0.00","0","","0","","0",""
"Proud Country House","","","3","0.20","2","66.67","1","33.33","2","66.67"
"Proud East","","","0","0.00","0","","0","","0",""
"Provender Warehouse","","","0","0.00","0","","0","","0",""
"Bocconcino","","","0","0.00","0","","0","","0",""
"Putney Studio","","","0","0.00","0","","0","","0",""
"Noho Showrooms","","","6","0.40","6","100.00","0","0.00","6","100.00"
"Quaglino's","","","0","0.00","0","","0","","0",""
"Radio Rooftop","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Rail House Cafe","","","0","0.00","0","","0","","0",""
"Raven's Ait","","","0","0.00","0","","0","","0",""
"Refettorio Felix","","","3","0.20","3","100.00","0","0.00","2","66.67"
"Regent Street Cinema","","","7","0.47","4","57.14","3","42.86","4","57.14"
"Regent's Conferences & Events","","","1","0.07","0","0.00","1","100.00","1","100.00"
"RIBA Venues","","","0","0.00","0","","0","","0",""
"Rich Mix","","","2","0.13","2","100.00","0","0.00","2","100.00"
"Rida East","","","0","0.00","0","","0","","0",""
"River & Rowing Museum","","","4","0.27","4","100.00","0","0.00","4","100.00"
"Darbaar Restaurant","","","0","0.00","0","","0","","0",""
"Riverside Rooms","","","0","0.00","0","","0","","0",""
"Riverside Walkway","","","0","0.00","0","","0","","0",""
"Roast","","","0","0.00","0","","0","","0",""
"Royal London Suites","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Colomba","","","3","0.20","1","33.33","2","66.67","3","100.00"
"Home House","","","0","0.00","0","","0","","0",""
"Rolling Stock","","","1","0.07","0","0.00","1","100.00","1","100.00"
"Many Hands Bermondsey","","","10","0.67","9","90.00","1","10.00","7","70.00"
"Roma","","","0","0.00","0","","0","","0",""
"Record Street Studios","","","0","0.00","0","","0","","0",""
"House 21","","","0","0.00","0","","0","","0",""
"Roundhouse","","","1","0.07","1","100.00","0","0.00","1","100.00"
"U Block","","","0","0.00","0","","0","","0",""
"Royal Horticultural Halls","","","6","0.40","6","100.00","0","0.00","6","100.00"
"Royal Institution of Great Britain","","","1","0.07","1","100.00","0","0.00","1","100.00"
"The Boiler House","","","0","0.00","0","","0","","0",""
"Rye London","","","0","0.00","0","","0","","0",""
"S&L Lounge","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Saatchi Gallery","","","3","0.20","3","100.00","0","0.00","3","100.00"
"Sager & Wilde","","","0","0.00","0","","0","","0",""
"Sake no Hana","","","0","0.00","0","","0","","0",""
"Salut!","","","0","0.00","0","","0","","0",""
"Sans Pere Shoreditch","","","4","0.27","0","0.00","4","100.00","2","50.00"
"Searcys at 30 Pavilion Road","","","0","0.00","0","","0","","0",""
"Searcys Vintners' Hall","","","0","0.00","0","","0","","0",""
"Shaka Zulu","","","2","0.13","2","100.00","0","0.00","1","50.00"
"SHED","","","0","0.00","0","","0","","0",""
"Shoreditch Platform","","","4","0.27","4","100.00","0","0.00","3","75.00"
"Shoreditch Roundabout","","","0","0.00","0","","0","","0",""
"Shoreditch Studios","","","7","0.47","7","100.00","0","0.00","5","71.43"
"Shoreditch Town Hall","","","3","0.20","2","66.67","1","33.33","3","100.00"
"Shoreditch Treehouse","","","12","0.81","7","58.33","5","41.67","12","100.00"
"Simulacra Studio","","","0","0.00","0","","0","","0",""
"Six Storeys on Soho","","","0","0.00","0","","0","","0",""
"Sizona","","","9","0.61","8","88.89","1","11.11","6","66.67"
"Sky Garden","","","4","0.27","0","0.00","4","100.00","2","50.00"
"SMITHS' of Smithfield","","","1","0.07","1","100.00","0","0.00","1","100.00"
"Sorted","","","0","0.00","0","","0","","0",""
"South Place Hotel","","","6","0.40","5","83.33","1","16.67","2","33.33"
"Space 25","","","2","0.13","2","100.00","0","0.00","1","50.00"
"Speech Room","","","0","0.00","0","","0","","0",""
"Square Suite","","","1","0.07","1","100.00","0","0.00","1","100.00"

.army_selection:hover div:nth-child(1) {
  visibility: visible;
  transition: 0.2s;
}

.army_selection_bloc {
  width: 50px;
  height: 50px;
  background-color: aqua;
  visibility: hidden;
}
#army1{
background-color:yellow;
height:100px;
width:100px;
}

检查以上代码。您需要在<div id="army1" class="army_selection"> <div class="army_selection_bloc"> First DIv </div> </div>

中选择div的第n个子元素

Answer 3

这将在演示下面进行检查

.army_selection:hover .army_selection_bloc:nth-child(1) {
  visibility: visible;
  transition: 0.2s;
}

.army_selection{
background-color:red;
width:100px;
height:100px;
position:relative;
}

.army_selection_bloc {
  width: 300px;
  height: 400px;
  background-color: aqua;
  visibility: hidden;
}

<div id="army1" class="army_selection">
i am a parent div
  <div class="army_selection_bloc">
   i am a child div
  </div>
</div>

问题是：

.army_selection:hover::nth-child(1) {
  visibility: visible;
  transition: 0.2s;
}

应该是这样

.army_selection:hover .army_selection_bloc:nth-child(1) {
  visibility: visible;
  transition: 0.2s;
}

nth-child属性必须需要一个类来标识任何发现错误的子元素，使我正确。

css：nth-child属性有问题

3 个答案:

css：nth-​​child属性有问题

3 个答案:

css：nth-child属性有问题