CSS选择器

通配符

适用于整个页面所有元素的样式,一般用作定义内外边距归零,定义方式:

*{
	padding:0;
	margin:0;
}

元素选择器

给标签元素定义样式,如p,b,span,i,strong等
定义方式:

p{...}

id选择器

给id定义样式,注意id选择器不能结合使用
定义方式:

#id{...}

类选择器

给类定义样式
定义方式:

.className{...}
//当某标签类名比较多时,在开发工具中可以通过索引方式查找类名,
//例如很多div都有类名,记不住时可以这样查找:
div.className{...}

多类选择器

可以同时引用多个类的效果

.p1{...}
.p2{...}
//如果我想同时使用p1和p2的样式,可以这样:
<p class="p1 p2">
//也可以新定义一个类,继承p1和p2的效果,还能新增自己的样式:
.p1.p2{...}
//引用方式同上

后代选择器

多个标签嵌套使用时,给里面的元素定义样式

<p><strong><i>...</i></strong></p>
//给i标签添加样式:
p strong i{...}
//可以隔代选择:
p i{...}

子元素选择器

同样多个标签嵌套使用,给里面的元素定义样式,还用上例

//注意这里不能隔代选择
p>strong>i{...}

相邻兄弟选择器

适用情况:
1.选择紧接在另一个元素后的元素
2.且二者有相同的父级元素
例:

<ul>
	<li id="1"></li>
	<li id="2"></li>
	<li id="3"></li>
</ul>
<ol>
	<li id="4"></li>
	<li id="5"></li>
	<li id="6"></li>
</ol>
li li{...}
//注意第一个元素不起作用,从第二个以后才有效果,且必须相同父元素下.
//上例中的li标签分别是ul和ol的子元素,所以要分开看,生效的有2,3和5,6

属性选择器

属性选择器在style中定义,可以为已有属性添加样式,也可以自定义属性的名称,可以自定义属性的值及其对应的更细致的格式
定义格式:[title]{…}

//给所有添加了href属性的标签定义样式:
[href]{...}
//还可以自定义属性,并给其样式
[abc]{...}
//还可以定义属性的值,及其对应的样式
[abc="1"]{...}
//模糊定义属性的值,只要值中包含hello单词,就有其样式效果
[abc~="hello"]{...}

样式优先级

!important>id选择器>类选择器(后声明)>类选择器(先声明)
内联样式>内部样式表>外部样式表

//improtant的格式:
color: red !important;