Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Селектор стилей, используемый для выбора элементов HTML на странице для добавления стилей CSS.

Сортировать по производительности рендеринга от высокой к низкой С последующим:

ИДЕНТИФИКАТОР Селектор #id

Выбирайте элементы по атрибуту id, с учетом регистра.

<p id="p1" >第一段</p>
1

#p1{
  color: red;
}
1
2
3

Но его использование не рекомендуется, потому что:

• Селектор id имеет более высокий приоритет и сбрасывать стиль неудобно.
• Селектор id в основном используется JS

селектор класса .class

Через атрибут класса элементастильИмя класса выбранного элемента чувствительно к регистру.

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

<span class="important" >重点词汇</span>
1

.important{
  color: red;
  font-weight: bold;
}
1
2
3
4

К одному и тому же элементу можно добавить несколько классов стилей, разделенных пробелами.

<span class="important big" >巨大的重点词汇</span>
1

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
1
2
3
4
5
6
7

селектор тегов 标签名

Выбирайте элементы по именам тегов, без учета регистра.

<a href="https://www.baidu.com/" target="_blank" >百度</a>
1

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}
1
2
3

Не рекомендуется из-за плохой работы селектора тегов и высоких затрат на обслуживание.

селектор подстановочных знаков *

Выбрать все элементы HTML на странице, кроме псевдоэлементов. Это часто используется для очистки стиля браузера по умолчанию, но не рекомендуется, поскольку это снижает производительность.

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
1
2
3
4
5

селектор атрибутов [属性]

Выбирайте элементы на основе их атрибутов и значений атрибутов. Атрибуты не чувствительны к регистру, а значения атрибутов чувствительны к регистру.

Селектор псевдоклассов :状态名

Выбирайте элементы на основе их разных состояний

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

Используйте селекторы псевдоклассов в списках

n означает 0,1,2,3,4,5,6,7,8... (недопустимо, если n меньше 1, поскольку n = 0 не будет выбрано)

Используйте селекторы псевдоклассов в таблицах

• tr:nth-child(odd)：Соответствует строкам 1, 3 и 5 таблицы, что эквивалентноtr:nth-child(2n+1)。
• tr:nth-child(even): Соответствует строкам 2, 4 и 6 таблицы, что эквивалентноtr:nth-child(2n)。

• Практический пример селектора псевдоклассов

  • Используйте:nth-child() для реализации полос зебры, выравнивания краев, выделения списка заданного диапазона и адаптивного макета динамического списка.
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • CSS реализует динамическое отображение и скрытие (замечательное использование :checked и :target)
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • Использование: цель для большего расширения, свертывания и переключения вкладок.https://blog.csdn.net/weixin_41192489/article/details/121969768

  • Используйте:placeholder-shown для достижения взаимодействия стиля MaterialDesign.
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • Используйте:placeholder-shown, чтобы проверить нулевое значение, и приглашение не может быть пустым.
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :checked реализует расширение и свертывание
    https://demo.cssworld.cn/selector/9/2-1.php

  • :checked реализует переключение вкладок
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked реализует пользовательские переключатели, флажки, переключатели, проверки меток и выбор материалов по радио.
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • Используйте :valid и :invalid для реализации встроенной проверки формы.
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • Используйте :required и :optional для реализации текста запроса на проверку формы.
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :focus-within реализует раскрывающийся список
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • Когда поле ввода окажется в фокусе, выделите метку впереди (см. метод 5 по ссылке).
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • Наведите указатель мыши, чтобы отобразить увеличенное изображение, или щелкните мышью, чтобы отобразить увеличенное изображение.
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • :empty скрывает пустые элементы и отсутствующие поля, умные подсказки
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • :only-child реализует анимацию динамической загрузки с несколькими состояниями.
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • :fullscreen включает полноэкранное отображение выбранных изображений.
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  Селектор псевдоэлементов ::

  Используется для выбора и стилизации части элемента, а не всего элемента.

  CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
  1

  ::before и::after

  Его необходимо использовать вместе с атрибутом содержимого для установки содержимого до и после элемента. Подробности см.
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  Часто используемые практические примеры:

  • Добавляйте значки до и после элементов (волшебство ::before и ::after)
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • CSS умело использует ::after и ::before для реализации навигации по вертикальным категориям.
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • css умело использует ::after для достижения анимации переключения вкладок
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter Инициалы

  <p>很久很久以前</p>
  <p>Long long ago</p>
  1
  2

  p::first-letter {
    font-size: 2em;
    color: red;
  }
  1
  2
  3
  4

  

  ::first-line Первая строка

    <div style="width: 120px">
      <p>很久很久以前，有一个白发苍苍的老人</p>
    </div>
  1
  2
  3

  p::first-line {
    color: red;
  }
  1
  2
  3

  

  ::selection Перетащите мышь, чтобы выбрать область

  <p>很久很久以前，有一个白发苍苍的老人</p>
  1

  p::selection {
    color: red;
    background-color: yellow;
  }
  1
  2
  3
  4

  

  ::placeholder текстовый заполнитель

  <input placeholder="请输入" />
  1

  /* input 不写，则会选中页面所有元素的占位符 */
  input::placeholder {
    color: red;
  }
  1
  2
  3
  4

  

  Селектор отношений

  Выбор элементов на основе связей между элементами

  селектор потомков >

  Тег первого уровня, заключенный в тег, является его потомком.

  <div>
      <p>我是div的儿子</p>
  </div>
  1
  2
  3

  div>p{
    color:red;
  }
  1
  2
  3

  селектор потомков 空格

  Все теги внутри тега являются его потомками.

    <div class="parent">
      <p class="red">我是子代（属于后代）</p>
      <p>我是子代（属于后代，但没有 .red）</p>
      <div>
        <div class="red">我是孙代（也属于后代）</div>
      </div>
    </div>
  1
  2
  3
  4
  5
  6
  7

  /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
  .parent .red {
    color: red;
  }
  1
  2
  3
  4

  

  селектор родственного уровня ~

  Под тем же родительским элементом выберите указанный элементпослеВсе элементы одного уровня, так что, строго говоря, его следует называть 后面兄弟选择器

  <div>
    <button>按钮1(不会变红)</button>
    <p>段落</p>
    <button>按钮2（会变红）</button>
  </div>
  1
  2
  3
  4
  5

  p ~ button {
    color: red;
  }
  1
  2
  3

  

  CSS нет 前面兄弟选择器 вы можете перейти по ссылке ниже, чтобы смоделировать реализацию
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  выбор соседа, брата или сестры +

  Выбирает следующий элемент сразу после элемента

    <div class="parent">
      <p>段落</p>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  1
  2
  3
  4
  5

  p + button {
    color: red;
  }
  1
  2
  3

  

  Селектор пересечений

  Выберите элементы на странице, которые соответствуют нескольким селекторам одновременно.

  • Между селекторами нет пробелов (пробелы являются селекторами-потомками)
  • Если селектор тегов существует, селектор тегов должен быть размещен первым.

      <p class="red">很久很久以前1</p>
      <p>很久很久以前2</p>
  1
  2

  /* 选中 p 标签中class值含 red 的元素 */
  p.red {
    color: red;
  }
  1
  2
  3
  4

  

  Селектор объединения ,

  Среди нескольких селекторов, если один из них удовлетворен, он будет выбран.

  • Используется между несколькими селекторами , отдельный

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  1
  2
  3

  .error,
  .important {
    color: red;
  }
  1
  2
  3
  4