Как оформить ссылку внутри указанного тега c div? - PullRequest
0 голосов
/ 29 апреля 2020

Итак, у меня есть следующее s css, которое должно предназначаться для ссылок внутри класса, называемого категориями, однако только раздел: hover является стилями, но обычная ссылка получает свои цвета от родителя класса категорий и не переопределяется s css, который я написал. Что я сделал не так?

.categories {
  a{
    color: #767676;
    text-decoration: underline;
  }
  a:hover{
    color: #767676;
    text-decoration: underline;
  }
}
<div class="col col-8">
  @foreach ($allStories as $stories)
  <div class="row py-2 pl-3">       
    <div class="col-12 news p-0">
      <img src="https://picsum.photos/200/300" alt="" class="p-0 newsImage">
      <div class="px-2 py-4 headers">
        <div class="row">
        <div class="col-6">
          <strong>
            <a href="{{ route('NewsFlashesController.show', $stories->id) }}">{{ $stories->title }}
            </a>
          </strong>
        </div>
        {{-- <div class="col-6 text-right">
          <img src="{{ asset('images/like-2.svg')}}" alt="" width="15px">
            <span class="previewText" style="vertical-align: middle;">{{ $stories->likes }}
          </span> &nbsp&nbsp
          <img src="{{ asset('images/chat.svg')}}" alt="" width="15px">
            <span class="previewText" style="vertical-align: middle;">10 
          </span>
        </div> --}}
        </div>
        <div class="row categories">
          <a href="#" class="ml-3">
            <small>{{ $stories->category->name }}</small>
          </a>
        </div>
        <div class="row">
          <span class=" pl-3 pr-2 pb-2 previewText">
            @if(strlen($stories->story) > 180)
            {{ substr($stories->story, 0, 180) }}...
            @else
            {{ $stories->story }}
            @endif
          </span>            
        </div>
      </div>
    </div>
  </div>
  @endforeach          

</div>
.categories a {
  color: #767676;
  text-decoration: underline;
}

.categories a:hover {
  color: #767676;
}
<div class="col col-8">
    <div class="row py-2 pl-3">       
    <div class="col-12 news p-0">
      <img src="https://picsum.photos/200/300" alt="" class="p-0 newsImage">
      <div class="px-2 py-4 headers">
        <div class="row">
        <div class="col-6">
          <strong>
            <a href="http://dechra.test/viewstory/1">A long post
            </a>
          </strong>
        </div>

        </div>
        <div class="row categories">
          <a href="#" class="ml-3">
            <small>Interviews </small>
          </a>
        </div>
        <div class="row">
          <span class=" pl-3 pr-2 pb-2 previewText">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc volutpat tellus sed sagittis interdum. Fusce auctor tortor in orci condimentum, ut pretium ante dictum. Proin et rutru...
                      </span>            
        </div>
      </div>
    </div>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...