css详解

Posted 2020-11-20 helei747123

1、内联式 、嵌入式、外部式

　　三种样式是有优先级：内联式 > 嵌入式 > 外部式

　　但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码

在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优

级是否变化。

其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

 

2、子选择器

　　还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

　　　.food>li{border:1px solid red;}

3、包含(后代)选择器

　　包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码： .first  span{color:red;}

　　请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后

代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

4、通用选择器

　　通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：* {color:red;}