WEB基础--选择器_web标记选择器-CSDN博客

本文链接：https://blog.csdn.net/x1480984105/article/details/139117742

标签选择器

代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           /* 标签选择器，选择指定标签进行样式设置 */
           p{
               color: #aa55ff;
           }
           h1{
               color: #aa55ff;
           }
       </style>
   </head>
   <body>
       <p>狂欢之椅</p>
       <p>p2</p>
       <h1>我要玩第五人格</h1>

   </body>
</html>

id选择器

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">


           .op{
               color: #ffc4ff;
           }
           /* 同样的选择器，后面的样式会盖住前面的样式 */
           .oa{
               background-color:#a2e2ff ;
           }
           /* 如果选择器多个组合在一起，中间没有空格，代表并且的意思 */
           .op.oa{
               font-size: 50px;
           }
           .ob{
               color: aquamarine;
               font-size: 70px;

           /* id选择器，是标签上定义的属性，id唯一 */
           /* 命名规则，以数字，字母，-和_构成，不能以数字开头，不能包含特殊字符 */
           #p{
               font-size: 80px;
           }

       </style>
   </head>
   <body>
       <p class="op oa" id="p">狂欢之椅</p>
       <p class="op">p2</p>
       <h1 class="ob">我要玩第五人格</h1>

   </body>
</html>

类选择器

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">

           /* 标签选择器，选择指定标签进行样式设置 */
/*            p{
               color: #aa55ff;
           }
           h1{
               color: #aa55ff;
           } */
           /* 类选择器，又称为class选择器通过标签上class名找到满足条件的标签
           不同类型标签可以提取公共样式*/
           .op{
               color: #ffc4ff;
           }
           /* 同样的选择器，后面的样式会盖住前面的样式 */
           .oa{
               background-color:#a2e2ff ;
           }
           /* 如果选择器多个组合在一起，中间没有空格，代表并且的意思 */
           .op.oa{
               font-size: 50px;
           }
           .ob{
               color: aquamarine;
               font-size: 70px;
           }

       </style>
   </head>
   <body>
       <p class="op oa">狂欢之椅</p>
       <p class="op">p2</p>
       <h1 class="ob">我要玩第五人格</h1>

   </body>
</html>

选择器的优先级

id>标签

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">


           /* 标签选择器，选择指定标签进行样式设置 */
           p{
               color: #aa55ff;
           }
           h1{
               color: #aa55ff;
           }

           /* 类选择器，又称为class选择器通过标签上class名找到满足条件的标签
           不同类型标签可以提取公共样式*/
           .op{
               color: #ffc4ff;
           }
           /* 同样的选择器，后面的样式会盖住前面的样式 */
           .oa{
               background-color:#a2e2ff ;
           }
           /* 如果选择器多个组合在一起，中间没有空格，代表并且的意思 */
           .op.oa{
               font-size: 50px;
           }
           .ob{
               color: aquamarine;
               font-size: 70px;
           /* id选择器，是标签上定义的属性，id唯一 */
               /* 命名规则，以数字，字母，-和_构成，不能以数字开头，不能包含特殊字符 */
               #p{
                   color: blue;

               }