选择器
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表示值)
- [attribute]设置包含这个属性的样式
- [attribute~=value]属性中包含独立的单词value
- [attribute|=value]属性中必须是完整且唯一的单词
- [attribute^=value]属性的前几个字母是value就可以
- [attribute$=value]属性的后几个字母是value就可以
- [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)")";
}