CSS не рисует границу ниже активного эскиза в MVC 5 Просмотр для галереи изображений

Question

Приведенный ниже CSS должен вызывать появление белой рамки под текущим активным эскизом в галерее изображений, но это не так.

.carousel-thumbnails .carousel-indicators li {
        height: auto;
        max-width: 100px;
        width: 100px;
        border: none;
        box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);

        &.active {
            border-bottom: 4px solid #fff;
        }
    }

Visual Studio 17 подчеркивает символ «&», указывающий, что отсутствует свойство. Я видел примеры установки таких вещей, как P или H1, но я не понимаю, почему там есть символ «&». CSS пришел по следующей ссылке, которая имеет полный набор кода.

введите описание ссылки здесь

Я добавил галерею примеров в свое приложение ASP.NET MVC 5 в виде. Все это работает, кроме этой части CSS, чтобы нарисовать тонкую границу под активным эскизом. Может кто-нибудь сказать, пожалуйста, как это исправить или это то, что просто не работает в Visual Studio 2017?

Ниже приведена копия MVC View, которую я создал с помощью примера:

@{
    ViewBag.Title = "Claremont Botanical Garden";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<br />
<link href="~/Content/slideshow/carousel-with-thumbails.css" rel="stylesheet" />
<script src="~/Scripts/slideshow/carousel-with-thumbails.js"></script>

<!--Carousel Wrapper-->
<div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
    <!--Slides-->

    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="d-block w-100"
                 src="~/Content/Images/Photos/Animals/_Squirrel-01-DSC_0028-1440.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100"
                 src="~/Content/Images/Photos/Animals/_Squirrel-02-DSC_0131-1440.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100"
                 src="~/Content/Images/Photos/Animals/_Squirrel-03-DSC_0154-1440.jpg" alt="Third slide">
        </div>

        <div class="carousel-item">
            <img class="d-block w-100"
                 src="~/Content/Images/Photos/Animals/_Bird-01-DSC_0639-1440.jpg" alt="Third slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100"
                 src="~/Content/Images/Photos/Animals/_bird-02-DSC_0158-1440.jpg" alt="Third slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100"
                 src="~/Content/Images/Photos/Animals/_Bird-03-DSC_0606-1440.jpg" alt="Third slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100"
                 src="~/Content/Images/Photos/Animals/_Bird-04-DSC_0637-1410.jpg" alt="Third slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100"
                 src="~/Content/Images/Photos/Animals/_Bird-hawk-01-DSC_0550-1440.jpg" alt="Third slide">
        </div>




    </div>
    <!--/.Slides-->
    <!--Controls-->
    <a class="carousel-control-prev" href="#carousel-thumb" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-thumb" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!--/.Controls-->

    <ol class="carousel-indicators">
        <li data-target="#carousel-thumb" data-slide-to="0">
            <img class="d-block w-100 img-fluid"
                 src="~/Content/Images/Photos/Animals/_Squirrel-01-DSC_0028-1440.jpg">
        </li>
        <li data-target="#carousel-thumb" data-slide-to="1">
            <img class="d-block w-100 img-fluid"
                 src="~/Content/Images/Photos/Animals/_Squirrel-02-DSC_0131-1440.jpg">
        </li>
        <li data-target="#carousel-thumb" data-slide-to="2">
            <img class="d-block w-100 img-fluid"
                 src="~/Content/Images/Photos/Animals/_Squirrel-03-DSC_0154-1440.jpg">
        </li>

        <li data-target="#carousel-thumb" data-slide-to="3" class="active">
            <img class="d-block w-100 img-fluid"
                 src="~/Content/Images/Photos/Animals/_Bird-01-DSC_0639-1440.jpg">
        </li>
        <li data-target="#carousel-thumb" data-slide-to="4">
            <img class="d-block w-100 img-fluid"
                 src="~/Content/Images/Photos/Animals/_bird-02-DSC_0158-1440.jpg">
        </li>
        <li data-target="#carousel-thumb" data-slide-to="5">
            <img class="d-block w-100 img-fluid"
                 src="~/Content/Images/Photos/Animals/_Bird-03-DSC_0606-1440.jpg">
        </li>
        <li data-target="#carousel-thumb" data-slide-to="6">
            <img class="d-block w-100 img-fluid"
                 src="~/Content/Images/Photos/Animals/_Bird-04-DSC_0637-1410.jpg">
        </li>

        <li data-target="#carousel-thumb" data-slide-to="7">
            <img class="d-block w-100 img-fluid"
                 src="~/Content/Images/Photos/Animals/_Bird-hawk-01-DSC_0550-1440.jpg">
        </li>

    </ol>
</div>
<!--/.Carousel Wrapper-->

Заранее спасибо.

Answer 1

То, что вы скопировали, это SCSS , а не простой CSS. Если вы не используете препроцессор, код, который вы скопировали, не будет работать.

Амперсанд & в данном контексте означает селектор .carousel-thumbnails .carousel-indicators li.active Амперсанд Sass .

Так что, если вы не используете препроцессор, удалите вложенное правило &.active { border-bottom: 4px solid #fff; } и вместо этого создайте новое (не вложенное) правило .carousel-thumbnails .carousel-indicators li.active { border-bottom: 4px solid #fff; }, и оно должно работать (я предполагаю, что у вас есть что-то еще, применяющее .active класс, когда элемент активен).

Answer 2

Ваша проблема в коде CSS.Вы использовали пробелы между именами классов вместо мест с запятыми.

Ваш правильный код должен быть таким:

    .carousel-thumbnails ,.carousel-indicators ,li {
        height: auto;
        max-width: 100px;
        width: 100px;
        border: none;
        box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);
        &.active

    {
        border-bottom: 4px solid #fff;
    }
    }

удачи!