学习css常用基本层级伪类属性选择器
常见的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>
