CSS学习笔记（伪类）

<button class="hover-button">Hover Me</button>

.hover-button:hover {
  background-color: yellow;
}

<button class="active-button">Click Me</button>

.active-button:active {
  background-color: red;
}

<input class="focus-input" type="text" placeholder="Focus on me">

.focus-input:focus {
  border: 2px solid blue;
}
.focus-input:focus-visible {
  outline: 2px solid green;
}

<a href="#section1">Go to Section 1</a>
<div id="section1">This is Section 1</div>

#section1:target {
  background-color: lightblue;
}

<button class="btn" disabled>Disabled Button</button>
<button class="btn">Enabled Button</button>

.btn:disabled {
  background-color: grey;
}
.btn:enabled {
  background-color: green;
}

<input type="checkbox" class="check" id="check1" checked>
<label for="check1">Checked</label>
<input type="checkbox" class="check" id="check2">
<label for="check2">Unchecked</label>
<input type="checkbox" class="check" id="check3">
<label for="check3">Indeterminate</label>

.check:checked + label {
  color: green;
}
.check:indeterminate + label {
  color: orange;
}

<input class="placeholder-input" type="text" placeholder="Enter text here">

.placeholder-input:placeholder-shown {
  border: 1px dashed red;
}

<input class="email-input" type="email" placeholder="Enter your email" required>

.email-input:valid {
  border: 2px solid green;
}
.email-input:invalid {
  border: 2px solid red;
}

<ul class="list">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Last Item</li>
</ul>

.list li:first-child {
  color: blue;
}
.list li:last-child {
  color: red;
}

<ul class="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

.list li:nth-child(odd) {
  background-color: lightgray;
}
.list li:nth-of-type(3n) {
  color: orange;
}

<div class="container">
  <p>Not Empty</p>
  <p></p>
</div>

.container p:empty {
  display: none;
}

<div class="post">
  <h2>Heading</h2>
  <p>Paragraph</p>
  <img src="image.jpg" alt="Image">
</div>

.post :is(h2, p, img) {
  border: 1px solid black;
}

<a href="#" class="link">Link with class</a>
<a href="#">Link without class</a>

a:not([class]) {
  color: blue;
}