day76 CSS高级选择器

快来打我* 2023-10-09 11:27 56阅读 0赞

## 高级选择器 ##

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>高级选择器</title> <style> .h2 { color: red; } body { font-size: 30px; } /*选择器高级：基础选择器的各种组合*/ /*查询顺序，由内至外*/ /*1.、后代(子代)选择器：只控制一个选择器，前方的都是修饰*/ /*更习惯用后代，因为css2就出现了，而后面因为后代不能够满足需求，css3中推出子代*/ /*后代选择器：只要是后代就可以，需要用空格隔开*/ /*body .h2 {*/ /*font-size: 40px;*/ /*}*/ /*子代选择器：必须为子代，其他不可以，使用 > 隔开*/ body > .h2 { font-size: 40px; } /*2、兄弟(相邻)选择器：只控制一个选择器，前方的都是修饰*/ /*兄弟 ~，可相邻也可不相邻，但必须通过上方修饰下方*/ /*.h3 ~ .h4 {*/ /*color: pink;*/ /*}*/ /*相邻 +，必须相邻，但必须通过上方修饰下方*/ .h3 + .h4 { color: pink; } /*3、群组选择器：控制多个选择器，全部都会进行修改*/ /*注：每一个选择器位，可以为id、class、标签、选择器组合*/ .h2, body h3, h4 { text-align: center; } /*4.选择器的优先级：通过权重（个数）*/ /* 无限大于：!important > id > class(伪类) > 标签 种类相同：比个数 个数相同：比定义的顺序，和标签写的前后位置无关 注意：高级选择器种类不影响优先级 */ #h6 { color: black; } .d1 div h6 { color: pink; } .d2 h6 { color: brown; } body h6 { color: cyan; } div > h6 { color: orange; } h6 { font-size: 100px; text-align: center; color: red; } </style> <style> /*5、交叉选择器，权值高，提升优先级*/ h6#h6.h.hh { color: chartreuse; } </style> </head> <body> <div class="d1"> <div class="d2"> <h6 id="h6" class="h hh">css高级选择器优先级</h6> </div> </div> <h3 class="h3">第1个h3</h3> <h4 class="h4">第1个h4</h4> <h4 class="h4">第2个h4</h4> <h3 class="h3">第1个h3</h3> <div> <h4 class="h4">第1个h4</h4> <h4 class="h4">第2个h4</h4> </div> <h2 class="h2">h2标签</h2> <div> <h2 class="h2">div下的h2</h2> </div> <p>p标签的内容不水平居中</p> </body> </html>

## 伪类选择器，属性选择器 ##

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*()内填的是编号，所以从1开始*/ /*1.伪类选择器可以单独出现，相当于省略了通配*/ /*2.:nth-child先匹配层级位置，再匹配标签(更常用)*/ /*3.:nth-of-type先匹配标签类型，再匹配层级位置*/ i:nth-child(1) { color: orange; } i:nth-child(4) { color: red; } i:nth-of-type(1) { color: brown; } i:nth-of-type(2) { color: blue; } </style> <style> .box { width: 150px; } .pp { width: 50px; height: 50px; background-color: red; border-radius: 50%; float: left; text-align: center; line-height: 50px; } /* 2n偶数 2n-1|2n+1奇数 3n最后一列 3n+1|3n-2第一列 3n-1中间列*/ /* 不可以丛判断 */ .pp:nth-child(3n-1) { color: orange; } .a1.a2 { color: red; } .a1:nth-child(1) { color: orange; } /*id > class=:nth- > 标签*/ /*总结： 1、伪类选择器优先级与类相同 2、nth-child在同一结构下都是相同选择器时使用 3、nth-of-type在同一结构下不全是相同选择器时使用 */ </style> <style> /*属性选择器*/ /*总结： 1、属性选择器优先级同类 2、[属性名]查找所有有该属性的标签 3、[属性名=属性值]精确查找 4、[属性名^=值]以某某值开头 4、[属性名*=值]包含某某值(模糊查询) */ p[a] { color: crimson; } </style> </head> <body> <a class="a1 a2" href="">aaaaaaaaaaaaaa</a> <hr>  <div class="box"> <p class="pp p1" a>p1</p> <p class="pp p2" b>p2</p> <p class="pp p3">p3</p> <p class="pp p4">p4</p> <p class="pp p5">p5</p> <p class="pp p6">p6</p> <p class="pp p7">p7</p> <p class="pp p8">p8</p> <p class="pp p9">p9</p> </div> <hr> <i class="i3">iiii1</i> <p class="p3">pppp</p> <div class="div3">dddd</div> <i class="i3">iiii2</i> <hr> <div> <i class="i3">iiii1</i> <p class="p3">pppp</p> <div class="div3">dddd</div> <i class="i3">iiii2</i> </div> </body> </html>

## a标签的四大伪类 ##

