What pseudo-classes are added to html5/css3-Front-end Q&A-php.cn

Table of Contents

Structural pseudo-class selector

UI element status pseudo-class selector

Home

Web Front-end

Front-end Q&A

What pseudo-classes are added to html5/css3

醉折花枝作酒筹

Jun 02, 2021 pm 03:10 PM

html

The new pseudo-classes are: ":first-child", ":last-child", ":nth-child(n)", ":link", ":visited", ":active" ”, “:hover”, “:focus”, “:not()”, etc.

What pseudo-classes are added to html5/css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Structural pseudo-class selector

:first-child The first child node, :last-child The last child node, :nth-child(n) The nth child Node, :nth-last-child(n) The nth child node from the last, :only-child The only child node

:nth-child(n), :nth-last-child(n) and Some special usages limit the selection through things in brackets:

1. odd/event: the odd/even element

2. xn y: the xn y element

Without further ado, let’s talk about the code. The following is to set the pseudo-class selector for the li tag

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      li:first-child {
        border: 1px solid black;
      }

      li:last-child {
        background-color: #aaa;
      }

      li:nth-child(2) {
        color: #888;
      }

      li:nth-last-child(2) {
        font-weight: bold;
      }

      span:only-child {
        font-size: 30pt;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>oaaaaaaaaaaa</li>
      <li>obbbbbbbbbbb</li>
      <li>occccccccccc</li>
      <li>odddddddddd</li>
      <li>oeeeee</li>
      <li><span id="andorid"></span>saaaaaa啊飒飒</li>
    </ol>
  </body>
</html>

Copy after login

You can see the difference Effect

UI element status pseudo-class selector

:link (element before being visited (usually only a hyperlink)), :visited(has been visited element (usually only a hyperlink), :active (the element being accessed is between the mouse click and release (usually only a hyperlink)), :hover (the element in the mouse hover state), :focus (Element that has received focus)

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .a {
        font-size: 50px;
      }
      .a:link {
        color: red;
      }
      .a:visited {
        color: grey;
      }
      .a:active {
        color: green;
      }
      .b {
        height: 40px;
        width: 200px;
      }
      .b:focus {
        background-color: blue;
      }
      .c {
        height: 40px;
        width: 60px;
      }
      .c:hover {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <a href="#" class="a">aaa</a>
    <form action="#">
      文本框:<input type="text" name="aaa" class="b" />
      <input type="submit" value="提交" class="c" />
    </form>
  </body>
</html>

Copy after login

It started like this

When we click on the hyperlink

After clicking

#Next look at the text box. When we put the focus on the text box (that is, the input of the text box status), get: the style in focus

## Look at the button again, when the mouse hovers over the button, get: the style in hover (because the author wants to take a screenshot, one The cursor cannot be captured when taking a screenshot, so the cursor cannot be seen in the picture)

: The not() pseudo-class selector is equivalent to the subtraction of two selectors. , such as li:not(#a){} modifies all element blocks that match the li selector but do not match the id of a

Recommended learning:

css video tutorial

The above is the detailed content of What pseudo-classes are added to html5/css3. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn