Css的选择器与定位问题

Css的选择器与定位问题

 

  很多时候我都会问自己:每天早上叫醒你的是闹钟还是梦想?更多的时候我回答:是闹钟。那么,你呢?

  对于我自己来讲,我总结了自己在css层叠样式中容易混淆的地方。首先是对于定位position这个属性。他有四个值:static(静态定位);fixed(固定定位);absolute(绝对定位);relative(相对定位)。 static是按正常方式定位;fixed,absolute都会脱离正常文档流。那么什么又是正常文档流呢:文本元素从上到下,从左到右依次排列,块级元素从上到下一次排列,内嵌元素从左到右一次排列,这就是正常文档流 。脱离正常文档流就是指元素不再按它原来的排列顺序排布,就像是float(浮动),它会对其周围元素的布局产生一定影响,而与float不同的是:fixed会把某个样式固定在你所定的位置,不会随页面的上下或左右移动而改变,而absolute是相对于它的父级定位,它会一直寻找有position的元素,如果没有,它会相对于body定位且会浮到元素的最上层;relative是相对于它自己的位置定位。Float(浮动)是把元素浮起来,它也会脱离正常文档流,所以在使用时要注意清除浮动,以下是浮动的几个基本行为:

  1. 当float不等于none引起元素浮动时,元素将被视为块级(block-level),等于设置display:block;
  2. 当浮动一个文本类型元素时,必须制定该元素的width(宽度)属性。如果不设置宽度,元素内容就会折叠到最小宽度。
  3. 浮动元素停留到包含它的父级元素的内容区域内,不会穿过padding区域。
  4. 浮动元素的margin是不会重合的。

在css中有三种隐藏方式:overflow:hidden;display:none;visibility:hidden;其实这三种用法用起来也很简单,只是要注意overflow要占位,二display不占位,visibility一般用在清除浮动中。

  现在再给大家讲讲选择器的权重选择器问题,这个问题很多人都遇到过,有时一个标签中有许多子标签,当你给父级设置了属性,又给子级元素设置了属性,但你发现无效,这就是选择器的权重问题了。我们知道选择器有四类:内联优先集最高,然后是id选择器,接下来是类、伪类、属性选择器、最后才是元素、伪元素选择器。假如用a、b、c、d来表示他们的,那么


权重值


a


b


c


d


内联


1


0


0


0


Id


0


1


0


0


类、伪类、属性选择器


0


0


1


0


元素、伪元素


0


0


0


1

  下面为大家举一些例子:

  1 * {}     /* a=0 b=0 c=0 d=0 -> 优先级= 0,0,0,0 */

    2 li {}     /* a=0 b=0 c=0 d=1 -> 优先级 = 0,0,0,1 */

  3 li:first-line {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */

    4 ul li {}     /* a=0 b=0 c=0 d=2 -> 优先级 = 0,0,0,2 */

       5 ul ol+li {}     /* a=0 b=0 c=0 d=3 -> 优先级 = 0,0,0,3 */

6 h1 + *[rel=up]{}     /* a=0 b=0 c=1 d=1 -> 优先级 = 0,0,1,1 */

  7 ul ol li.red {}     /* a=0 b=0 c=1 d=3 -> 优先级 = 0,0,1,3 */

   8 li.red.level {}     /* a=0 b=0 c=2 d=1 -> 优先级 = 0,0,2,1 */

    9 #x34y {}     /* a=0 b=1 c=0 d=0 -> 优先级 = 0,1,0,0 */

10 style=""     /* a=1 b=0 c=0 d=0 -> 优先级 = 1,0,0,0 *

  了解这些,你就不会再为权重的选择二犯愁了,因为a,b,c,d只是在各自位置数字的累加,而不会越级。在这上面,其实还漏掉了一项,那就是!important,important可以让所有的权重值变得可笑,因为css属性值添加了important后,前面所有的努力白费了,行内式的权重也高不过它,除非再声明一个加important的属性值来覆盖它(注意是由css属性值读取的顺序决定的)。

比如h1{height:100px !important;}要覆盖这个height值为200px的话,要在其后加上h1{height:200px !important;}

时间: 2024-10-14 10:05:44

Css的选择器与定位问题的相关文章

CSS属性选择器

属性选择器 1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="./css/属性选择器.css&qu

CSS系列(7)CSS类选择器Class详解

这一篇文章,以笔记形式写. 1,  CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1)    使用类选择器的前提是给标签添加上类属性,比如<p class="important"></p> (2)    类选择器的语法为:*.important {color:red;},不过一般省略前面的通配符选择器,写成 .important {color:red;},这样就会给所

浅谈css中选择器的优先级

学习web前端,主要学习的课程html5,css,js,ajax等一些基本的编程语言,当然这是一门高深的学问.而这篇文章主要是谈谈我对css中选择器优先级的一些简单的理解与看法,希望对您的学习提供一些帮助.好了,废话不多说了,让我们开始进入主题吧. css中文解释是“层叠式样式表”,在这里我要说一下,所谓层叠样式表的意思就是说我们可以给一个标签或者文本内容同时添加许多种样式,简单点说就是可以通过多种方式去支配同一个东西.那么就会出现这样的问题了——选择优先级的问题.就是谁的属性能起到控制的最终目

css类选择器

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="K

css标签选择器

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="K

CSS系列(8) CSS后代选择器和子选择器详解

一.CSS后代选择器详解 1,  生动介绍基本概念 一个标签嵌B在另一个标签A内部,B就是A的后代. 而且,B的后代也是A的后代,这就叫“子子孙孙无穷尽也”. 比如: <div> <p>这个p标签是div的后代</p> <div> 后代选择器就是用来选择一个标签的后代的: 两个选择器中间添加一个[空格]就构成了后代选择器,空格后面的那个是后代. 例如: div p { color : red; } 它会选择一堆的p标签,只要这个p标签是嵌套在某个div标签内

css以及选择器基础

CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px:margin-right:10px"></p><标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>内部样式表(位于 <head> 标签内部)<style type=&

css 元素选择器实例

一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式.本文章向码农介绍css 标签/元素选择器以及其实例,需要的码农可以参考一下. [标签选择器] 一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能出于不同的位置,但是不管怎么样,你总是穿着同一套衣服,这件衣服就是由标签选择器事先给你限定好的,不管走到哪里都是这身衣服)比如,在style.css文件中对p标签样式的声明如下: p{ fon

CSS同时选择器

[CSS同时选择器] 同一个div拥有多个class时,我们可以作多个class作为组合来选择对象.方法就是将多个.className直接连接在一起(中间不能有空格). <p class="important urgent warning"> This paragraph is a very important and urgent warning. </p> .important.urgent {background:silver;} 参考:http://ww