Внешняя таблица стилей не переопределяет загрузчик - PullRequest
Новая
       6

Внешняя таблица стилей не переопределяет загрузчик

0 голосов
/ 02 мая 2018

Я хочу изменить стиль некоторых элементов, на которые влияют загрузочные классы родительского элемента.
-Я поставил ссылку на таблицу стилей ниже, чем у начальной загрузки
-Я даже переместил файл .css за пределы папки HTML, как указано в аналогичной теме, но он все еще не работает (ЕСЛИ Я ВСТУПАЮ КОД ВНУТРЕННЕГО СТИЛЯ, ЭТО РАБОТАЕТ ВМЕСТО)

Пока я просто пытаюсь удалить стиль из списка

Будьте осторожны: запуск этого кода из фрагмента не покажет вам никаких проблем, однако в браузере он на самом деле не работает

Вот код 

ul {
  list-style-type: none;
}
<!doctype html>
<html lang="en-us">

<head>
  <title>Title</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="../style.css">

  <!--
    <style>
      ul{
        list-style-type:none;
      }
    </style>

      -->
</head>

<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-8">
        <nav class="navbar navbar-expand-sm">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <i class="fas fa-bars"></i>
          </button>
          <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul>
              <li>
                <a class="active" href="/home.html">Home</a></li>
              <li>
                <a href="/blog.html">Blog</a>
              </li>
              <li>
                <a href="/digitalNomad.html">Digital Nomad</a>
              </li>
              <li>
                <a href="/about.html">About</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>

      <div class="col-sm-4">
        <ul>
          <li>Facebook</li>
          <li>Instagram</li>
          <li>Twitter</li>
        </ul>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>

</html>

Ответы [ 4 ]

0 голосов
/ 03 мая 2018

В дополнение к моему последнему ответу, это прекрасно работает в Chrome: 

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="css/myrule.css">
     <meta charset="UTF-8">
     <title>Tests</title>
 </head>
 <body id="mypage">
      <div class="container-fluid">
      <!-- rest of your html here -->

myfile.css содержит: 

 #mypage ul {
    list-style-type:none;
 }
0 голосов
/ 02 мая 2018

Можете ли вы убедиться, что ваша внешняя таблица стилей действительно загружается? Если это работает, когда записано во внутреннем теге стиля, но не во внешнем файле, похоже, что этот файл загружается неправильно. Это может быть проблема с именем файла, путем к файлу или даже с неверной структурой самого файла.

0 голосов
/ 02 мая 2018

Включите вашу собственную таблицу стилей над ссылкой начальной загрузки 

<link rel"stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

У меня была эта проблема много раз, она работает для меня каждый раз, так как таблица стилей CSS выше, чем таблица ниже

0 голосов
/ 02 мая 2018

Вам необходимо посмотреть CSS Specificity правила. То, что вы определяете правило, не означает, что оно автоматически отменяет правило, объявленное ранее.

Специфичность рассчитана на 4 фактора abcd: 

a     (1 if inline, 0 if in a file),
b     number of IDs in CSS rule
c     number of attribute selectors, classes and pseudo-classes,
d     number of element names and pseudo-elements.

Правило с наибольшим 4-значным числом abcd выигрывает и переопределяет меньшие объявления, поэтому встроенные объявления переопределяют все, что объявлено во включенном файле CSS.

Другие статьи о специфике CSS

Возможные решения

Как правило, не рекомендуется менять «базовые» стили или переопределять стили Bootstrap напрямую.

  1. Вы можете переопределить другие объявления, добавив !important к своим правилам, но это обычно считается плохим решением.

  2. Добавьте свой собственный класс и / или идентификатор для элементов, которые вы хотите настроить.

  3. Если вы хотите получить быстрый эффект, вы можете добавить свой собственный id или class к элементу body и затем объявить свои правила, опираясь на потомков этого id или class. Использование id таким образом придаст вашим правилам специфичность 01xx в файле, что, вероятно, будет достаточно для переопределения правил Bootstrap.

1054 * например *

CSS в файле: 

#mypage ul {
    list-style-type:none;
}

HTML: 

<body id="mypage">
...
   <ul>
   </ul>
</ul>
...