CSS 选择器 （1）

选择器

css语法：选择器{ 一条声明；
一条声明；
…
}

元素选择器

元素选择器：最简单的，所有该元素都受影响。使用语句是： 元素+{ }。

h1 {
	color: red;
}

id选择器

id选择器：是唯一的。在各标签中设置id名然后使用。使用语句是： # id { }。

#part1 {
	color: blue;
}

类选择器

类选择器：可以多个元素使用，所有class的名字相同的都受影响。使用语句是：. class { }。

.part2 {
	color: yellow;
}
.part3 {
	font-size: 300%;
}

通用选择器

通用选择器：所有元素都受影响。使用语句是：* { }。

* {
	text-align: center;
}

分组选择器

分组选择器：可以多个元素使用，每个元素之间用逗号隔开。使用语句是：元素名，元素名，元素名 { }。

h3,h6 {
	font-size: 30px;
}

嵌套选择器

嵌套选择器：指定某一个元素对应的某一个类使用。使用语句是：元素.类{ }:为所有类的p元素指定样式
.类 元素{ }:为所有类元素内的p元素指定样式

p.part4 {
	color: tomato;
}
.part5 q {
	color: yellowgreen;
}

组合选择器

后代选择器(以空格分开)：例：div p{ }
子元素选择器(以大于号分隔)：例：div>p{ }
相邻兄弟选择器(以加号分隔)：例：div+p{ }
普通兄弟选择器(以波浪号分隔)：例：div~p{ }

属性选择器

属性选择器：~=、|=、^=、$=、*=。（attribute表示属性 value表示值）

1. [attribute]设置包含这个属性的样式
2. [attribute~=value]属性中包含独立的单词value
3. [attribute|=value]属性中必须是完整且唯一的单词
4. [attribute^=value]属性的前几个字母是value就可以
5. [attribute$=value]属性的后几个字母是value就可以
6. [attribute*=value]属性中做字符串拆分只要有value就可以

/*所有具有alt的属性都受影响*/
[alt] {
	border-style: dotted;
	border-color: tomato;
}

css伪类

伪类：使用语句：元素.类：伪类/伪元素 { }

例：a:link中的：link一样的很多。
q:lang(no){
/改变引号，引号里面的可以随便修改/
quotes: “~” “~”;
}

/*未访问*/
a:link{
	color: black;
}
/*已访问*/
a:visited{
	color: skyblue;
}
/*鼠标移动到链接*/
a:hover{
	color: yellow;
}
/*鼠标点击链接*/
a:active{
	color: red;
}

通过content可以设置在链接后面添加链接

a:after {
	content: "("attr(href)")";
}