今天完成的事情：

巩固css选择器，规范写法，内容有点多，多用多熟悉

8-2

·css选择器

·标签选择器：根据指定标签的名称，在当前界面找到所有该标签，设置属性

-格式  p {

}

·id选择器：根据指定的id名称找到对应的标签，然后设置属性,id不可重复，id前要加#，id名称不能以数字开头。Id不要常用，前端开发中一般留给js使用

-格式  #lue{

Color:red;

}

<p id=”lue”>nihao</p>

·类选择器：根据指定的类名找到对应类名的标签，然后设置属性。类名称前面加.

-格式  .lue{

Color：red;

}

<p class=”lue”>nihao</p>

-html中每个标签可以同时绑定多个类名,class=”类名1 类名2”

格式： <p class=”pa1 pa2”>nihao</p>

·id和class的区别

-id不可重复，class可重复。一个标签只有一个id，可以有多个class。Id选择器以#开头，class以.开头。Id一般给js使用。

巧用class，有时可以将一些公共代码抽取到一个类选择器中，然后让标签和这个类选择器绑定即可。

·后代选择器：找到指定标签的后代标签，设置属性。标签名称必须用空格隔开。用标签的id和class也可以操作。

-后代：p标签就是div的后代

<div>

<p></p>

</div>

-格式： 标签名称1 标签名称2{

属性：值；；

}

Div p {

Color:red;

}

·子元素选择器：找到指定标签中的所有特定的直接子元素，然后设置属性。只会查找直接的子元素，不会找到其他被嵌套的相同标签。用标签的id和class也可以操作。

- 标签名称1>标签名称2{

}

·后代选择器和子元素选择器关系

-区别：后代选择器用空格链接，子元素选择器用>链接。后代选择器会选中指定标签中的特定标签都会被选中，子元素选择器只会选择指定标签中的特定直接子标签。

-共同点：都可以使用id或者类名称来作为选择器。都可以通过各自的链接符号一直选择下去。

·交集选择器：给所有选择器选中的标签中，相交的那部分标签设置属性。标签中没有空格，选择器可以使用标签名称/id/class来操作

-选择器1选择器2{

属性：值；

}

·并集选择器：给所有选择器选中的标签设置属性。选择器间用，链接，也可以用id/class来操作

-选择器1，选择器2{

属性：值；

}

·兄弟选择器：相邻兄弟选择器/通用兄弟选择器  同级别内

-相邻：  选择器1+选择器2{}

用+相连，只能选中紧跟其后的标签

-通用： 选择器1`选择器2{}

用`相连，给制定选择器后面的所有选择器选中的所有标签设置属性

·序选择器：css3中新增的选择器最具代表性的选择器，可以指定选中 同级别中的第几个，同类型的第几个  w3c中查看

·属性选择器：根据特定属性名称/属性取值找到指定标签，然后设置属性，总共七种，w3c中可以查询到

- 标签名称[attribute]{

属性：值；

}

 标签名称[attribute=value]{

属性：值；

}

·通配符选择器：给当前页面所有标签设置属性。由于通配符选择器设置之前会遍历所有的变迁，如果当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会用通配符选择器。

- *{

}

明天计划的事情：

学一下别人的切图，上次做任务三切图瞎切的

遇到的问题：

内容太多，需要在实践中多练习

收获：

梳理了一下相关选择器的知识