CSS之选择器(一)——基础选择器

最新推荐文章于 2024-03-21 00:22:48 发布

BlazarBruce

最新推荐文章于 2024-03-21 00:22:48 发布

阅读量129

点赞数

分类专栏： CSS

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

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一：CSS组成部分

CSS学习的内容主要包括两部分;

一：选择器

二：属性

二：基础选择器符号及使用示例

（1）通用选择器

符号： *

通用选择器使用示例：

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            * {
                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>

（2）元素选择器

符号：<元素符号>

元素选择器使用示例

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            a {
                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>

（3）类选择器

符号：<类名>

类选择器使用示例

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

（4）id选择器

符号： #

id选择器使用示例

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

（5）属性选择器

符号：[属性]

属性选择器示例代码

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

CSS选择器（二）——伪元素选择器

BlazarBruce

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之选择器(一)——基础选择器

一：CSS组成部分CSS学习的内容主要包括两部分;一：选择器二：属性二：基础选择器符号及使用示例（1）通用选择器目录一：CSS组成部分二：基础选择器符号及使用示例（1）通用选择器（2）元素选择器（3）类选择器（4）id选择器（5）属性选择器符号： *通用选择器使用示例：<!DOCTYPE HTML><h...
复制链接

扫一扫