02 css基本选择器

最新推荐文章于 2024-03-09 13:40:17 发布

Molly134

最新推荐文章于 2024-03-09 13:40:17 发布

阅读量88

点赞数

分类专栏： css学习

本文链接：https://blog.csdn.net/weixin_42305895/article/details/98475079

版权

css学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基本选择器

标签选择器
类选择器
id选择器
通配符选择器
多类名选择器

标签选择器
标签选择器是指用HTML标签名称作为选择器，其基本语法格式如下:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*标签选择器如下*/
        p{
            color: palevioletred;
        }
    </style>
</head>
<body>
<p>WEB服务器也称为WWW服务器，主要功能是提供网上信息浏览服务。</p>
</body>
</html>

类选择器
类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器*/
        .css{
            color: red;
        }
    </style>
</head>
<body>
<div>html</div>
<div class="css">css</div>
<div>javascript</div>
</body>
</html>

id选择器
id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
        #js{
            color: red;
        }
    </style>
</head>
<body>
<div>html</div>
<div>css</div>
<div id="js">javascript</div>
</body>
</html>

通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ul>
<span>HTML</span>
<h1>CSS</h1>
<p>JAVASCRIPT</p>
</body>
</html>

多类名选择器
多类名选择器是指给标签指定多个类名，从而达到更多选择的目的，如<span class="c-red fontWeight">CSS</span>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            font-size: 100px;
        }
        .c-blue{
            color: blue;
        }
        .c-red{
            color: red;
        }
        .c-orange{
            color: orange;
        }
        .fontWeight{
            font-weight: bold;
        }
    </style>
</head>
<body>
<span class="c-blue">HTML</span>
<span class="c-red fontWeight">CSS</span>
<span class="c-orange">JAVASCRIPT</span>
</body>
</html>

Molly134

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02 css基本选择器

基本选择器标签选择器类选择器id选择器通配符选择器标签选择器标签选择器是指用HTML标签名称作为选择器，其基本语法格式如下:标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