Итак, у меня есть следующее 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>   
<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>