Entrar Ainda não tem acesso?
1
resposta

por que o text-decoration so funcionou quando eu coloquei o A ?

Referente ao curso HTML e CSS: praticando HTML/CSS

por Patrícia Santos Soares
| 43.8k xp | 6 posts

eu estava fazendo o desafio da ultima aula e estava tudo, certo. Ate aqui :

    <li class="lista__links">
        <a href="#">Idiomas</a>
    </li>
    <li class="lista__links">
        <a href="#">Dispositivos compatíveis</a>
    </li>
    <li class="lista__links">
        <a href="#">Contrato de assinatura</a>
    </li>
    <li class="lista__links">
        <a href="#">Politica de privacidade</a>
    </li>
    <li class="lista__links">
        <a href="#">Proteção de dados no Brasil</a>
    </li>
    <li class="lista__links"> 
        <a href="#">Anuncios personalizados</a>
    </li>
    <li class="lista__links">
        <a href="#">Ajuda</a>
    </li>


quando eu tentei reproduzir o text-decoration ele nao funcionava de maneira alguma. 
Entao, eu olhei o comentario da professora e tinha um "a" . segue abaixo:

.lista__link a{
text-decoration: none;
color: var(--branco-principal);
margin-left: 1em;}

Por um momento, eu pensei que fosse talvez um erro de digitacao. Porem, quando eu abri o forum, eu vi que havia uma duvida a respeito da mesma situacao. Porem, com aside. Entretanto, eu nao usei aside. 
Entao, eu gostaria de saber o por que nao funcionou. 
É só uma dúvida mesmo que ficou. 

Valeu!
1 resposta
por Samuel Maximo De Araujo Neto
| 19.1k xp | 41 posts

Boa noite Patrícia Santos Soares, tudo bem? Espero que sim!!

O text-decoration é aplicado em tag html que seja de links por exemplo, no seu caso o "a" depois de chamar a classe é pelo motivo da classe ser um tag li que nao tem text-decoration , logo vc esta dizendo que o css vai para o "filho" da sua tag que é o "a"

Exmplo:

//aqui esta a classe | aqui esta a tag dento da classe
.lista__link                    a{
text-decoration: none;  => isso so se aplica em tag de links ou que tenham essa propriedade
color: var(--branco-principal);
margin-left: 1em;}

Em resumo o que vem depois da sua chamada de classe sera oque vai ter prioridade. Caso queira fazer varias customizações diferentes em um em uma lista com as tags h1, p e a. 

.lista__link                    h1{
text-decoration: none;  => nao vai ter efeito
color: var(--branco-principal); => cor do titulo branco
margin-left: 1em;}

.lista__link                    p{
text-decoration: none;  => nao vai ter efeito
color: var(--red-principal); => cor do paragrafo o vermelho
margin-left: 1em;}

.lista__link                    a{
text-decoration: none;  => vai ter efeito
color: var(--green-principal); => cor do link o verde
margin-left: 1em;}

Acredito que isso pode te ajudar nos seus estudos: https://www.htmlprogressivo.net/2014/01/Seletores-descendentes-Tutorial-CSS.html#:~:text=Os%20seletores%20descendentes%20servem%20para,tags%20que%20vamos%20especificar%20também.&text=Ou%20seja%2C%20a%20"tag-,-Descendente"%20em%20vários%20documentos%20.