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

榕榕妈 發表於 2020-2-21 05:25:00

学习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文字选中背景色，属性选择器[属性]、[属性=值]、[属性~=值]//包含任意一个值、[属性^=值]以什么开始、[属性$=值]以什么结束。
<div class="cnblogs_code">
<pre>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{
 88 font-size: 100px;
 89 background-color: aqua;
 90 }
 91 /* 选择器[属性=值]值唯一才可以用,包含多个值的测试不行*/
 92 .shuiguo li{
 93 color: red;
 94 list-style: square;
 95 background-color: #fff;
 96 font-size: 60px!important;
 97 }
 98 /* 选择器[属性^=值]以什么开始 */
 99 .shuiguo li{
100 font-size: 20px;
101 margin: 20px;
102 }
103 /* 选择器[属性$=值]以什么结束 */
104 .shuiguo li{
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 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></pre>
</div> 
来源：https://www.cnblogs.com/webaction/p/12340054.html

頁: [1]

琼殿技术论坛's Archiver

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