web前端之css基础

CSS选择器

元素选择器

p{color:red;}

ID选择器

#li{
background-color:red;
}

类选择器

.c1{
font-size:15px;
}

注意：

样式类名不要用数字开头（有的浏览器不认）

标签中的class属性如果有多个，要用空格隔开。

通用选择器：

*{
color:red;
}

组合选择器

后代选择器

/*li内部的标签设置字体颜色*/
li a{
color:red;
}

儿子选择器

/*选择所有父级是<div>元素的<p>元素*/
div>p{
font-family:"Arial Black,arial-black,cursive";
}

毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p{
margin:15px;
color:red;
}

弟弟选择器

/*li后面所有的兄弟P标签*/
#li~p{
border:2px solid royalblue;
}

　                                                   属性选择器

/*用于选取带有指定属性的元素*/
p[title]{
color;red
}
/*用于选取带有指定属性和值的元素*/
p[title="123"]{
color:green;
}

不怎么常用的属性选择器

/*找到所有title属性以hello开头的元素*/
[title^="hello"]{
color:red;
}
 
/*找到所有title属性以hello结束的元素*/[title$="hello"]{color:red;}
 
/*找到所有title属性中包含（字符串包含）hello的元素*/[title*=“hello”]{color:red；}/*找到所有title属性以hello结尾的元素*/[title*="hello"]{color:red;}
 
/*找到所有title属性（有多个值或值以空格分隔）中有一个值为hello的元素*/[title~="hello"]{color:red;}

　                                                            分组和嵌套

分组

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过多个选择器之间使用逗号分组选择器来统一设置元素样式。

例如：

div,p{
color:red;
}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰：

div，
p{
color:red;
}

嵌套

多种选择器可以混合起来使用，比如：c1类内部所有p标签设置字体颜色为红色。

.c1 p{
color:red;
}

　                                                         伪类选择器

/*未访问的链接*/
a:link{
color:red;
}
 
/*已访问的链接*/
a:visited{
color:blue;
}
 
/*把鼠标移动到链接上*/
a:hover{
color:green;
}
 
/*选定的链接*/
a:active{
color:black;
}
 
/*input输入框获取焦点时样式*/
input:focus{
outline:none;
backgroune-color:#eee;
}

　　                                                 伪元素选择器

first-letter

常用的给首字母设置特殊样式：

p:first-letter{
font-size:50px;
color:red;
}

before

/*在每一个<p>元素之前插入内容*/
p:before{
content:"*"
color:red:
}

after

/*在每个<p>元素之后插入内容*/
p:after{
content:"[?]";
color:blue;
}

　before和after多数用来清除浮动。

选择器的优先级

css继承

继承是css的一个特征，它是依赖于祖先~后代的关系的。继承是一种机制它允许不仅可以应用于某个特定的元素。还可以应用于它的后代。例如一个body定义了的字体颜色也会应用到段落的文本中。

body{
color:red;
}

此时页面上所有标签都会继承body的字体颜色。然而caa继承的权重是非常低的，是比普通的权重还要低的0。我们只要给对应的标签设置字体颜色就可以覆盖它继承的样式。

p{
color:green;
}