CSS选择符-----元素选择符

时间：2018-12-10 13:59:21 阅读：177 评论：0 收藏：0 [点我收藏+]

标签：htm set 唯一性标识 font title selector 文档不同

**通配选择符（*）**

选定所有对象

通配选择符(Universal Selector)
通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                color: #FF0000;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div>
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <ul>
                <li>Java</li>
                <li>C#</li>
            </ul>
        </div>
    </body>
</html>

类型选择符（Element）

以文档语言对象类型作为选择符

类型选择符(Type Selector)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{
                color: #FF0000;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div>
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <ul>
                <li>Java</li>
                <li>C#</li>
            </ul>
        </div>
    </body>
</html>

ID选择符（Element#ID）

以唯一标识符id属性等于myid的E对象作为选择符

ID选择符(ID Selector)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #language{
                color: #FF0000;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div>
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <ul id="language">
                <li>Java</li>
                <li>C#</li>
            </ul>
        </div>
    </body>
</html>

类选择符（Element.class）

以class属性包含myclass的E对象作为选择符

类选择符(Class Selector)
不同于ID选择符的唯一性，类选择符可以同时定义多个

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .a{
                color: #0000FF;
            }
            .b{
                font-weight:bold;
                font-size: x-large;
            }
        </style>
    </head>
    <body>
        <div>
            <p>第一个段落。</p>
            <p>第二个段落。</p>
            <ul class="a b">
                <li>Java</li>
                <li>C#</li>
            </ul>
        </div>
    </body>
</html>

CSS选择符-----元素选择符

标签：htm set 唯一性标识 font title selector 文档不同

原文地址：https://www.cnblogs.com/fengfuwanliu/p/10095510.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行