css怎么选中标签

百变鹏仔 3个月前 (09-20) #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怎么选中标签

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写