码迷,mamicode.com
首页 > Web开发 > 详细

css详解

时间:2018-06-26 18:34:55      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:功能   bsp   regular   style   pre   pad   级别   优先   type   

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;}






  

css详解

标签:功能   bsp   regular   style   pre   pad   级别   优先   type   

原文地址:https://www.cnblogs.com/helei747123/p/9230480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!