前端一HTML:十一:其他选择器
生活随笔
收集整理的這篇文章主要介紹了
前端一HTML:十一:其他选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.通配符選擇器:作用域頁面上的所有標簽
<style type="text/css">*{屬性名1 : 屬性值1屬性名2 : 屬性值2...} </style>?通配符選擇器在進行選擇的時候,會去遍歷頁面上的所有標簽，并且給這些標簽設置對應的屬性。這樣一來，性能就比較低。
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{color:blue;}</style> </head> <body><span>java</span><p>python</p><div>javascript</div> </body> </html>?
2.后代選擇器: 選擇一個標簽中所有后代標簽里滿足條件的標簽
?
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.book p{color: blue} /* 后代選擇器 */.book .history p{ /* 去book標簽下找history標簽,再找history下面所有的p標簽 */color: red} </style> </head> <body><div class="book"><p>歷史類書籍</p><div class="history"><p>史記</p><p>資治通鑒</p></div><p>哲學類書籍</p><p>教育類書籍</p></div><p>電影</p> </body> </html>?
3.子元素選擇器: 得到當前標簽中的直接子元素(直接放在標簽下面沒有經過任何標簽的嵌套)
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.book> p{color: blue} /* 子元素選擇器 */</style> </head> <body><div class="book"><p>歷史類書籍</p><div class="history"><p>史記</p><p>資治通鑒</p></div><p>哲學類書籍</p><p>教育類書籍</p></div><p>電影</p> </body> </html>4.并集選擇器
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">.history p, .novel p {color: blue} /* 并集選擇器 */</style> </head> <body><div class="book"><p>歷史類書籍</p><div class="history"><p>史記</p><p>資治通鑒</p></div><div class="novel"><p>三國演義</p><p>紅樓夢</p></div><p>哲學類書籍</p><p>教育類書籍</p></div><p class="novell">電影</p> </body> </html>5.交集選擇器:從兩個集合中選擇它們相同的部分
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">p.history{ /*找到既是p標簽，又是history的標簽*/color: blue} /* 交集選擇器 */</style> </head> <body><div class="novel"><p class="history">三國演義</p><p class="history">紅樓夢</p><p>三體</p><p>麥田里的守望者</p></div><p class="history">水滸傳</p> </body> </html>?
總結
以上是生活随笔為你收集整理的前端一HTML:十一:其他选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一点感触
- 下一篇： xmlWriter以UTF-8格式写xm