Question

我是网络开发的新手，我有一个带有一些类的HTML文档，但是，在设计时我遇到了这些这是我的HTML文档片段：

＆＃13;

  <button class="roll"><i class="ion-ios-loop"></i><span>Roll dice</span></button>
 <button class="hold"><i class="ion-ios-download-outline"></i><span>Hold</span></button>

＆＃13;

我写了这样的css：

＆＃13;

.hold span{
    padding-left: 10px;
    transition: .2s;
}
.roll span{
    padding-left: 10px;
    transition: .2s;
}
.roll span:hover{
     padding-left: 20px;
}
.hold span:hover{
    padding-left: 20px;
}

＆＃13;

然而，我试图让它更短，这样做不正常：

＆＃13;

.hold.roll span{
    padding-left: 10px;
    transition: .2s;
}

.hold.roll span:hover{
     padding-left: 20px;
}

＆＃13;

＆＃13; 并且还喜欢这样：

＆＃13;

.hold,.roll span{
    padding-left: 10px;
    transition: .2s;
}

.hold,.roll span:hover{
     padding-left: 20px;
}

＆＃13;

＆＃13; 有没有我缺少的关于CSS的东西？谢谢，为什么我的其他2个代码不起作用。？

Answer 1

这样给出

import React, { Component } from 'react';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';

class MenuView extends Component {
 render {
  return(
   <Drawer open={true} containerStyle={{marginTop: '6.5%', background:'#545454', position:'fixed'}}>
    <MenuItem primaryText="My Name" style={{color:'white', marginTop:'10%'}} href="#/name" onClick={handlers.changeURL}/>
    <MenuItem primaryText="My Age" style={{color:'white'}} href="#/age" onClick={handlers.changeURL}/>
    <MenuItem primaryText="My Address" style={{color:'white'}} href="#/address" onClick={handlers.changeURL}/>
    <MenuItem primaryText="My Files" style={{color:'white'}} href="#/files" onClick={handlers.changeURL}/>  
   </Drawer>
  );
 }
}
export default MenuView;

或者您也可以写为

.hold span,.roll span{
 padding-left: 10px;
 transition: .2s;
}

.hold span:hover,.roll span:hover{
 padding-left: 20px;
}

Answer 2

您需要为每个范围添加单独的规则 例如：

.hold span,.roll span{
    padding-left: 10px;
    transition: .2s;
}

.hold span:hover,.roll span:hover{
     padding-left: 20px;
}

Answer 3

我认为你需要这个，问题是你.hold.roll span或.hold,.roll span是不可接受的，应该是.hold span,.roll span

＆＃13;

.hold span , .roll span{
    padding-left: 10px;
    transition: .2s;
}
.roll span:hover , .hold span:hover{
     padding-left: 20px;
}

＆＃13;

<button class="roll"><i class="ion-ios-loop"></i><span>Roll dice</span></button>
 <button class="hold"><i class="ion-ios-download-outline"></i><span>Hold</span></button>

＆＃13;

Answer 4

您还可以为对象添加多个类，假设您的css文件中有两个类：

.default-padding {padding:6px}
.button {background:#c00;}

<input type="button" class="default-padding button"></button>
<label class="default-padding">Label</label>

Answer 5

您可以组合尽可能多的选择器，但必须完全定义所有选择器。这是一篇关于这个问题的好文章：Grouping Multiple CSS Selectors。

这就是你要找的东西：

.hold span, .roll span{
    padding-left: 10px;
    transition: .2s;
}
.roll span:hover, .hold span:hover{
     padding-left: 20px;
}

在css中组合html类以便于设计？

5 个答案: