@Selector

input[type='text'] {
  color: #f40;
}

input[type='radio'],
input[type='checkbox'] {
  accent-color: #f40;
}

selector::pseudo-element {
    property: value;
}

ul li::before {
    content: '>';
}

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Modi, deserunt placeat corrupti eveniet, tempore assumenda rem minus laborum fuga magni mollitia recusandae qui laboriosam autem accusantium ullam obcaecati distinctio? Laudantium, mollitia excepturi commodi quasi cum repellendus odio sapiente minus ratione ab quis sunt, optio nobis consequuntur nihil aperiam ipsam officia rem dolorum culpa magni accusamus similique repellat? Iste quisquam dolore perferendis quo ratione deleniti, asperiores quia voluptatum, soluta nisi modi dicta repudiandae praesentium, odit dolores blanditiis ea. Minima velit numquam nemo vitae architecto harum facilis et totam expedita quisquam delectus eos quaerat sunt labore eligendi vel, dolore earum ullam voluptatem.

.info::first-letter {
  font-size: 3em;
  color: #f40;
  float: left;
  margin-right: 1em;
}

.info::first-line {
  font-weight: 600;
}

.info::selection {
  background-color: #f40;
  color: #fff;
}

li::marker {
  content: '+';
}

:nth-child(even)//选择序号为偶数的元素
:nth-child(odd)//选择序号为奇数的元素
:nth-child(2n)//选择序号为偶数的元素
:nth-child(2n+1)//选择序号为奇数的元素
:nth-child(3n)//选择序号为3、6、9等元素
:nth-child(3n+1)//选择序号为1、4、7、10等元素
:nth-child(-n+3)//选择序号为3、2、1的元素；:nth-child(3-n)错误

<div class="box">
  <h2>...</h2>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <h2>...</h2>
  <p>...</p>
  <p>...</p>
  <h2>...</h2>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>

.box h2:first-child {
  color: #f40;
}

.box p:first-child {
  color: #f40;//NOT
}

.box p:first-of-type {
  color: #f40;
}

.box p:nth-child(2) {
  text-decoration: underline;
}

:root {
  --title-h: 100px;
  --main-color-white: #f3f3f3;
  --main-color-red: #ff0f5b;
  --main-color-purple: #be01fe;
  --main-color-blue: #01b4ff;
  --main-color-green: #2dfc52;
  --main-color-orange: #ff7f50;
  --main-color-gray: #333849;
}

.warn {
  font-weight: 600;
  color: var(--main-color-red);
}

ul li:not(:last-child) {
  margin-right: 10px;
}

ul li + li {
  margin-left: 10px;
}

ul {
  display: flex;
  gap: 10px;
}

h2:not(header h2, section h2) {
  color: #f40;
}

.box h1,
.box h2,
.box h3 {
  color: #f40;
}

.box :is(h1, h2, h3) {
  color: #f40;
}

input:is(:hover, :focus) {
  border: 1px solid #f40;
  outline: none;
}

.card:has(img + p) {
  flex-direction: row;
}

article:has(ol, ul) {
  /* Matches an 
 that contains either
      an ordered or unordered list. */
}

dt:has(+ dt)

.grid {
  display: grid;
  transition: 300ms;
  grid-template-columns: var(--left-width, 48px) auto;
}

.grid:has(.left:hover) {
  --left-width: 30%;
}

body:has(#p0:checked) {
  background-color: #ffb8b8;
  color: #ffb8b8;
}

body:has(#p1:checked) {
  background-color: #f1c40f;
  color: #f1c40f;
}

:where(.left, .center, .right):hover {
  background: crimson;
}

:where(body, main) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="box active"></div>

.box {
    opacity: 0.5;
}

.box.hover,
.box.active {
    opacity: 1;
}

ul,li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul li{
    text-transform: capitalize;
}

• bro1
• bro2
• bro3
• bro4
• bro5
• bro6
• bro7
• bro8
• bro9

.bro li:first-child::after {
    content: ': first-child';
}

.bro li:last-child::after {
    content: ': last-child';
}

.bro3+li {
    background-color: #078;
}

.bro6~li {
    background-color: #f40;
}

<div class="tabcard">
  <input type="radio" hidden name="tabcard" id="file" checked>
  <label for="file">file</label>
  <input type="radio" hidden name="tabcard" id="edit">
  <label for="edit">edit</label>
  <input type="radio" hidden name="tabcard" id="selection">
  <label for="selection">selection</label>
  <input type="radio" hidden name="tabcard" id="view">
  <label for="view">view</label>
  <div class="tabcard-cont">
    <div>file</div>
    <div>edit</div>
    <div>selection</div>
    <div>view</div>
  </div>
</div>

.tabcard-cont div {
  display: none;
}

#file:checked+label {
  background-color: var(--main-color-blue);
  color: #fff;
  border-radius: 10px;
}

#file:checked~.tabcard-cont div:nth-child(1) {
  display: block;
}

...

div {
    color: #f40 !important;
}