基本的选择器
<style type="text/css"> /*通配符选择器*/ * { margin: 0; padding: 0; border: none; } /*元素选择器*/ body { background: #eee; } /*类选择器*/ .list { list-style: square; } /*ID选择器*/ #list { 500px; margin: 0 auto; } /*后代选择器*/ .list li { margin-top: 10px; background: #abcdef; } /*选择器分组*/ #list,.second{background: pink;} </style>
子元素选择器
#wrap > .inner
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子元素选择器</title> <!--我们也可以称它为直接后代选择器--> <style type="text/css"> #wrap > .inner { /*color: pink;*/ border: 1px solid; } </style> </head> <body> <div id="wrap"> <div class="inner"> wrap下一层 <div class="inner"> 最里层</div> </div> <div class="inner">wrap下一层</div> <div class="inner">wrap下一层</div> <div class="inner">wrap下一层</div> </div> </body>
相邻兄弟选择器 ：
这被称为一个相邻兄弟选择器. 它只会匹配紧跟着的兄弟元素
紧跟！！！！
#wrap > #first + .inner
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相邻兄弟选择器</title> <!-- 这被称为一个相邻兄弟选择器. 它只会匹配紧跟着的兄弟元素 紧跟！！！！ --> <style type="text/css"> #wrap > #first + .inner { color: #f00; } </style> </head> <body> <div id="wrap"> <div class="inner">inner</div> <div id="first">first</div> <div></div> <div class="inner">inner</div> <div class="inner">inner</div> <div class="inner">inner</div> <div class="inner">inner</div> </div> </body> </html>
通用兄弟选择器：
在使用 ~ 连接两个元素时,它会匹配第二个元素,
条件是
它必须跟(不一定是紧跟)在第一个元素之后,
且他们都有一个共同的父元素
#wrap #first ~ div
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用兄弟选择器</title> <!-- 在使用 ~ 连接两个元素时,它会匹配第二个元素, 条件是 它必须跟(不一定是紧跟)在第一个元素之后, 且他们都有一个共同的父元素 --> <style type="text/css"> #wrap #first ~ div { border: 1px solid; /*color: pink;*/ } </style> </head> <body> <div id="wrap"> <div id="first">first</div> <p></p> <div class="inner">inner <div>inner2</div></div> <div class="inner">inner</div> <div class="inner">inner</div> <div class="inner">inner</div> </div> </body> </html>
选择器分组：以，隔开
h1,h2,h3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器分组</title> <style type="text/css"> h1,h2,h3{ color: pink; } </style> </head> <body> <div> <h1>我是h1</h1> <h2>我是h2</h2> <h3>我是h3</h3> </div> </body> </html>