CSS-选择器用法简介（菜鸟版）

目录

一、CSS简介

二、CSS书写位置

三、常用选择器

四、复合选择器

五、关系选择器

 六、属性选择器

 七、伪类选择器

 八、a元素的伪类

九、伪元素选择器

十、选择器的权重    

---

一、CSS简介

1、 网页分成三个部分

结构 20个左右标签，先用一段时间

表现 外在显示的样子

行为

2、css -层叠样式表

-网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式

而最终我们能看到的只有最上边的一层

-设置网页中元素的样式

二、CSS书写位置

第一种方式：内联样式/行内样式

写在开始标签里，写一个style属性，在style属性值里面写样式

样式分为 样式名:样式值; 名值对的结构

可以写多组样式，以;隔开即可

缺点：

1、结构和样式耦合

2、不容易修改

第二种方式：内部样式表

在head标签中，写一个style标签，在style里先选中对应的元素，然后设置样式

可以多组样式，以;隔开即可,最后一个样式，可以不写;，但我们一般都写

缺点：

1、不方便复用

三、常用选择器

1、元素选择器

         作用：选中对应的标签

         语法：标签名{}

         例如：h1{},h3{},p{}

2、id选择器  

        作用：选中对应的id属性值的内容,id属性值不能复用

        语法：#id属性值{}

3、class选择器

       作用：选中对应的class属性值的内容，可以复用属性值

       语法：.class属性值{}

 4、通配选择器

         语法：*{}

四、复合选择器

      1、交集选择器

              作用：选中符合多个选择器条件的内容

              语法：选择器1选择器2选择器3···{}

              例如：div.red{},#div2.red{}

       注意：如果选择器中有元素选择器，必须把元素选择器放在前面

      2、并集选择器

                作用：同时选中符合多个选择器对应的内容