前端入门（第五天）

css的选择器

全局选择器

可以匹配任何元素，但其优先级最低，一般做样式初始化

（注:全局选择器比任何选择器的优先权都低，也就是你有写其他选择器，全局选择器马上失效）

代码:

*{

     color:red；

     font-size:50px；

}

（通俗来讲就是可以把全部标签统一样式）

 

元素选择器

HTML文档中的元素，p，b，div，a，img等

简单来说就是能用标签包裹标签来美化某一些文字

例如:

span{

      color:red；

}（此段放在css文件里或者style标签放到head里）

<p>学完了<span>前端</span>，继续学习其他语言</p>

 

（注:所有标签都可以是选择器；无论标签嵌套多少标签，一定都会被选择上；且全部都会变化）

 

类选择器

规定用圆点"."来定义，针对你想要的所有标签使用

也就是规定选择器来制定样式

例如:

.one{

     color:red；

}

 

<p>我醉了</p>

<p class="one">我醒了</p>

<p>我困了</p>

<p class="one">我累了</p>

 

类选择器是在class当中定义，定义一个名字

然后当成标签使用，只是在前面加个"."(如上)

有定义的(上面的我醒了和我累了)会根据标签修改样式而修改，未被定义的（上面的我醉了和我困了）不会发生变化

类选择器class特点:

1.可在多种标签中使用

2.类名不能以数字开头

3.同一个标签可以使用多个类选择器。用空格隔开。（注:不可以额外写一个class，只能在引号也就是类名中用空格隔开）

 

ID选择器

针对某个特定标签使用，只能使用一次。css中的ID选择器用#来定义

例如:

#one{

      color:red；

     font-size:40px；

}

 

<p>我乏了</p>

<p id="one">我无语了</p>

 

ID选择器是在id当中定义，定义一个名字

然后当成标签使用，只是在前面加个"#"(如上)

有定义的(上面的我无语了)会根据标签修改样式而修改，未被定义的（上面的我乏了）不会发生变化

ID选择器特点:

1.ID是唯一的（也就是只能写一个，不能重复）

2.ID名不能以数字开头

 

合并选择器

其实就是把元素选择器合并，前提两个选择器所需要的样式相同

例如:

p,h1{

      color:red；

     font-size:40px；

}

 

<p>哈哈哈哈</p>

<h1>呜呜呜呜</h1>

 

这样p跟h1都生效

合并选择器的作用:使代码更简洁

 

选择器优先级:

行内样式>ID选择器>类选择器>元素选择器

 

如果选择器相同，那后者会覆盖前者。