思想: 选择器类似DOM元素选择器,+表示下一级元素，>表示子元素 空格 代表后代元素<div class='student'><div class="name"></div></div>.student { color: #ffffff;}.student:hover { color: #000000}.student...
复制代码代码如下: <ul class=”icon-down-single-arr-li”> <li> <a>价格<span class=”icon-all></span></a> </li> </ul>
对a链接包含的span图标进行
样式
更改。
复制代码代码如下: .icon-down-single-arr{ background-position: -67px -974px; } .icon-down-single-arr-li li:
hover
.icon-down-single-arr{
1.问题的出现
写了一个平铺的列表，其
中
有些列表项具有
hover
出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。
元素的结构大致如下：
<
div
class=list>
<
div
class=unit>
<
div
class=content>列表项1</
div
>
<
div
class=
hover
>弹出框1</
div
>
</
div
>
<
div
class=unit>
<
div
class=content>列表项2</
div
>
</
div
>
vue项目的style标签使用了scoped修饰符后，修改子组件
样式
（或者elementUI组件
样式
）通常不生效，因此需要用到下面的修饰符
/deep/，::v-deep，>>>修饰符的使用
父组件：选择器前面添加修饰符
<template>
<childrenC
第一种
改变
子节点
的元素使用 .
div
:
hover
>.chir
div
{} 使用>解决这个问题
第二种
改变
兄弟节点的元素使用.
div
:
hover
+.bro
div
{} 使用+解决这个问题（并且需要相邻来着）
然而我想要
改变
的既不是
子节点
也不是兄弟节点，所以还是乖乖使用vue的@mouseover和@mouseout吧
2.点击
子节点
的cl...
子元素
使用绝对定位，并设置 top 和 bottom 值都为 0，然后再设置负边距让
子元素
超出父元素的区域，即可实现
子元素
和父元素一样高。
2. 使用 display: table 属性：
父元素设置 display: table；
子元素
设置 display: table-cell 和 vertical-align: top；然后再设置 height: 100% 即可实现
子元素
和父元素一样高。
3. 使用 flexbox 布局：
父元素设置 display: flex；然后再设置 align-items: stretch，即可实现
子元素
和父元素一样高。
总结来说，实现
CSS
子元素
和父元素一样高的方式多种多样，选择哪种方式取决于具体的需求和实际情况。无论哪种方式，都需要充分了解
CSS
相关属性和布局方式，才能达到最佳的效果。
