CSS Conflito de form input, como classificar para resolver?

[Impts]

Um form esta dando conflito com outro devido sua estilização css, só que não consigo setar de forma diferente pra não dar conflito.

Tentei usar id e no css colocar #specialloginform >form e nada....

 

 <form action="<?= htmlspecialchars($_SERVER["PHP_SELF"]) ?>" method="POST" id="specialloginform">
                    <h1 class="titleformlogin">Por favor, faça login.</h1>
                    <fieldset>
                        <input 
                            value="<?= $data['email'] ?>" 
                            autocomplete="username"
                            name="email" 
                            type="text" 
                            placeholder="E-mail"
                        >
                        <div id="msg-errors">
                    
                          <?php if (isset($errors['email'])): ?>
                          <?= $errors['email'] ?>
                          <?php endif; ?>
                      
                        </div>

                        
                        <input 
                            autocomplete="current-password"
                            name="password" 
                            type="password"
                            placeholder="Senha"
                        >
              
                        <div id="msg-errors">
                        <p>  <?php if (isset($errors['password'])): ?>
                          <?= $errors['password'] ?>
                          <?php endif; ?>
                        </p>
                        </div>

                        <span class="descriptionID">É necessário inserir seu email.</span>
                        <input type="submit" value="Entrar" class="btnlogin">
                        <p class="descriptionpass"><a href="">Esqueceu a sua senha?</a></p>
                        <p class="descriptionpass"><a href="">Crie uma conta</a></p>
                    </fieldset>
                </form>

 

form {max-width: 50vh;padding: 2em;border-radius: 0.5em;transition: 0.2s;box-shadow: 1px 1px 5px #777;background: #fff;width: calc(100% - 20px);}

/*input[type="text"], input[type="password"] {text-shadow: black;}*/

input {width: 100%;display: block;margin: 1em 0;padding: 12px;}

 

[GabrielSennaMs]

@Impts Esse tutorial vai te ajudar a resolver e entender esse problema https://www.w3schools.com/css/css_selectors.asp

[DiF]

@Impts Basicamente existem duas formas de sobrescrever uma regra css. pelo menos me lembro dessas duas formas.

 

1) Usar o !important  na regra diretamente... isso fará  uma regra prevalecer sobra a regra padrão.

 

2) Usar o estilo inline. Sempre quando utilizar diretamente o estilo no elemento, o grau de precedência dele é maior.

 

exemplos:

 

<input type="text" />
<input type="text" class="diferente" />

input{
  width: 200px;
  background: red;
}

.diferente{
  width: 100px !important;
  background: blue !important;
}

Nesse caso,   a class  "diferente"  sobrescreveria a regra do elemento input.

 

Usando !important:

https://jsfiddle.net/dife/xeq413jg/

 

Usando style inline:

https://jsfiddle.net/dife/djn4cv1g/