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

  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">
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 earlyp>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>