搜索到
391
篇与
的结果
-
常用文本属性 1. 文本颜色<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本颜色</title> <style> div { font-size: 100px; } .test1 { color: rgb(255, 0, 0); } .test2 { color: rgba(255, 0, 0, 0.5); } .test3 { color: #0000FF; } .test4 { color: #0000FF88; } .test5 { color: hsl(0, 100%, 50%); } .test6 { color: hsl(0, 100%, 50%, 0.5); } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> <div class="test5">孙笑川5</div> <div class="test6">孙笑川6</div> </body> </html>2. 文本间距<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本间距</title> <style> div { font-size: 30px; } .test1 { /* 字母间距 */ letter-spacing: 20px; } .test2 { /* 单词间距（通过空格识别单词） */ word-spacing: 12px; } </style> </head> <body> <div>hello world！孙笑川</div> <div class="test1">hello world！孙笑川</div> <div class="test2">hello world！孙笑川</div> </body> </html>3. 文本修饰<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本修饰</title> <style> div { font-size: 40px; } .test1 { /* 上划的红色波浪线 */ text-decoration: overline wavy red; } /* 下划的绿色虚线 */ .test2 { text-decoration: underline dotted green; } /* 删除线 */ .test3 { text-decoration: line-through; } .test4, ins, del { /* 没有各种线 */ text-decoration: none; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> <ins>孙笑川4</ins> <del>孙笑川4</del> </body> </html>4. 文本缩进<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本缩进</title> <style> div { font-size: 40px; text-indent: 80px; } </style> </head> <body> <div>欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！</div> </body> </html>5. 文本对齐—水平<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本对齐_水平</title> <style> div { font-size: 40px; background-color: aquamarine; text-align: right; } </style> </head> <body> <div>孙笑川</div> </body> </html>6. font-size<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>font-size</title> </head> <body> <!-- 1.由于字体设计的原因，文字最终呈现的大小，并不一定于font-size的值一致，可能大，也可能小 2.通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些 --> </body> </html>7. 行高<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>行高</title> <style> .test { font-size: 40px; background-color: skyblue; /* 第一种写法：值为像素值 */ /* line-height: 40px; */ /* 第二种写法：值为normal */ /* line-height: normal; */ /* 第三种写法：值为数值，参考自身font-size的倍数 */ /* line-height: 1.5; */ /* 第三种写法：值为百分比 */ /* line-height: 150%; */ } </style> </head> <body> <div class="test">sunxiaochuan孙笑川，带带大师兄，药水哥yaoshuigesunxiaochuan孙笑川，带带大师兄，药水哥yaoshuigesunxiaochuan孙笑川，带带大师兄，药水哥yaoshuige</div> </body> </html>8.行高注意事项<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>行高注意事项</title> <style> /* 1.行高过小，文字会重叠，且最小值为0，不能为负数 */ /* #test { font-size: 40px; background-color: skyblue; line-height: 60px; } */ /* 2.行高是可以继承的 */ /* #test { font-size: 40px; background-color: skyblue; line-height: 1.5; } span { font-size: 200px; color: red; } */ /* line-height 和 height 的关系： 设置了height，高度就是height的值 没有设置height，高度就是 line-height * 行数 */ /* #test { font-size: 40px; background-color: yellowgreen; line-height: 100px; height: 300px; } */ /* 没有设置height，高度是 line-height * 行数，此处 line-height 为0，所以也就是为什么背景色没有了的原因 */ #test { font-size: 40px; background-color: skyblue; line-height: 0px; } /* 应用场景： 1.调整多行文字的间距 2.单行文字的垂直居中 3. */ </style> </head> <body> <!-- <div id="test">孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波</div> --> <!-- <div id="test">孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波<span>药水哥</span>>药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波</div> --> <!-- <div id="test">孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波</div> --> <div id="test">孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波</div> </body> </html>10. 文本对齐—垂直<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本对齐_垂直</title> <style> /* 1.顶部：无需任何属性，在垂直方向上，默认就是顶部对齐 2.居中：对于单行文字，让 height=line-height即可 3.底部：对于单行文字，目前临时的解决方案是：让 line-height = (height * 2) - x x是根据字体族动态决定的一个值 */ div { font-size: 40px; background-color: skyblue; height: 400px; line-height: 750px; } </style> </head> <body> <div>孙笑川</div> </body> </html>11. vertical-align<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>vertical-align</title> <style> /* vertical-align 用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式 注：不能控制块级元素 */ div { font-size: 100px; height: 300px; background-color: skyblue; } span { font-size: 40px; background-color: orange; vertical-align: top; } img { height: 150px; /* vertical-align: middle; */ } .test { vertical-align: top; } </style> </head> <body> <div> sunxiaochuan孙笑川x<span>x是根据字体族动态决定的一个值</span> </div> <hr> <div> sunxiaochuan孙笑川x<img src="../images/IMG_0003.JPG"> </div> <hr> <table border="1" cellspacing="0"> <caption>人员信息</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <th height="200px" class="test">孙笑川</th> <th>男</th> <th>33</th> </tr> <tr> <th>刘波</th> <th>男</th> <th>30</th> </tr> <tr> <th>药水哥</th> <th>男</th> <th>29</th> </tr> </tbody> </table> </body> </html> -
字体常用属性 1. 字体大小<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体大小</title> <style> body { font-size: 20px; } .test1 { font-size: 40px; } /* .test2 { font-size: 30px; } .test3 { font-size: 20px; } .test4 { font-size: 10px; } */ </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> </body> </html>2. 字体族<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体族</title> <style> /* 字体族：衬线字体（笔锋强劲的那种）/非衬线字体 可以设置多个字体，浏览器解析时按从左到右的顺序查找，没找到就使用后面的，且通常在最后写上 serif 或 sans-serif作为这一组的标识，如果都没找到，浏览器会联合系统选择一种合适的字体 */ .test1 { font-size: 100px; font-family: "微软雅黑"; } .test2 { font-size: 100px; font-family: "楷体"; } .test3 { font-size: 100px; font-family: "宋体"; } .test4 { font-size: 100px; font-family: "华文彩云"; } .test5 { font-size: 100px; font-family: "STCaiyun", "STHupo", "Microsoft YaHei", sans-serif; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> <div class="test5">孙笑川4</div> </body> </html>3. 字体风格<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体风格</title> <style> .test1 { font-size: 100px; font-style: normal; } .test2 { font-size: 100px; font-style: italic; } .test3 { font-size: 100px; font-style: oblique; } em { font-size: 100px; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <em>孙笑川4</em> </body> </html>4. 字体粗细<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体粗细</title> <style> div { font-size: 100px; } .test1 { font-weight: lighter; } .test2 { font-weight: normal; } .test3 { font-weight: bold; } .test4 { font-weight: bolder; } .test5 { font-weight: 300; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> <div class="test5">孙笑川5</div> </body> </html>5. 字体复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体复合属性</title> <style> /* 编写规则： 1.字体大小、字体族必须写上 2.字体族必须是最后一位，字体大小必须是倒数第二位 3.各个属性间用空格隔开 */ .test1 { font: bold italic 100px "华文彩云1","华文琥珀"; } </style> </head> <body> <div class="test1">孙笑川1</div> </body> </html>
-
像素、颜色 1. 像素<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>像素</title> <style> .test { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="test"></div> </body> </html>2. 颜色表示方式—颜色名<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第1种表示_颜色名</title> <style> .test { color: red; } </style> </head> <body> <h2 class="test">孙笑川</h2> </body> </html>3. 颜色表示方式—rgb/rgba<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第2种表示_rgb或rgba</title> <style> /* 若三种颜色的值相同，呈现的是灰色，值越大，灰色越浅 */ .test1 { color: rgb(255, 0, 0); } .test2 { color: rgb(0, 255, 0); } .test3 { color: rgb(0, 0, 255); } .test4 { color: rgb(138, 43, 226); } .test5 { color: rgba(138, 43, 226, 0.5); } </style> </head> <body> <h2 class="test1">孙笑川1</h2> <h2 class="test2">孙笑川2</h2> <h2 class="test3">孙笑川3</h2> <h2 class="test4">孙笑川4</h2> <h2 class="test5">孙笑川5</h2> </body> </html>4. 颜色表示方式—HEX/HEXA<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第3种表示_HEX或HEXA</title> <style> /* 格式 #ff0000 每一位数字的取值范围是0 ~ f，即：(1,2,3,4,5,6,7,8,9,a,b,c,d,e,f) 所以每一种光的最小值是00，最大值是ff */ .test1 { color: #FF0000; } .test2 { color: #00FF00; } .test3 { color: #0000FF; } .test4 { color: #c7edcc; } .test5 { color: rgba(138, 43, 226, 0.5); } </style> </head> <body> <h2 class="test1">孙笑川1</h2> <h2 class="test2">孙笑川2</h2> <h2 class="test3">孙笑川3</h2> <h2 class="test4">孙笑川4</h2> <h2 class="test5">孙笑川5</h2> </body> </html>5. 颜色表示方式—HSL/HSLA<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第4种表示_HSL或HSLA</title> <style> /* hsl(色相, 饱和度, 亮（明）度) 色相：取值范围 0 - 360度 饱和度：0% 全灰，100% 没有灰 亮度：0% 亮度没了 黑色，100% 太亮了 白色 */ .test1 { color: hsl(0deg, 100%, 50%); } .test2 { color: hsl(60deg, 100%, 50%); } .test3 { color: hsl(120deg, 100%, 50%); } .test4 { color: hsl(0deg, 50%, 50%); } .test5 { color: hsla(0deg, 50%, 50%, 60%); } </style> </head> <body> <h2 class="test1">孙笑川1</h2> <h2 class="test2">孙笑川2</h2> <h2 class="test3">孙笑川3</h2> <h2 class="test4">孙笑川4</h2> <h2 class="test5">孙笑川5</h2> </body> </html>
-
三大特性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS三大特性</title> </head> <body> <!-- 1.层叠性 概念：如果发生了样式冲突，就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖） 2.继承性 概念：元素会自动拥有其父元素，或其祖元素上所设置的某些样式 规则：优先继承离得近的 常见的可继承属性：text-xxx font-xxx line-xxx color 3.优先级 !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式 并集选择器计算权重时，每一个部分是分开算的 --> </body> </html>
-
选择器的优先级 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>选择器优先级</title> <style> /* 行内 > id选择器 > 类选择器 > 元素选择器 > 通配选择器 */ #sunxiaochuan { color: blue; } .slogan { color: yellow; } h2 { color: red; } * { color: green; } </style> </head> <body> <h2 id="sunxiaochuan" class="slogan" style="color: blueviolet;">孙笑川</h2> </body> </html><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>选择器优先级</title> <style> /* 权重计算：(a,b,c) */ /* a：ID选择器的个数 b：类、伪类、属性 选择器的个数 c：元素、伪元素 选择器的个数 注：行内样式权重大于所有选择器 !important 的权重大于行内样式，大于所有选择器，权重最高 */ #test { color: purple; } /* (1,0,0) */ #jialidun { color: orange; } /* (0,2,1) 从左到右依次比较大小，当前位胜出后，后面的不再对比 */ .container span.slogan { color: red; } /* (0,1,3) */ div>p>span:nth-child(1) { color: green; } .slogan { color: blue !important; } </style> </head> <body> <div class="container" id="test"> <p> <span id="jialidun" class="slogan">家里蹲大学</span> <span>欢迎新同学</span> </p> </div> </body> </html>
-
复合选择器 1. 交集选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>交集选择器</title> <style> .rich { color: gold; } .beauty { color: red; } /* 交集选择器 */ /* 选中类名为beauty的p元素，这种写法使用频率非常高 */ p.beauty { color: green; } .rich.beauty { color: palevioletred; } /* 后来者居上指的是样式的先后顺序，不是指行内元素所写的先后顺序 */ </style> </head> <body> <h2 class="rich">土豪李四</h2> <h2 class="beauty">明星张三</h2> <h2 class="rich beauty">钻石老五</h2> <hr/> <p class="beauty">小狗旺财</p> <p class="beauty">小猪佩奇</p> </body> </html>2. 并集选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>交集选择器</title> <style> .rich { color: gold; } .beauty { color: red; } /* 交集选择器 */ /* 选中类名为beauty的p元素，这种写法使用频率非常高 */ p.beauty { color: green; } .rich.beauty { color: palevioletred; } /* 后来者居上指的是样式的先后顺序，不是指行内元素所写的先后顺序 */ </style> </head> <body> <h2 class="rich">土豪李四</h2> <h2 class="beauty">明星张三</h2> <h2 class="rich beauty">钻石老五</h2> <hr/> <p class="beauty">小狗旺财</p> <p class="beauty">小猪佩奇</p> </body> </html>3. 后代选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style> ul li { color: red; } ol li { color: green; } ul li a { color: orange; } ol li a { color: gray; } .subject li.yuwen { color: blue; } .subject div.yuwen { color: chocolate; } </style> </head> <body> <ul> <li>抽烟</li> <li>喝酒</li> <li> <a href="#">烫头</a> </li> <!-- <div> <li>踢球</li> </div> --> </ul> <hr/> <ol> <li>张三</li> <li>李四</li> <li> <a href="#">王五</a> </li> </ol> <hr/> <ol class="subject"> <li class="yuwen">语文</li> <div class="yuwen">学科介绍：学好语文</div> <li>数学</li> <li>英语</li> </ol> </body> </html>4. 子代选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>子代选择器</title> <style> /* 只选择儿子 div中的子代a元素 */ div>a { color: red; } div>p>a { color: skyblue; } .foot>a { color: gray; } </style> </head> <body> <div> <a href="#">张三</a> <a href="#">李四</a> <a href="#">王五</a> <p> <a href="#">赵六</a> <div class="foot"> <a href="#">孙七</a> </div> </p> </div> </body> </html>5. 兄弟选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>兄弟选择器</title> <style> /* 相邻兄弟选择器 */ /* 找到跟div紧紧相邻的p元素，兄弟选择器只往下看，不往上看（睡在我下铺的兄弟） */ /* div+p { color: red; } */ /* 通用兄弟选择器 */ /* 选中div后所有的兄弟p元素（睡在我下铺的所有兄弟） */ div~p { color: red; } li+li { color: orange; } </style> </head> <body> <div>语文</div> <p>数学</p> <p>英语</p> <p>物理</p> <hr/> <ul> <li>主页</li> <li>秒杀</li> <li>订单</li> <li>我的</li> </ul> </body> </html>6. 属性选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> /* 1.选中具有title属性的元素 */ /* [title] { color: red; } */ /* 2.选中具有title属性，且属性值为yuwen的元素 */ /* [title="yuwen"] { color: red; } */ /* 3.选中具有title属性，且属性值以字母y开头的元素 */ /* [title^="y"] { color: red; } */ /* 4.选中具有title属性，且属性值以字母n结尾的元素 */ /* [title$="n"] { color: red; } */ /* 3.选中具有title属性，且属性值包含字母n的元素 */ [title*="n"] { color: red; } </style> </head> <body> <div title="yuwen">语文</div> <div title="shuxue">数学</div> <div>英语</div> <div>物理</div> </body> </html>7. 伪类选择器—概念<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_概念</title> <style> /* 伪类：很像类，但不是类（class），是元素特殊状态的一种描述 */ /* 没有访问过的 */ a:link { color: orange; } /* 访问过的 */ a:visited { color: gray; } </style> </head> <body> <a href="https://www.baidu.com">去百度</a> <a href="https://www.jd.com">去京东</a> </body> </html>8. 伪类选择器—动态伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_动态伪类</title> <style> /* 顺序：lvha */ /* 没有访问过的 */ a:link { color: orange; } /* 访问过的 */ a:visited { color: gray; } /* 选中的是鼠标悬浮状态的a元素 */ a:hover { color: skyblue; } /* 选中的是激活状态的a元素 */ a:active { color: green; } span:hover { color: pink; } span:active { color: yellowgreen; } input:focus { color: orange; background-color: green; } </style> </head> <body> <a href="https://www.baidu.com">去百度</a> <a href="https://www.jd.com">去京东</a> <span>孙笑川</span> <br> <input type="text"> <br> <input type="text"> <br> <input type="text"> </body> </html>9. 伪类选择器—结构伪类1<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_结构伪类_1</title> <style> /* 选中的是div的第一个儿子p元素（按照所有子元素计算的，以下同理） 结构1*/ /* div>p:first-child { color: red; } */ /* 选中的是div的第一个儿子p元素 结构2*/ /* div>p:first-child { color: red; } */ /* 选中的是p元素，且p的父亲是谁无所谓，但p必须是其父亲的第一个儿子 结构3*/ /* div p:first-child { color: red; } */ p:first-child { color: red; } </style> </head> <body> <!-- 结构1 --> <!-- <div> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> --> <!-- 结构2 --> <!-- <div> <span>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> --> <!-- 结构3 --> <p>测试一</p> <div> <p>测试二</p> <marquee> <p>测试三</p> <p>张三：98分</p> </marquee> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> </div> </body> </html>10. 伪类选择器—结构伪类2<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_结构伪类_2</title> <style> /* 选中的是div的第一个儿子p元素（按照所有子元素计算的，以下同理） 结构1*/ /* div>p:first-child { color: red; } */ /* 选中的是div的最后一个儿子p元素（按照所有子元素计算的） 结构1 */ /* div>p:last-child { color: red; } */ /* 选中的是div的第n个儿子p元素（按照所有子元素计算的） 结构1 */ /* div>p:nth-child(3) { color: red; } */ /* 选中的是div的偶数个儿子p元素（按照所有子元素计算的） 结构2 */ /* 关于n的值： 1. 0或不写：什么都不选中（几乎不用） 2. n：选中所有的子元素（几乎不用） 3. 1 ~ 正无穷的整数：选中对应序号的子元素 4. 2n或even： 选中序号为偶数的子元素 5. 2n + 1：选中序号为奇数的子元素 6. -n + 3：选中前三个 */ /* div>p:nth-child(2n) { color: red; } */ /* 选中的是div的第一个儿子p元素（按照所有同类型兄弟计算） 结构3 */ /* div>p:first-of-type { color: red; } */ /* 选中的是div的最后一个儿子p元素（按照所有同类型兄弟计算） 结构3 */ /* div>p:last-of-type { color: red; } */ /* 选中的是div的第n个儿子p元素（按照所有同类型兄弟计算） 结构3 */ div>p:nth-of-type(3) { color: red; } </style> </head> <body> <!-- 结构1 --> <!-- <div> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p>孙七：58分</p> <p>老八：48分</p> </div> --> <!-- 结构2 --> <!-- <div> <p>第1个</p> <p>第2个</p> <p>第3个</p> <p>第4个</p> <p>第5个</p> <p>第6个</p> <p>第7个</p> <p>第8个</p> <p>第9个</p> <p>第10个</p> </div> --> <!-- 结构3 --> <div> <span>测试1</span> <p>张三：98分</p> <p>李四：88分</p> <span>测试2</span> <p>王五：78分</p> <p>赵六：68分</p> <span>测试3</span> <p>孙七：58分</p> <span>测试4</span> <p>老八：48分</p> </div> </body> </html>10. 伪类选择器—结构伪类3<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_结构伪类_3</title> <style> /* 选中div中倒数第n个的儿子p元素（按照所有兄弟元素计算） 结构1 */ /* div>p:nth-last-child(3) { color: red; } */ /* 选中div中倒数第n个的儿子p元素（按照所有同类型的兄弟元素计算） 结构1 */ /* div>p:nth-last-of-type(2) { color: red; } */ /* 选中的是没有兄弟的span元素 结构2 */ /* span:only-child { color: red; } */ /* 选中的是没有同类型兄弟的span元素 结构2 */ /* span:only-of-type { color: red; } */ /* 选中的是html根元素 */ /* :root { background-color: gray; } */ /* 选中的是没有内容的div元素（空格也算元素，所以div空标签内不能有空格，不然选不中） */ div:empty { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <!-- 结构1 --> <!-- <div> <span>测试1</span> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p>孙七：58分</p> <p>老八：48分</p> <span>测试2</span> </div> --> <!-- 结构2 --> <!-- <div> <span>测试1</span> </div> <div> <span>测试2</span> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p>孙七：58分</p> <p>老八：48分</p> </div> --> <!-- 结构3 --> <div></div> </body> </html>12. 伪类选择器—否定伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_否定伪类</title> <style> /* 选中的是div的儿子p元素，但是排除类名为fail的元素 */ /* div>p:not(.fail) { color: red; } */ /* 选中的是div的儿子p元素，但是排除title属性值以“不及格”开头的 */ /* div>p:not([title^="不及格"]) { color: red; } */ /* 选中的是div的儿子p元素，但是排除第一个儿子p元素 */ div>p:not(:first-child) { color: red; } </style> </head> <body> <!-- 结构1 --> <div> <p>张三：98分</p> <p>李四：88分</p> <p>王五：78分</p> <p>赵六：68分</p> <p class="fail" title="不及格">孙七：58分</p> <p class="fail" title="不及格">老八：48分</p> </div> </body> </html>13. 伪类选择器—UI伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_UI伪类</title> <style> /* 选中的是勾选的复选框或单选按钮 */ input:checked { width: 100px; height: 100px; } /* 选中的是被禁用的input元素 */ input:disabled { background-color: gray; } /* 选中的是可用的input元素 */ input:enabled { background-color: green; } </style> </head> <body> <input type="checkbox"> <input type="radio" name="gender"> <input type="radio" name="gender"> <input type="text"> <input type="text" disabled> </body> </html>14. 伪类选择器—目标伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_目标伪类</title> <style> div { height: 900px; background-color: lightcyan; } div:target { background-color: green; } </style> </head> <body> <a href="#one">去看第1个</a> <a href="#two">去看第2个</a> <a href="#three">去看第3个</a> <a href="#four">去看第4个</a> <a href="#five">去看第5个</a> <a href="#six">去看第6个</a> <div id="one">第1个</div> <br> <div id="two">第2个</div> <br> <div id="three">第3个</div> <br> <div id="four">第4个</div> <br> <div id="five">第5个</div> <br> <div id="six">第6个</div> </body> </html>15. 伪类选择器—语言伪类<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪类选择器_语言伪类</title> <style> /* 根据指定的语言来选择元素 */ div:lang(en) { color: red; } :lang(zh-CN) { color: green; } </style> </head> <body> <div>语文</div> <div lang="en">数学</div> <p>英语</div> <span>科学</div> </body> </html>16. 伪元素选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style> /* 伪元素：很像元素，但不是元素（element），是元素中的一些特殊位置 */ /* 选中的是div中的第一个文字 */ div::first-letter { color: red; font-size: 16px; } /* 选中的是div中的第一行文字 */ div::first-line { background-color: yellow; } /* 选中的是div中被鼠标选择的文字 */ div::selection { background-color: green; color: red; } /* 选中的是input元素中的提示元素 */ input::placeholder { color: skyblue; } /* 选中的是p元素最开始的位置，随后创建一个子元素（必须配合conten使用） */ p::before { content: "￥"; } p::after { content: ".00"; } </style> </head> <body> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas praesentium dicta, dolorem suscipit dolores amet iusto tenetur in necessitatibus inventore porro veritatis molestias reiciendis iste veniam repellendus at quaerat soluta!</div> <input type="text" placeholder="请输入内容"> <p>199</p> <p>299</p> <p>399</p> </body> </html>
-
基本选择器 1. 通配选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>通配选择器</title> <style> * { color: cadetblue; font-size: 16px; } </style> </head> <body> <h1>将进酒·君不见</h1> <p>【作者】李白 【朝代】唐</p> <pre> 君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。 钟鼓馔玉不足贵，但愿长醉不愿醒。 古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。 </pre> </body> </html>2. 元素选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>元素选择器</title> <style> h1 { color: chocolate; } h4 { color: green; } p { color: red; font-size: 16px; } </style> </head> <body> <h1>将进酒·君不见</h1> <h4>【作者】李白 【朝代】唐</h4> <p>君不见，黄河之水天上来，奔流到海不复回。</p> <p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p> <p>人生得意须尽欢，莫使金樽空对月。</p> <p>天生我材必有用，千金散尽还复来。</p> <p>烹羊宰牛且为乐，会须一饮三百杯。</p> <p>岑夫子，丹丘生，将进酒，杯莫停。</p> <p>与君歌一曲，请君为我倾耳听。</p> <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p> <p>古来圣贤皆寂寞，惟有饮者留其名。</p> <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p> <p>主人何为言少钱，径须沽取对君酌。</p> <p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p> <br/> <h1>静夜思</h1> <h4>【作者】李白 【朝代】唐</h4> <p>床前明月光，疑是地上霜。</p> <p>举头望明月，低头思故乡。</p> </body> </html>3. 类选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>元素选择器</title> <style> /* 选中页面中所有类名为p1的元素 */ .p1 { color: red; } /* 选中页面中所有类名为p2的元素 */ .p2 { color: skyblue; } .p3 { font-size: 20px; } </style> </head> <body> <h1>将进酒·君不见</h1> <h4>【作者】李白 【朝代】唐</h4> <p class="p1">君不见，黄河之水天上来，奔流到海不复回。</p> <p class="p1">君不见，高堂明镜悲白发，朝如青丝暮成雪。</p> <p class="p1">人生得意须尽欢，莫使金樽空对月。</p> <p class="p1">天生我材必有用，千金散尽还复来。</p> <p class="p1">烹羊宰牛且为乐，会须一饮三百杯。</p> <p class="p1">岑夫子，丹丘生，将进酒，杯莫停。</p> <p class="p1">与君歌一曲，请君为我倾耳听。</p> <p class="p1">钟鼓馔玉不足贵，但愿长醉不愿醒。</p> <p class="p1">古来圣贤皆寂寞，惟有饮者留其名。</p> <p class="p1">陈王昔时宴平乐，斗酒十千恣欢谑。</p> <p class="p1">主人何为言少钱，径须沽取对君酌。</p> <p class="p1">五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p> <span class="p1 p3">2023年10月19日22点41分</span> <br/> <h1>静夜思</h1> <h4>【作者】李白 【朝代】唐</h4> <p class="p2">床前明月光，疑是地上霜。</p> <p class="p2">举头望明月，低头思故乡。</p> </body> </html>4. ID选择器<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>ID选择器</title> <style> #title1 { color: red; } #title2 { color: blue; } .title2 { font-size: 16px; } </style> </head> <body> <h1 id="title1">将进酒·君不见</h1> <h4>【作者】李白 【朝代】唐</h4> <p>君不见，黄河之水天上来，奔流到海不复回。</p> <p>君不见，高堂明镜悲白发，朝如青丝暮成雪。</p> <p>人生得意须尽欢，莫使金樽空对月。</p> <p>天生我材必有用，千金散尽还复来。</p> <p>烹羊宰牛且为乐，会须一饮三百杯。</p> <p>岑夫子，丹丘生，将进酒，杯莫停。</p> <p>与君歌一曲，请君为我倾耳听。</p> <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p> <p>古来圣贤皆寂寞，惟有饮者留其名。</p> <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p> <p>主人何为言少钱，径须沽取对君酌。</p> <p>五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p> <br/> <h1 id="title2" class="title2">静夜思</h1> <h4>【作者】李白 【朝代】唐</h4> <p>床前明月光，疑是地上霜。</p> <p>举头望明月，低头思故乡。</p> </body> </html>
-
