我很难使用CSS模块应用我的一个CSS规则。
这是React代码和CSS样式。除了应用于锚点的active
类之外,所有规则都正常工作。我尝试了不同的名称,不同的选择器,但我无法使用锚元素(hover
和active
伪类正常工作)。
import React from 'react';
import classes from './NavigationItem.css';
const navigationItem = (props) => {
return (
<li className={classes.NavigationItem}>
<a
className={classes.active}
href={props.link} >
{props.children}</a>
</li>
);
};
export default navigationItem;
.NavigationItem {
margin: 0;
box-sizing: border-box;
display: flex;
height: 100%;
align-items: center;
}
.NavigationItem a {
color: white;
text-decoration: none;
height: 100%;
padding: 16px 10px;
border-bottom: 4px solid transparent;
box-sizing: border-box;
display: block;
}
.NavigationItem a:hover,
.NavigationItem a:active
.NavigationItem a.active {
background-color: #8f5c2c;
border-bottom: 4px solid #40a4c8;
color: white;
}
如果我使用具有相同CSS属性的内联样式对象,那么它可以正常工作。
const style = {
backgroundColor: '#8f5c2c',
borderBottom: '4px solid #40a4c8',
color: 'white'
};
Chrome devtools也表明该锚正在获得active
类。
有谁知道为什么?
这里有一个缺少的逗号:最后是.NavigationItem a:active
。它应该是这样的:
.NavigationItem a:hover,
.NavigationItem a:active,
.NavigationItem a.active {
background-color: #8f5c2c;
border-bottom: 4px solid #40a4c8;
color: white;
}