!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>a标签的四大伪类</title> <style> /*一、a的四大伪类*/ a { font-size: 30px; } /*1、标签没有被访问过*/ a:link { color: orange; } /*2、标签被悬浮*/ a:hover { /*鼠标样式*/ /*wait row-resize none text pointer default*/ cursor: pointer; } /*3、标签被激活*/ a:active { color: pink; cursor: wait; } /*4、标签已被访问过*/ a:visited { color: brown; } </style> <style> /*二、reset操作*/ /*在开发中往往用不到四种伪类，且要清除掉系统的默认样式*/ /*就可以如下对a标签进行样式设置：清除系统默认样式 - reset操作*/ a { color: black; /*去掉下划线*/ text-decoration: none; } </style> <style> /*三、普通标签的伪类运用*/ .btn { width: 80px; height: 45px; /*background-color:背景色*/ background-color: orange; } /*字体*/ .btn { /*bold 加粗 字体大小 行高 字体*/ font: bold 20px/45px 'STSong'; /*水平居中*/ text-align: center; } /*边界圆角*/ .btn { border-radius: 5px; } /*不允许文本操作*/ body { user-select: none; } /*伪类：悬浮*/ .btn:hover { cursor: pointer; background-color: orangered; } /*伪类：激活*/ .btn:active { background-color: brown; } /*只是div，没有访问过和未访问过一说*/ </style> </head> <body> <div class="btn">按钮</div>  <a href="https://www.baidu.com">前往百度</a> </body> </html>

## 基础样式 ##

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本属性</title> <style> .box { width: 300px; height: 300px; background-color: orangered; } .box { /*大小*/ font-size: 30px; /*颜色*/ color: blue; /*字族*/ /*第一个是首选字体，其余是备用字体*/ font-family: "STSong", "新宋体", "Arial"; /*字重: lighter | normal | bold | 100 ~ 900*/ font-weight: 500; /*字体样式*/ font-style: oblique; } .box { /*文本划线: underline line-through overline*/ text-decoration: none; /*文本水平位置: left center right*/ text-align: center; /*行高*/ line-height: 300px; } .box { /*整体设置*/ font: bold 20px/300px '黑体', 'Arial'; color: darkcyan; text-align: left; /*首行缩进*/ text-indent: 20px; /*字间距*/ letter-spacing: 10px; } </style> </head> <body> <div class="box"> 文本ABC ab </div> </body> </html>

## 边界圆角 ##

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>边界圆角</title> <style> .box { width: 300px; height: 300px; background-color: orangered; } .box { /*固定值 | 百分比*/ /*border-radius: 10%;*/ /*一共四个角，左上为第一个角，顺时针编号*/ /*border-radius: 10px 20px 30px 40px;*/ /*不足找对角*/ /*border-radius: 10px 50px 100px;*/ /*border-radius: 10px 50px;*/ /*横纵分离,先横后纵*/ /*border-radius: 50px / 50%;*/ /*border-radius: 50px 100px / 50%;*/ border-radius: 60%; } </style> <style> .b { width: 300px; height: 150px; background-color: orangered; border-radius: 50% 50% 0 0 / 100% 100% 0 0; } </style> </head> <body> <div class="box"></div> <div class="b"></div> </body> </html>

## 背景图片 ##

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景图片</title> <style> .box { width: 300px; height: 300px; background-color: orangered; } .box { /*显示比屏幕大的图片：缩放尺寸*/ /*background-image: url("img/kj.gif");*/ /*尽量只设置宽，高等比缩放，不失真*/ /*background-size: 300px 300px;*/ } .box { /*显示比屏幕小的图片：处理平铺与位置*/ background-image: url("img/lss.jpg"); /*平铺: repeat-x repeat-y repeat no-repeat*/ background-repeat: no-repeat; /*位置*/ /*1.只设置x轴，y轴默认center*/ /*2.x轴：left center right 具体像素 百分百*/ /*2.y轴：top center bottom 具体像素 百分百*/ background-position: center center; } </style> </head> <body> <div class="box"></div> </body> </html>

## 精灵兔 ##

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>精灵图案例</title> <style> /*精灵图就是操作大图在显示区域的位置*/ .box { width: 500px; height: 100px; background-color: orangered; border: solid; } .box { background-image: url("img/bg.png"); background-position-y: -150px; } .box:hover { cursor: pointer; background-position-y: -250px; } </style> <style> .b1 { width: 155px; height: 48px; border: solid; background-image: url("img/bg.png"); } .b1:hover { cursor: pointer; background-position-y: -48px; } </style> <style> .b2 { width: 157px; height: 48px; border: solid; background-image: url("img/bg.png"); background-position: -155px 0; } .b2:hover { cursor: pointer; background-position: -155px -48px; } </style> </head> <body> <div class="box"></div> <div class="b1"></div> <div class="b2"></div> </body> </html>

