css选择器----看完再也不用担心选择器问题了

css选择器

元素选择器

1.通配符选择器*
通配符选择器用来匹配到所有的元素
一般用法:用来清除元素默认的内外边距，使得样式统一

* {
		padding:0;
		margin:0;
}

2. 标签选择器
标签选择器就是用来匹配到相对应的html标签
比如：选中所有标签为p的元素，把其文字的样式修改为粉色pink

p {
	color：pink;
}

3.类选择器
选中类名为指定类名的所有元素
比如：选中类名为box的元素，将其背景色修改为pink

.box {
		background-color:pink;       /*注意其写法为   .类名*/
}

4. id 选择器
选中id名为指定id名的元素，其中idzhi3就和人的身份证号码一样，都是唯一的，不能重复
比如：选中id值为tags的元素，将其字体颜色修改为pink

#tags {
		color:pink;   /* 注意id选择器的用法为   #id值     要和类选择器的.进行区分*/
}

关系选择器

1.包含选择器
使用空格分隔元素名称，选择元素内部的元素（不论是子元素还是孙子元素）
比如：选择div里面所有p元素，将其里面的字体设置为pink

div p {
		color:pink;
}

2.子选择器
使用 > 分隔元素名称，选择元素内部的第一层元素（仅选择子元素）
比如：选择div里面的第一层p元素（子元素），将其里面的字体设置为pink

div >  p {
		color:pink;
}

3.相邻选择器
使用 + 分隔元素名称，选择第一个元素之后紧跟的那一个元素，两者是并列的关系
比如：选择div下面的第一个p元素，将其字体颜色设置为pink

	div + p {
			color:pink;
	}

4.兄弟选择器
使用 ~ 分隔元素名称，选择ele1之后的全部ele2,注意两者是并列关系，并且拥有同一个父元素，ele2不一定需要紧跟在ele1后面
比如：选择div的兄弟元素p，并将其字体颜色设置为pink

		div ~ p {
			color:pink;
		}

属性选择器

1.选择带有指定属性的选择器[attr]
比如：选择带有name属性的input框,将其背景色改为pink

input[name] {
	background:pink
}

2.选择带有指定属性和值的选择器[type=value]
比如：选择出所有type=radio的input框,将其背景色修改为pink

	input[type=radio] {
		background:pink;
	}

3.选择属性值中包含指定单词的元素[type~=value]
比如：选择出所有类名带有yellow的div，并将其背景色修改为yellow

	div[class~=yellow] {
		background:yellow;
	}

4.选择属性值中带有指定值开头的元素[type^=first]
比如：选择出所有类名以first开头的div，并将其背景色设置为pink

	div[class^=first] {
		background:pink;
}

5.玄色属性值中带有

伪类选择器

伪对象选择器