【无标题】

最新推荐文章于 2024-07-21 12:21:28 发布

爱吃泡芙的阿祖

最新推荐文章于 2024-07-21 12:21:28 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/m0_45893627/article/details/127390515

版权

web前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

关于react里css样式权重出现的问题(求助,>为什么没有定位到右边)

最近我在用react写一个轮播图,可是在写css样式的过程中却发现样式权重并不如我作料

Swipper.jsx里:

import './index.css'
export default class Swipper extends Component {
    state={
        index:1
    }
    render(){
        let {index} = this.state;
        return(
            <div className='wrapper'>
                <img width={500} src={require(`../assets/images/${index}.webp`)} />
                <span onClick={()=>{
                    index--;
                    if(index<1){
                        index=4
                    }
                    this.setState({index});
                }}>&lt;</span>
                <span onClick={()=>{
                    index++;
                    if(index>4){
                        index=1
                    }
                    this.setState({index});
                }} className='right'>&gt;</span>
            </div>
        )
    }
}

index.css里.wrapper{

   width:500px;
   margin:100px auto;
   border:1px solid red;
}
.wrapper img {
   width:500px;
}

.wrapper span {
   position: absolute;
   top:63px;
   display: block;
   width:44px;
   height:60px;
   line-height: 60px;
   background-color: azure;
   text-align: center;
   cursor: pointer;
   user-select: none;
   left: 0px;
}
.wrapper .right {
   right:10px;
}

根组件App.jsx里

import Swipper from './Swipper/Swipper'
import './App.css'
export default class App extends Component {
    render() {
        return (
            <>
                <Swipper/>
            </>
        )
    }
}