搜索到
1
篇与
的结果
-
复合选择器 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>
