Javascript 无法在CSS中以正文为目标_Javascript_Html_Css_Reactjs_Web Deployment

Javascript 无法在CSS中以正文为目标

javascript html css reactjs

Javascript 无法在CSS中以正文为目标,javascript,html,css,reactjs,web-deployment,Javascript,Html,Css,Reactjs,Web Deployment,由于某些原因，我无法更改此HTML主体的CSS。在index.js中，我有一个类名为signIn的div，其中有一个body，当我尝试在styles.CSS中更改它的（body）CSS时，它不起作用。奇怪的是，我有第二个js文件（Roulette.js）和HTML，我可以很好地更改主体。正如在index.js中一样，我有一个h1，我可以很好地瞄准它 index.js： import React from 'react'; import ReactDOM from 'react-dom'; imp

由于某些原因，我无法更改此HTML主体的CSS。在index.js中，我有一个类名为signIn的div，其中有一个body，当我尝试在styles.CSS中更改它的（body）CSS时，它不起作用。奇怪的是，我有第二个js文件（Roulette.js）和HTML，我可以很好地更改主体。正如在index.js中一样，我有一个h1，我可以很好地瞄准它

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import Roulette from './Roulette';



class LogIn extends React.Component {

    render() {
        return (

            <div className="signIn">

            <body>
            <Router>
                <Switch>
                    <Route path='/signIn'>

            <h1>
               HELLO
            </h1>

UNRELATED CODE HERE

          </Route>
          <Route path="/roulette" component={Roulette}/>

          </Switch>
            </Router>


            </body>
            </div> 
        );
    }

}
ReactDOM.render(<LogIn />, document.getElementById('root'));

body

是html的第二多个父元素。因此，您的css选择器

.signIn body

表示“类signIn中的body”。它应该

.signIn，body{/*你的css在这里*/}

.signIn, body {
  background-image: url(img/csgoImage.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #33333D; 
}

.signIn  h1 {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  color: aqua;
}

.roulette, body {
  background-image: none;
  background-color: green;
}

希望这能解决您的问题。

请为此创建一个用于显示问题发生的列表。是否已从index.html文件中删除正文？您的html无效。div元素中不能有body元素。

html

是html的“最父”元素。@BoltKey好的，我知道。更新描述。

.signIn body {
  background-image: url(img/csgoImage.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #33333D; 
}

.signIn  h1 {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  color: aqua;
}

.roulette body {
  background-image: none;
  background-color: green;
}

.signIn, body {
  background-image: url(img/csgoImage.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #33333D; 
}

.signIn  h1 {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  color: aqua;
}

.roulette, body {
  background-image: none;
  background-color: green;
}