css-选择器使用详解

选择器

通配符

*选择所有元素

id选择器

//例子
<h1 id="xx">h1标题</h1>
//用法
#id{color = red;}

id因为是唯一的所有直接用#号即可定位

class选择器

//例子
<h1 class="xx">h1标题</h1>
//用法
.xx{color = red;}

用.来定位class选择器

type选择器

//例子
<h1 class="xx">h1标题</h1>
//用法
h1{color = red;}

h1标签都将使用此css

上下文选择器

例子

//例子
<ul>
        <li>圣手昆仑侠胜英</li>
        <li>震三山萧杰</li>
        <li>九头狮子孟凯</li>
        <li>今古圣人艾连池</li>
        <ol>
            <li>镇三山辖五岳赶浪无丝鬼见愁</li>
            <li>万里桃花小帅才韩秀</li>
            <li>金钟罩铁布衫贾明</li>
        </ol>
 </ul>

某类型的所有子元素

ul li {color:fuchsia;}

某类型的子元素(只有子,不包含子之后的)

ul > li{color:red};

某类型的孙元素(不包含子,孙以后的(包括孙))

ul *li{color:red};

伪类选择器

ul li:firstchild{color:red;} //只选择第一个元素
ul li:nth-child(2){color:red;}//只选择第二个元素
ul li:nth-child(2n+1){color:red;} // 只选择奇数行

ui选择器

h1:: first-letter{color:red;} 第一个字符
p::first-line{color:red;}第一行
h1::before{content:"--"; color: red;} //一个冒号代表css1css2有的伪元素,两个冒号代表css3新增的伪元素