## 显示方式 ##

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>显示方式</title> <style> .box { width: 500px; height: 100px; background-color: orangered; } </style> <style> /*显示方式：display block： 1.支持设置宽高 2.自带换行 重点：所有有宽高、参与位置布局的都是block inline： 1.不支持设置宽高，宽高只能有文本撑开 2.不带换行，一行显示不下会自动换行(保留数据的整体性) 注：自定义的标签，默认display都是inline 重点：存放文本的 inline-block: 1.支持设置宽高 2.不带换行，一行显示不下会自动换行(以标签整体换行，标签左右有间距) 重点：不去主动设置该显示方式，系统的两个img、input都设置为了单标签(不会嵌套任何东西) 注：如果要用inline-block参与布局，为了标签布局不受内容影响，设置vertical-align: top */ a { width: 500px; height: 100px; display: block; background-color: pink; } owen { width: 100px; height: 100px; display: inline-block; background-color: cyan; font-size: 30px; /*文本垂直对齐方式: baseline top bottom*/ vertical-align: top; } owen:nth-of-type(2) { font-size: 20px; } img { width: 100px; height: 100px; background-color: tan; } input { width: 100px; height: 100px; background-color: tan; vertical-align: top; } </style> </head> <body> <a href="5.边界圆角.html" class="box"></a> <div>div1</div> <div>div2</div> <a href="">a1</a> <a href="">a2</a> <owen>html/css</owen> <owen>javascript</owen> <owen></owen> <owen></owen> <owen></owen> <img src="img/lss.jpg" alt=""> <input type="text"> <div></div> </body> </html>

## 盒模型布局 ##

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>盒模型布局</title> <style> body { margin: 0; padding: 100px 0 0 200px; } /*盒模型组成部分： */ /*margin + border + padding + content 1.每部分都有自己的独立区域 2.content是宽x高，作为内容或子标签的显示区域 3.padding是内边距，没有自身颜色，完成内容的内移(保证显示区域大小不变，可以响应减小content) 4.border是边框，有宽度、样式、颜色，自身透明(transparent)时，是可以透出背景颜色的 5.margin是外边距，控制盒子的显示位置，left、top控制自身，right、bottom影响兄弟 注：margin的偏移依据当前所在位置 */ div { width: 100px; height: 100px; background-color: red; } owen { /*margin: 10px;*/ margin-top: 50px; margin-left: 10px; /*margin-right: 10px;*/ /*margin-bottom: 100px;*/ } owen { /*border-color: black;*/ /*border-width: 3px;*/ /*none：无样式 solid：实线 dashed：虚线 dotted：点线*/ /*border-style: solid;*/ border: red dashed 10px; } owen { /*padding: 上右下左，不足找对边*/ /*padding: 10px 20px 30px;*/ padding: 10px; } owen { display: block; /*width: 100px;*/ width: 80px; /*height: 100px;*/ height: 80px; background-color: orange; } </style> </head> <body>  <owen>123</owen> <div></div> </body> </html>

## 浮动布局 ##

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>浮动布局</title> <style> .wrap { border: 10px solid yellow; width: 300px; /*父级在宽度不固定时高度不能设置死*/ /*height: 300px;*/ } /*清浮动：父级清浮动，就是在自己宽度是否确定下，都能保证父级的高度刚刚好包裹子集*/ /*清浮动，让高度不受子集的浮动影响，如果宽度确定，把高度写死，这样也叫清浮动 清浮动的方式有很多种，但是推荐使用父级清浮动*/ .wrap:after { content: ''; display: block; clear: both; } .box { width: 100px; height: 100px; background-color: orange; border-radius: 50%; font: 20px/100px 'Arial'; color: blue; text-align: center; } .box { float: left; } .b { width: 500px; height: 100px; background-color: red; } /*浮动布局： 1.子集浮动参照父级宽度 2.子集浮动不再撑开父级高度 3.父级高度需要自己处理，否则会影响兄弟布局，采用清浮动处理 */ </style> <style> h1:before { content: '123'; } /*当控制的控制自身完成所有布局（包含所有子集布局），再执行该时间点*/ h1:after { content: '000'; } </style> </head> <body> <h1>内容</h1>  <div class="wrap"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> <div class="box">9</div> </div> <div class="b"></div> </body> </html>

## 两种布局案例 ##

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>两种布局总结</title> <style> body, h1 { margin: 0; } </style> <style> .header { width: 1210px; height: 100px; background-color: orange; /*自动获取留白区域*/ /*margin-left: auto;*/ /*margin-right: auto;*/ margin: 0 auto; } .header:after { content: ''; display: block; clear: both; } .header a { display: block; width: 500px; height: 100px; background-color: red; float: left; } .header form { /*background-color: pink;*/ float: right; /*父子级顶端产生距离，建议使用padding*/ padding-top: 30px; } .header input { /*margin-right: 20px;*/ width: 220px; height: 30px; border: none; font-size: 17px; vertical-align: top; } .header button { width: 32px; height: 32px; border: none; background-color: red; /*outline：外边框*/ outline: none; color: white; margin-right: 30px; vertical-align: top; } </style> </head> <body>   <div class="header"> <h1> <a href=""></a> </h1> <form method="get" action="https://www.baidu.com/s"> <input type="text" name="wd"> <button type="submit">Go</button> </form> </div> </body> </html>

一个标签如果是浮动的，那么他的宽和高都可以被子集撑开

转载于:https://www.cnblogs.com/lucky75/p/11311620.html