Technology Sharing

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

CSS Style selector, used to select HTML elements in the page in order to add CSS styles.

Rendering performance from high to low Followed by:

ID Selector #id

Select elements by their id attribute, case sensitive

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

#p1{
  color: red;
}
1
2
3

However, it is not recommended because:

• The id selector has a higher priority, which makes it inconvenient to reset the style.
• The id selector is mainly used by JS

Class Selectors .class

Through the class attribute of the elementstyleSelect elements by class name, case sensitive

The most recommended CSS selector is the class selector, because it is semantically strong and easy to reset the style.

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

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

You can add multiple style classes to the same element, separated by spaces.

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

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

Tag selector 标签名

Select elements by their tag name, case insensitive

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

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

Not recommended because label selectors have poor performance and high maintenance costs

Wildcard selector *

Selects all HTML elements in the page except pseudo elements. It is often used to clear the default style of the browser, but it is not recommended because it consumes performance.

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

Attribute Selectors [属性]

Select elements based on their attributes and attribute values. Attributes are case-insensitive, but attribute values ​​are case-sensitive.

Pseudo-class selectors :状态名

Select elements based on their different states

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

Using pseudo-class selectors in lists

n represents 0, 1, 2, 3, 4, 5, 6, 7, 8... (It is invalid when n is less than 1, because n = 0 will not be selected)

Using pseudo-class selectors in tables

• tr:nth-child(odd)：Matches rows 1, 3, and 5 of the table, which is equivalent totr:nth-child(2n+1)。
• tr:nth-child(even): matches rows 2, 4, and 6 of the table, which is equivalent totr:nth-child(2n)。

• Practical examples of pseudo-class selectors

  • Use :nth-child() to implement zebra stripes, align edges, highlight lists in specified intervals, and adaptive layout of dynamic lists
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • CSS to achieve dynamic display and hiding (the magic of :checked and :target)
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • Use :target to expand more, collapse, and switch between tabshttps://blog.csdn.net/weixin_41192489/article/details/121969768

  • Use :placeholder-shown to implement Material Design style interactions
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • Use: placeholder-shown to check empty values ​​and prompt that it cannot be empty
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :checked to expand and collapse
    https://demo.cssworld.cn/selector/9/2-1.php

  • :checked implements tab switching
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked implements custom radio buttons, check boxes, switches, label check boxes, and material radio buttons
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • Use :valid and :invalid to implement native form validation
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • Use :required and :optional to implement form validation prompt text
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :focus-within implements a drop-down list
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • When the input box is focused, highlight the label in front (see method 5 in the link)
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • Mouse hover to enlarge the image vs mouse click to enlarge the image
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • :empty Hide empty elements and missing fields smart prompts
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • :only-child implements multi-state dynamic loading animation
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • :fullscreen Click on the image to display it in full screen
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  Pseudo-element selectors ::

  Used to select and style a portion of an element, rather than the entire element

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

  ::before and::after

  Need to be used with the content attribute to set the content before and after the element.
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  Commonly used practical examples:

  • Add icons before and after elements (the magic of ::before and ::after)
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • CSS clever use of ::after and ::before to achieve vertical category navigation
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • Clever use of CSS::after to achieve tab switching effect
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter Initials

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

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

  

  ::first-line first row

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

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

  

  ::selection Drag the mouse to select the area

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

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

  

  ::placeholder Text placeholder

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

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

  

  Relationship Selector

  Select elements by their relationships

  Descendant selectors >

  The first layer of tags wrapped in a tag is its children

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

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

  Descendant Selectors 空格

  All tags within a tag are its descendants

    <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

  

  Sibling Selector ~

  Select the same parent element, in the specified elementafterAll the same-level elements of , so strictly speaking, it should be called 后面兄弟选择器

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

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

  

  CSS No 前面兄弟选择器 , you can refer to the following link for simulation implementation
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  Adjacent Sibling Selector +

  Selects the next element immediately following an element

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

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

  

  Intersection Selector

  Select elements on the page that match multiple selectors at the same time

  • There is no space between selectors (if there is a space, it means it is a descendant selector)
  • If a tag selector is present, it must be placed first

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

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

  

  Union Selector ,

  Among multiple selectors, as long as one of them is met, it will be selected

  • Use between multiple selectors , Separate

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

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