css怎么选中标签-9543建站博客

广告：宝塔Linux面板高效运维的服务器管理软件点击【 https://www.bt.cn/p/uNLv1L 】立即购买

css怎么选中标签

css选中标签的方法：1、利用id选择器，语法为“#id名{css代码;}”；2、利用类选择器，语法为“.类名{css代码;}”；3、利用标签选择器，语法为“标签名{css代码;}”；4、利用通配符选择器，语法为“*{css代码;}”。

本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

css怎么选中标签

在css中有四种方法来选中标签，也是4个选择器。

1、id 选择器

根据指定的id名称，在当前界面中找到对应的唯一一个的标签，然后设置属性

#id名称 {属性：值;}

登录后复制

<!DOCTYPE html><html><head><meta charset="utf-8">    <title>id选择器</title>    <style>        #p1 {            color: red;        }        #p2 {            color: green;        }        #p3 {            color: blue;        }    </style></head><body><p id="p1">大多数人的帅，都是浮在表面的，是外表的帅</p><p id="p2">而EGON，不仅具备外表帅，内心更是帅了一逼</p><p id="p3">EGON就是我，我就是EGON</p></body></html>

登录后复制

2、class ，类选择器

根据指定的类名称，在当前界面中找到对应的标签，然后设置属性

  .类名称 {属性：值;}

登录后复制

示例

<!DOCTYPE html><html><head><meta charset="utf-8">    <title>id选择器</title>    <style>        .p1 {            color: red;        }        .p2 {            color: green;        }        .p3 {            color: blue;        }    </style></head><body><p class="p1">大多数人的帅，都是浮在表面的，是外表的帅</p><p class="p2">而EGON，不仅具备外表帅，内心更是帅了一逼</p><p class="p3">EGON就是我，我就是EGON</p></body></html>#练习第一行与第三行的颜色都是红色第一行与第二行的字体大小都是50px第二行与第三行内容有个下划线<!DOCTYPE html><html><head><meta charset="utf-8">    <title>id选择器</title>    <style>        .p1 {            color: red;        }        .p2 {            font-size: 50px;        }        .p3 {            text-decoration: underline;        }    </style></head><body><p class="p1 p2">第一行内容</p><p class="p2 p3">第二行内容</p><p class="p1 p3">第三行内容</p></body></html>

登录后复制

3、标签选择器

根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性

标签名称 {属性：值;}

登录后复制

示例如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>标签选择器</title>    <style type="text/css">        p {            color: red;        }    </style></head><body>    <p>EGON美丽的外表下其实隐藏着一颗骚动的心</p>    <ul>        <li>            <ul>                <li>                    <ul>                        <li>                            <p>这颗心叫做七巧玲珑心，男人吃了会流泪，女人吃了会怀孕</p>                        </li>                    </ul>                </li>            </ul>        </li>    </ul></body></html>

登录后复制

4、通配符选择器

选择所有标签

   * {        属性：值；    }

登录后复制

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>通配符选择器</title>    <style type="text/css">        * {            color: red;        }    </style></head><body>    <h1 >我是标题</h1>    <p >我是段落</p>    <a href="#">我是超链接</a></body></html>

登录后复制

（学习视频分享：css视频教程）

以上就是css怎么选中标签的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~