CSS（2）基本选择器

基本选择器

标签选择器

标签选择器，会选择到页面上所有的这个标签的元素

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>标签选择器</title>
 ​
   <!-- 标签选择器，会选择到页面上所有的这个标签的元素 -->
   <style>
     h1{
       color: #c3d23b;
       background: cadetblue;
       border-radius: 20px;
     }
     p{
       font-size: 80px;
     }
   </style>
 ​
 </head>
 <body>
 ​
 <h1>Java</h1>
 <h1>Java</h1>
 ​
 <p>琪琪又炸毛了</p>
 ​
 </body>
 </html>

 

类选择器

类选择器格式，.class的名称{}(首字母不能数字)

好处，可以多个标签归类，是同一个class，可以复用

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>类选择器</title>
 ​
   <!-- 类选择器格式，.class的名称{} (首字母不能数字)-->
   <!-- 好处，可以多个标签归类，是同一个class，可以复用 -->
   <style>
     .biaoti1{
     color : #2f70ff;
     }
     .biaoti2{
       color: blueviolet;
     }
   </style>
 ​
 </head>
 <body>
 ​
 <h1 class="biaoti1">标题1</h1>
 <h1 class="biaoti2">标题2</h1>
 <h1 class="biaoti1">标题3</h1>
 ​
 <p class="biaoti1">p标签</p>
 ​
 </body>
 </html>
 ​

 

id选择器

id选择器 ： id必须保证全局唯一！

#id名称{}

（首字母不能数字） 不遵循就近原则，固定的

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>id选择器</title>
 ​
   <!-- id选择器 ：
   id必须保证全局唯一！
   #id名称{}
   （首字母不能数字）
   不遵循就近原则，固定的
   优先级 ： id > class > 标签
   -->
   <style>
     #biaoti1{
       color: #c3d23b;
     }
 ​
   </style>
 ​
 </head>
 <body>
 ​
 <h1 id="biaoti1">标题1</h1>
 <h1 >标题2</h1>
 <h1 >标题3</h1>
 <h1>标题4</h1>
 ​
 </body>
 </html>
 ​

优先级 ： id > class > 标签

层次选择器

  1. 后代选择器 ： 在某个元素的后面 祖爷爷 爷爷 爸爸 你

     body ul{
           background: #4a78c2;
         }

  2. 子选择器 一代 儿子

         body>p{
           background: blueviolet;
         }

  3. 相邻兄弟选择器 只有一个（向下）

         .active+p{
           background: #222222;
         }

  4. 通用选择器 当前选中元素的向下的所有兄弟元素

     .active~p{
       background: crimson;
     }

代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>层次选择器</title>
 ​
   <style>
     /*p{
       background: #c3d23b;
     }*/
 ​
     /*后代选择器
     body ul{
       background: #4a78c2;
     }*/
 ​
     /*子选择器
     body>p{
       background: blueviolet;
     }*/
 ​
     /*相邻兄弟选择器   只有一个（向下）
     .active+p{
       background: #222222;
     }*/
 ​
     /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素
     .active~p{
       background: crimson;
     }*/
   </style>
 ​
 </head>
 <body>
 ​
 <p>p1</p>
 <p class="active">p2</p>
 <p>p3</p>
 <ul>
   <li>
     <p>p4</p>
   </li>
   <li>
     <p>p5</p>
   </li>
   <li>
     <p>p6</p>
   </li>
 </ul>
 <p>p7</p>
 ​
 </body>
 </html>

 

 posted on 2021-06-20 19:08  琪琪又炸毛了  阅读(150)  评论(0)    收藏  举报