学习css常用基本层级伪类属性选择器

最新推荐文章于 2024-03-08 17:51:21 发布

marcushbs

最新推荐文章于 2024-03-08 17:51:21 发布

阅读量131

点赞数

分类专栏：技术

原文链接：https://www.colorgg.com

版权

技术专栏收录该内容

503 篇文章 9 订阅

订阅专栏

常见的css选择器包含：常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器，其中常用选择器分为：1.html选择符*{}//给页面上所有的标签设置模式；2.类选择符.hcls{}//给class是hcls的一类标签设置模式；3.id选择符#h3{}//给id是h3的标签设置样式；4.关联选择符#div h1、#div h1.ljhcls；5.div,h1,pmspan,button{}基本选择器分为:first-child第一个、::first-letter第一个字母、::fist-line第一行、:last-child最后一个元素、:nth-child(n)第几个元素，层级选择器分为a,b组合、a b后代、a>b子代、a+b a的一个是b，伪类选择器:hover鼠标经过、:focus焦点、::selection文字选中背景色，属性选择器[属性]、[属性=值]、[属性~=值]//包含任意一个值、[属性^=值]以什么开始、[属性$=值]以什么结束。

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>学习css常用基本层级伪类属性选择器</title>
  7     <style type="text/css">
  8     /*常用选择器*/
  9     /*html选择符*//* *{}给页面上所有的标签设置模式*/
 10     *{  
 11         color: royalblue;
 12     }
 13     /*类选择符*//*.hcls{}给class是hcls的一类标签设置模式；*/
 14     .hcls{
 15         font-weight: bold;
 16     }
 17     /*id选择符*//*#h3{}给id是h3的标签设置样式 */
 18     #h3{
 19         font-style: italic;
 20     }
 21     /*关联选择符 */
 22     div h1{
 23         font-size: 18px;
 24     }
 25     /*组合选择符*/
 26     div,button{
 27         background-color: #ccc;
 28         margin: 5px;
 29     }
 30     /*基本选择器*/
 31     /*::first-letter */
 32     #h3::first-letter{
 33         font-size: 30px;
 34     }
 35      /*::first-line */
 36      .h4::first-line{
 37          color: red;
 38      }
 39      /*:first-child */
 40      .shuiguo li:first-child{
 41         color:#f90;
 42      }
 43      /*:last-child */
 44      .shuiguo li:last-child{
 45         text-decoration: line-through;
 46      }
 47       /*:nth-child(n) */
 48       .shuiguo li:nth-child(2){
 49         text-decoration: overline;
 50         background-color: sienna;
 51      }
 52      /*层级选择器*/
 53      /*a,b组合 */
 54      #h3,.box{
 55         background-color: #ccc;
 56         margin: 5px;
 57     }
 58     /*a b a后代中的b */
 59     .h4 p{
 60         text-decoration: overline;
 61         font-size: 30px;
 62     }
 63     /*a>b a的子元素b */
 64     div>p{
 65         font-style: italic;
 66     }
 67     /*a+b a后面的第一个元素b */
 68     div+span{
 69         height: 40px;
 70         background-color: teal;
 71         color: #fff;
 72     }
 73     /*伪类选择器*/
 74     /*:hover*/
 75     input:hover{
 76      border-radius: 5px;
 77     }
 78     /*:focus焦点*/
 79     input:focus{
 80         outline-color: teal;
 81     }
 82     /*::selection文字选中背景色*/
 83     p::selection{
 84         color: #fff;
 85     }
 86     /* 属性选择器 */
 87     .shuiguo li[title]{
 88         font-size: 100px;
 89         background-color: aqua;
 90     }
 91     /* 选择器[属性=值]  值唯一才可以用,包含多个值的测试不行*/
 92     .shuiguo li[title=pg]{
 93     color: red;
 94     list-style: square;
 95     background-color: #fff;
 96     font-size: 60px!important;
 97     }
 98     /* 选择器[属性^=值]以什么开始 */
 99     .shuiguo li[title^=pg]{
100         font-size: 20px;
101         margin: 20px;
102     }
103     /* 选择器[属性$=值]以什么结束 */
104     .shuiguo li[title$=xj]{
105         background-color: #ccc;
106     }
107     </style>
108 </head>
109 <body>
110     <div class="hcls" id="h3">
111         <h1>html+css+javascript is very much!</h1>
112     </div>
113     <div class="hcls h4"><!--多个class用空格分开,id是唯一的-->
114         <p>If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early;
115             If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early;
116             If not for life, I can go to bed early and get up early</p><p>多个class用空格分开,id是唯一的</p>
117             <p>多个class用空格分开,id是唯一的</p>
118     </div>
119     <span>div后面的第一个元素</span>
120     <ul class="shuiguo">
121         <li title="pg">苹果</li>
122         <li title="xg pg">西瓜</li>
123         <li title="pg xj">香蕉</li>
124     </ul>
125     <button class="box">按钮</button>
126     <form action="">
127         <p>用户名</p><input type="text" name="" id="">
128     </form>
129 </body>
130 </html>