Подробная интерпретация приоритета CSS, и, наконец, нельзя забыть

CSS

Рекомендации по расстановке приоритетов в CSS

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

2, и когдаПриоритет равен приоритету любого из нескольких объявлений CSS., к элементу будет применено последнее объявление в CSS.

3. Приоритет имеет смысл только при наличии нескольких объявлений одного и того же элемента. Потому что каждое правило CSS, которое действует непосредственно на элемент, всегда берет на себя/берет на себя правила, которые элемент наследует от своих предков.

4. Это видно так: чем конкретнее и скуднее описание селектора, тем выше приоритет, а селектор, объявленный позже, имеет более высокий приоритет, чем селектор, объявленный ранее (однотипные селекторы).

тип селектора

Не влияет на приоритет (его можно понимать как очень низкий приоритет)

  1. селектор подстановочных знаков (*)
  2. селектор отношений
    • +селектор соседнего брата
    • >дочерний селектор
    • ~Универсальный селектор Brother
    • ' 'селектор потомков
  3. :not()Отрицательный псевдокласс

Влияет на приоритет (Следующие приоритеты сортировки увеличиваются в порядке)

  1. селектор элементов(h1 p div)
  2. псевдоэлемент (::before ::after)
  3. селектор класса (.class1) а такжеселектор атрибутов (a[title] img[title*=hello]) Оба имеют одинаковый приоритет, и тот, который объявлен позже, переопределит предыдущий.
  4. Селектор псевдокласса (:hover)
  5. Селектор идентификатора (#demo)

Другие, влияющие на конечный результат

1. Встроенные стилиstyle="xxx" <a style="color:red;"></a>

2,!important

Некоторые вещи, на которые следует обратить внимание

  1. Псевдоэлемент не может быть выбран (ID, класс не может его превзойти)
  <head>
    <style>
      .box1::after {
        content: "我是伪元素";
        color: cyan;
      }
      #box {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="box" class="box1" name="lxfriday">
      hello div
    </div>
  </body>

результат我是伪元素еще не красный, причина в том#boxописываетdiv, тогда как псевдоэлементы нельзя выбирать другими селекторами. Стиль этого псевдоэлемента унаследован отdiv.

我是伪元素

2. Селекторы классов и селекторы атрибутов имеют одинаковый приоритет. Измените селекторы атрибутов в следующем коде.[name="lxfriday"]и селектор класса.box1положение, цвет изменится.

  <head>
    <style>
      .box1:hover {
        color: cyan;
      }

      [name="lxfriday"] {
        color: red;
      }
      .box1 {
        color: pink;
      }
    </style>
  </head>
  <body>
    <div id="box" class="box1" name="lxfriday">
      hello div
    </div>
  </body>

Таким образом, влияние на конечный эффект:!important> Встроенные стилиstyle> Селекторы идентификаторов > Селекторы псевдоклассов > Селекторы атрибутов = селекторы классов > Псевдоэлементы > Селекторы элементов (типов) > Селекторы отношений > Селекторы подстановочных знаковПонимание приоритета должно основываться на том, насколько точно селектор описывает цель, обратите внимание на эффект следующего примера:

!important

При использовании объявления стиля с!importantПравило, это объявление имеет приоритет перед любым другим объявлением. Хотя технически,!importantЭто не имеет ничего общего с приоритетом, но напрямую связано с конечным результатом. использовать!importantЭто плохая привычка, и ее следует избегать, поскольку она нарушает внутренние правила каскадирования в таблицах стилей и затрудняет отладку и поиск ошибок. когда два конфликта!importantКогда объявление правила применяется к тому же элементу, будет использоваться объявление с более высоким приоритетом.

Не используйте встроенные стили!importantСлучайно распылялся. Встроенный стиль уже имеет очень высокий приоритет, и если селектор добавил!important, вы можете рассмотреть возможность определения более точного селектора для переопределения!important.

Если встроенные стили действительно добавлены!important, вы можете использовать js для устранения (js не может исключить !important селекторов классов и идентификаторов).

  <body>
    <div id="box" class="box1" style="color: red !important">
      hello div
    </div>
    <script>
      document.querySelector("#box").style.color = "blue";
    </script>
  </body>

js 消除内联样式 !important

Вот некоторые примеры оптимизации:

  1. Обязательно оптимизируйте использованиеПриоритет правил стилярешить проблему вместо!important
  2. Используйте только на определенных страницах, которым необходимо переопределить общесайтовый или внешний CSS.!important
  3. никогда не используйте в своем плагине!important, другим будет сложно изменить стиль
  4. никогда не по всему сайтуCSSиспользуется в коде!important

некоторое освещение!importantспособ:

  1. Просто добавьте еще одну группу!importantправила CSS, а затем дайте этому селектору более высокий приоритет (добавьте тег, идентификатор или класс); или добавьте тот же селектор, поместив его позицию после исходного объявления (короче, определите правило в конце, чем выиграет);
   table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }
  1. Или используйте тот же селектор, но после существующего стиля;
td { height: 50px !important; }

td { height: 55px !important; } /* 应用这规则 */
  1. или просто перепишите исходное правило, чтобы избежать использования!important.

Несколько замечаний о приоритезации CSS

Специфика формы

Приоритет рассчитывается на основе формы селектора. В приведенном ниже примере, несмотря на то, что селектор*[id="foo"]Выбирается идентификатор, но он по-прежнему используется в качестве селектора атрибута для расчета собственного приоритета.

  <head>
    <style>
      *#foo {
        color: green;
      }

      *[id="foo"] {
        color: purple;
      }
    </style>
  </head>
  <body>
    <div id="foo">
      hello div
    </div>
  </body>

Отображается зеленым цветом. Несмотря на то, что совпадают одни и те же элементы, селектор ID имеет более высокий приоритет. Таким образом, первое объявление стиля вступает в силу.

Игнорировать расстояния в дереве DOM

  <head>
    <style>
      body h1 {
        color: green;
      }

      html h1 {
        color: purple;
      }
    </style>
  </head>
  <body>
    <h1 id="foo">
      hello div
    </h1>
  </body>

показано какpurple.

О псевдоклассах и псевдоэлементах

псевдоклассэто ключевое слово, добавляемое к селектору, которое указывает особое состояние элемента, который нужно выбрать. Например,:hoverМожет использоваться для изменения цвета кнопки, когда пользователь наводит на нее курсор. Использование псевдокласса:xxxформа представления. Общие псевдоклассы:

  1. :link :visited :hover :activeправильно<a>Этикетки рекомендуют использовать этот порядок
    • link: нормальное состояние ссылки
    • visited: после посещения ссылки
    • hover: когда мышь находится на ссылке
    • active: когда ссылка нажата
  2. :first-child :last-child :nth-child() :nth-last-child() :only-child
  3. :not()
  4. :focus

псевдоэлементКлючевое слово прикреплено к концу селекторов, он позволяет изменять стиль определенной части выбранного элемента. Рекомендуемая формулировка для псевдоэлемента::xxОбщие псевдоэлементы

  1. ::before ::after
  2. ::first-line
  3. ::first-letter
  4. ::selection

Добро пожаловать, чтобы обратить внимание на мой общедоступный номероблако тень небо, принесите вам полный галантерейных товаров, добро пожаловать в групповое обсуждение.

公众号二维码

Категории