CSS选择器（三）——伪类选择器

最新推荐文章于 2024-04-24 19:55:30 发布

BlazarBruce

最新推荐文章于 2024-04-24 19:55:30 发布

阅读量3.3k

点赞数 15

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_39820671/article/details/102660316

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一：使用结构性伪类选择器

（一）：根元素选择器

（二）：子元素选择器

1：使用：first-child 选择器示例代码

2：使用：last-child 选择器示例代码

3：使用：only-child 选择器示例代码

4：使用：only-of-type 选择器示例代码

5：使用：nth-child 选择器示例代码

（一）：使用:link和:visited选择器

一：使用结构性伪类选择器

（一）：根元素选择器

使用：root选择器示例代码

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
              :root {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>
         <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

运行效果：

（二）：子元素选择器

1：使用：first-child 选择器示例代码

示例代码一：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
              :first-child {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>           
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and <span>oranges</span>.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

运行效果

示例代码二：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
              p > span:first-child {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>           
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and <span>oranges</span>.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

运行效果：

2：使用：last-child 选择器示例代码

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
              :last-child {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>           
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and <span>oranges</span>.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

运行效果;

3：使用：only-child 选择器示例代码

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
              :only-child {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>           
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

运行效果：

4：使用：only-of-type 选择器示例代码

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
              :only-of-type {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>           
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

运行效果

5：使用：nth-child 选择器示例代码

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
              body > :nth-child(2) {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>           
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

运行效果;

二：使用UI伪类选择器

（一）：选择启用或禁用元素

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
              :enabled {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>           
        <textarea> This is an enabled textarea</textarea>
        <textarea disabled> This is a disabled textarea</textarea>
    </body>
</html>

运行效果：

（二）：选择已勾选的元素

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Bruce"/>
        <meta name="description" content="A simple example"/>
        <style>
            :checked + span {
                background-color: red;
                color: white;
                padding: 5px;
                border: medium solid black;
            }
        </style>
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="apples">Do you like apples:</label>
                <input type="checkbox" id="apples" name="apples"/>
                <span>This will go red when checked</span>
            </p>            
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

运行效果：

（三）：选择默认元素

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Bruce"/>
        <meta name="description" content="A simple example"/>
        <style>
            :default {
                outline: medium solid red;
            }
        </style>
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">Name: <input id="name" name="name"/></label>
            </p>
            <button type="submit">Submit Vote</button>
            <button type="reset">Reset</button>
        </form>
    </body>
</html>

运行效果：

（四）：选择有效和无效的input元素

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Bruce"/>
        <meta name="description" content="A simple example"/>
        <style>
            :invalid {
                outline: medium solid red;
            }
            :valid {
                outline: medium solid green;
            }
        </style>
    </head>
    <body>
        <form method="post" action="http://titan:8080/form">
            <p>
                <label for="name">Name: <input required id="name" name="name"/></label>
            </p>
            <p>
                <label for="name">City: <input required id="city" name="city"/></label>
            </p>
            <button type="submit">Submit</button>
        </form>
    </body>
</html>

运行效果;

（五）：选择限定范围的input元素

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Bruce"/>
        <meta name="description" content="A simple example"/>
        <style>
            :in-range {
                outline: medium solid green;
            }
            :out-of-range: {
                outline: medium solid red;
            }
        </style>
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">                       
            <p>
                <label for="price">
                    $ per unit in your area:
                    <input type="number" min="0" max="100"
                          value="1" id="price" name="price"/>
                </label>
            </p>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

运行效果：

（六）：选择必需和可选的input元素

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Bruce"/>
        <meta name="description" content="A simple example"/>
        <style>
            :required {
                outline: medium solid green;
            }
            :optional {
                outline: medium solid red;
            }
        </style>
    </head>
    <body>        
        <form method="post" action="http://titan:8080/form">                       
            <p>
                <label for="price1">
                    $ per unit in your area:
                    <input type="number" min="0" max="100" required
                          value="1" id="price1" name="price1"/>
                </label>
                <label for="price2">
                    $ per unit in your area:
                    <input type="number" min="0" max="100"
                          value="1" id="price2" name="price2"/>
                </label>
            </p>
            <input type="submit" value="Submit"/>
        </form>
    </body>
</html>

运行效果：

三：使用动态伪类选择器

（一）：使用:link和:visited选择器

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            :link {
                border: thin black solid;
                background-color: lightgrey;
                padding: 4px;
                color:red;
            }
            :visited {
                background-color: grey;
                color:white;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

（二）：使用:hover选择器

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            :hover {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

（三）：使用:active选择器

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            :active {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <button>Hello</button>
    </body>
</html>

（四）：使用:focus选择器

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            :focus{
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>
        <form>
            Name: <input type="text" name="name"/>
            <p/>
            City: <input type="text" name="city"/>
            <p/>
            <input type="submit"/>
        </form>
    </body>
</html>

四：其他伪类选择器

（一）：使用否定选择器

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            a:not([href*="apress"]) {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>
        <a href="http://apress.com">Visit the Apress website</a>
        <p>I like <span>apples</span> and oranges.</p>
        <a href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

运行效果：

（二）：使用:lang选择器

示例代码：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            :lang(en) {
                border: thin black solid;
                padding: 4px;
            }
        </style>
    </head>
    <body>
        <a lang="en-us" id="apressanchor" class="class1 class2" href="http://apress.com">
            Visit the Apress website
        </a>
        <p>I like <span lang="en-uk" class="class2">apples</span> and oranges.</p>
        <a lang="en" id="w3canchor" href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

运行效果：

BlazarBruce

关注

15
点赞
踩
61

收藏

觉得还不错? 一键收藏
2
评论
CSS选择器（三）——伪类选择器

目录一：使用结构性伪类选择器（一）：根元素选择器（二）：子元素选择器1：使用：first-child 选择器示例代码2：使用：last-child 选择器示例代码3：使用：only-child 选择器示例代码4：使用：only-of-type选择器示例代码5：使用：nth-child选择器示例代码二：使用UI伪类选择器（一）：选择启用或禁用元素...
复制链接

扫一扫