CSSday02 选择器

当我们要给元素设置属性时，我们可以使用css元素，css要选中标签可以使用选择器

css的样式规则：选择器{属性1：属性值；属性2：属性值；....}

下面演示代码会用到，解释一下： width是设置元素的宽度、height是设置元素的高度、background-color是设置背景色、margin是设置元素之间的距离

标签选择器：直接选中标签名，但是会选中文档中所有相同标签名，一般是拿来取消标签默认属性

代码展示：

浏览器效果展示：

 

类名选择器：在标签中设置class属性，属性值是自己取的类名，不用使用关键字（可网上搜）、纯数字、除"-"和"_"以外的特殊字符、并且严格区分大小写，一般采用小写字母、开头第一个不能是数字，用了不符合规范，选择器选中类名时前面要加一个".",class属性中可以有多个属性值，也就是说一个标签中可以class="类名1 类名2 类名3..."，不同类名之间要用空格隔开，可以用于设置相同的属性，就不用每个类名都写一下

 代码展示：

多个类名的代码： 

 

浏览器效果（以上两段代码结果是一样的）：

 

id选择器：在标签中设置id属性，属性值和class一样自己取，规范也一样，css选中id的时前面要加"#"，一个标签中id属性的值只能有一个

代码展示：

 

浏览器效果：

 

以上三个选择器的优先级为：id选择器>class选择器>标签选择器，如果用数字比较的话，那id就是100，class就是10，标签选择器就是1.

并集选择器：当多个标签要使用相同的属性时，为了减少代码，节省数据，可以用并集选择器，具体格式为：选择器，选择器，选择器,....{属性1：属性值，属性2：属性值，....}，不同选择器之间要用逗号隔开

代码展示：

 

浏览器效果：

 

组合选择器（交集选择器）：设置相同类名下不同的标签，可以用组合选择器， 具体格式为：标签+选择器{属性1：属性值，属性2：属性值，....},class选择器选择器之间要用"."连接，id选择器要用"#"连接

代码展示：

 

浏览器效果：

 

后代选择器：当想选中一个元素的后代（就是包裹在这个元素里的元素），可以使用后代选择器，具体格式为：选择器  选择器...{属性1：属性值，属性2：属性值，....},两个选择器之间有一个空格 

代码展示：

 

浏览器效果：

 

直接子代选择器：当元素有很多子元素，想直接选中某个子元素时，可以使用直接子代选择器,具体格式为   父元素选择器>子元素选择器{属性1：属性值，属性2：属性值，....}，两个选择器之间要用">"连接

代码展示：

 

浏览器效果：

 

通配符选择器：通配符选择器可以选中页面所有元素，格式为：*{属性1：属性值，属性2：属性值，......}，前面就应该星号"*"，在实际开发中不建议使用，比较难调样式，而且会降低代码执行速度

代码展示：

 

浏览器效果（页面这么红是因为通配符选择器选中了body标签，给它设置了背景色，其他元素能出现是因为类名选择器的优先级比通配符选择器的优先级高，所以才能出现） 

 

伪类选择器：伪类选择器能对元素进行一些简易操作，格式为：选择器：伪类{属性1：属性值，属性2：属性值，....},伪类是开发者已经定义好的，我们不能设置，只能直接用

代码展示：

 

 

浏览器效果：

 

属性选择器：通过属性名文本来选择元素 ，格式较多直接看代码

代码展示（不止可以选择类名，也可以用其他选择器）：

 

浏览器效果：

 

选择器大部分都在这里，还有一个关键字important，将它加在样式属性后面，这个样式属性就是最高级，且用代码无法覆盖

代码展示：

 

 

浏览器效果：

  

关于并集选择器、组合选择器等选择器优先级计算可以用前面说的100、10、1 ，这些选择器都是由标签选择器（1）、类名选择器（10）、id选择器构成（100），看到类名就加10，id加100，标签加1，谁加起来大谁的优先级就高，其他选择器的大部分都可以这么算