选择器的多种格式

选择器的多种格式

https://developer.mozilla.org/zh-CN/docs/

优先class选择器

1 简单选择器

1.1 类型选择器（元素选择器）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <style>
        p {
            color: red;
        }
        div {
            color: blue;
        }
    </style>
</head>
<body>
    <p>What color do you like?</p>
    <div>I like blue.</div>
    <p>I prefer red!</p>
</body>
</html>

1.2 类选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <style>
        .first {
            font-weight: bold;
        }
        .done {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <ul>
        <li class="first done">Create an HTML document</li>
        <li class="second done">Create a CSS style sheet</li>
        <li class="third done">Link them all together</li>
    </ul>
</body>

</html>

1.3 ID选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <style>
        #polite {
            font-family: cursive;
        }
        #rude {
            font-family: monospace;
            text-transform: uppercase;
        }
    </style>
</head>

<body>
    <p id="polite"> - "Good morning"</p>
    <p id="rude"> - "Go away!"</p>
</body>

</html>

1.4 通用选择器

使用通用选择器时要小心，因为它适用于所有的元素，在大型网页利用它可以对性能有明显的影响：网页可以显示比预期要慢。大多数情况下，你都不会使用这个选择器。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <style>
        * {
            padding: 5px;
            border: 1px solid black;
            background: rgba(255, 0, 0, 0.25)
        }
    </style>
</head>

<body>
    <div>
        <p>I think the containing box just needed a <strong>border</strong> or <em>something</em>,but this is getting <strong>out of hand</strong>!</p>
    </div>
</body>

</html>

2 属性选择器

2.1 存在和值（Presence and value）属性选择器

这些属性选择器尝试匹配精确的属性值：

[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <style>
        /* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
        [data-vegetable] {
            color: green
        }

        /* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
        [data-vegetable="liquid"] {
            background-color: goldenrod;
        }

        /* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素，
即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 */
        [data-vegetable~="spicy"] {
            color: red;
        }
    </style>
</head>

<body>
    我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
    <ul>
        <li data-quantity="1kg" data-vegetable>Tomatoes</li>
        <li data-quantity="3" data-vegetable>Onions</li>
        <li data-quantity="3" data-vegetable>Garlic</li>
        <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
        <li data-quantity="2kg" data-meat>Chicken</li>
        <li data-quantity="optional 150g" data-meat>Bacon bits</li>
        <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
        <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
    </ul>
</body>

</html>

2.2 子串值（Substring value）属性选择器

这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式（但请注意，这些选择器并不是真正的正则表达式）：

[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是字符串 ”caterpillar“ 的子字符串）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <style>
        /* 语言选择的经典用法 */
        [lang|="fr"] {
            font-weight: bold;
        }

        /* 
            具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色
        */
        [data-vegetable*="not spicy"] {
            color: green;
        }

        /* 
            具有"data-quantity"属性其值以"kg"结尾的所有元素*/
        [data-quantity$="kg"] {
            font-weight: bold;
        }

        /* 
            具有属性"data-quantity"其值以"optional"开头的所有元素 
        */
        [data-quantity^="optional"] {
            opacity: 0.5;
        }
    </style>
</head>

<body>
    我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
    <ul>
        <li data-quantity="1kg" data-vegetable>Tomatoes</li>
        <li data-quantity="3" data-vegetable>Onions</li>
        <li data-quantity="3" data-vegetable>Garlic</li>
        <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
        <li data-quantity="2kg" data-meat>Chicken</li>
        <li data-quantity="optional 150g" data-meat>Bacon bits</li>
        <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
        <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
    </ul>
</body>

</html>

3 伪类选择器

一个 CSS 伪类（pseudo-class）是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <style>
        /* 这些样式将在任何情况下应用于我们
        的链接 */

        a {
            color: blue;
            font-weight: bold;
        }

        /* 我们想让被访问过的链接和未被访问
        的链接看起来一样 */

        a:visited {
            color: blue;
        }

        /* 当光标悬停于链接，键盘激活或锁定
        链接时，我们让链接呈现高亮 */

        a:hover,
        a:active,
        a:focus {
            color: darkred;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>
</body>

</html>

鼠标悬停时：

4 组合器和选择器组

虽然一次使用一个选择器就很有用，但在某些情形中却可能效率低下。 CSS选择器在你开始组合他们进行细粒度选择的时候变得更具使用价值。基于元素之间的相互关联关系，CSS提供了几种方法来对元素进行选择。下表使用连接符展示了这些关联关系(A和B代表前文所述的任意选择器):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css3攻略</title>
    <style>
        /* 基本的table样式 */
        table {
            font: 1em sans-serif;
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* 所有在table里的td以及th，这里的逗号不是一个组合器，
        它只是允许你把几个选择器对应到相同的CSS规则上.*/
        table td,
        table th {
            border: 1px solid black;
            padding: 0.5em 0.5em 0.4em;
        }

        /* 所有table里的thead里的所有th */
        table thead th {
            color: white;
            background: black;
        }

        /* 所有table里的tbody里的所有td（第一个除外），每个td都是由它上边的td选择 */
        table tbody td+td {
            text-align: center;
        }

        /*table里所有的tbody里的td当中的最后一个 */
        table tbody td:last-child {
            text-align: right
        }

        /* 所有table里的tfoot里的th */
        table tfoot th {
            text-align: right;
            border-top-width: 5px;
            border-left: none;
            border-bottom: none;
        }

        /* 在table当中，所有的th之后的td */
        table th+td {
            text-align: right;
            border-top-width: 5px;
            color: white;
            background: black;
        }

        /* 定位在“with-currency”类中拥有属性lang并且这个属性值为en-US的元素中的，最后td(:last-child)节点的前面（::before）*/
        .with-currency[lang="en-US"] td:last-child::before {
            content: '$';
        }

        /* 定位在“with-currency”类中拥有属性lang并且这个属性值为fr的元素中的，最后td(:last-child)节点的后面（::after） */
        .with-currency[lang="fr"] td:last-child::after {
            content: ' €';
        }
    </style>
</head>

<body>
    <table lang="en-US" class="with-currency">
        <thead>
            <tr>
                <th scope="col">Product</th>
                <th scope="col">Qty.</th>
                <th scope="col">Price</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th colspan="2" scope="row">Total:</th>
                <td>148.55</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Lawnchair</td>
                <td>1</td>
                <td>137.00</td>
            </tr>
            <tr>
                <td>Marshmallow rice bar</td>
                <td>2</td>
                <td>1.10</td>
            </tr>
            <tr>
                <td>Book</td>
                <td>1</td>
                <td>10.45</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

python全栈教学知识库

【CSS】选择器的多种格式

选择器的多种格式

1 简单选择器

1.1 类型选择器（元素选择器）

1.2 类选择器

1.3 ID选择器

1.4 通用选择器

2 属性选择器

2.1 存在和值（Presence and value）属性选择器

2.2 子串值（Substring value）属性选择器

3 伪类选择器

4 组合器和选择器组

参考