CSS选择器集合

基本选择器

1.ID选择器

#box{background-color:red;}

2.类选择器

.box{background-color:red;}

3.元素选择器

div{color:red;}

4.通配符选择器

*{margin:0;padding:0;}

5.分组选择器

可以同时选择多个选择器

h1,h2,h3,h4{color:red;}

基本选择器扩展

1.后代选择器

选择指定父元素的后代元素

.list li {
    margin-top:10px; 
    background:#333; 
    }

2.子元素选择器

也可称为直接后代选择器，此类选择器只能匹配到直接后代，不能匹配深层后代

#wrap > .inner {color:#333;}

3.相邻兄弟选择器

它只会匹配紧跟的兄弟元素

div + p{color:#333;}

4.通用兄弟选择器

它会匹配所有的兄弟元素(不需要紧跟)

div ~ p{
    border:1px solod;
    }

属性选择器

方法1：[属性名] 选取含有指定属性名的元素

p[title]{
    background-color:yellow;
    }

方法2：[属性名=“属性值”] 选取含有指定属性值的元素

p[title="hello"] { 
    background-color:red; 
    }

方法3: [属性名^=“属性值”] 选取属性值以指定内容开头的元素

p[title^="he"]{ 
    background-color:red; 
    }

方法4：[属性名$="属性值"] 选取属性值以指定内容结尾的元素

p[title$="o"]{ 
    background-color:red; 
    }

方法5：[属性名*="属性值"] 选取属性值包含指定内容的元素

p[title*="o"]{ 
    background-color:red; 
    }

伪类选择器

a 链接的伪类

a:link 正常连接

a:visited 访问过的链接

a:hover 鼠标划过的链接

a:active 正在点击的链接

first

p:first-line {background-color:yellow;}

为P中的第一行设置一个背景颜色为黄色

p:first-letter{color:red;}

为P中的第一个字符设置样式

伪元素

:before

表示元素最前面 一般需要结合content这个样式一起使用

例子：p:before{content:“我会出现在段落的最前面”；}

:after

表示元素最后面 一般需要结合content这个样式一起使用

例子：p:after{content:“我会出现在段落的最后面”；}

子元素的伪类选择器

选择第一子标签 :first-child

p:first-child{color:red;}

选择最后一个标签 :last-child

p:last-child{color:red;}

选择指定位置的子元素:nth-child

p:nth-child(1){color:red;}

选择偶数

p:nth-child(even){color:red;}

选择奇数

p:nth-child(odd){color:red;}

选择指定类型的子元素

:first-of-type 
:last-of-type 
:nth-of-type

否定伪类选择器

可以从已经选择的元素中剔除某些元素

:not(选择器){} 
p:not(.box){}

优先级的规则

内联样式     优先级 1000 
id选择器     优先级100 
类和伪类     优先级10 
元素选择器   优先级1 
通配 *      优先级0 
继承的样式   没有优先级