首页前端开发CSS举例详解CSS中的选择器

举例详解CSS中的选择器

时间2024-05-23 20:28:03发布访客分类CSS浏览90
导读:大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成了xml格式,否则的话就是一堆"杂乱无章"的string,这样的话没人知道是什么鸟东西,js也无法什么各种getElementById,所以当浏览器解析成...

大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成了xml格式,否则的话就是一堆"杂乱无章"的string,这样的话没人知道是什么鸟东西,js也无法什么各种getElementById,所以当浏览器解析成dom结构后,浏览器才会很方便的根据css各种规则的选择器在dom结构中找到相应的位置,那下一个问题自然就严重了,那就是必须深入的理解dom模型。

一:理解Dom模型

首先我们看下面的代码。

复制代码 代码如下:







有名的公司一栏





  • 百度

  • 新浪

  • 阿里



用这个代码我们很容易的画出dom树。

当你看到这个dom树的时候,是不是顿时感到信息量特别大,很简单,因为是树,所以就具有了一些树的特性,比如 "孩子节点","父亲节点",

"兄弟节点","第一个左孩子","最后一个左孩子"等等,对应着后续我要说的各种情况,一起来看看html被脱了个精光的感觉是不是很爽~~~~

1:孩子节点

找孩子节点,本质上来说分两种,真的只找"孩子节点","找到所有孩子(包括子孙)"

后代选择器

首先看下面的html,我想你可以轻而易举的绘制出dom树了,那下面的问题就是怎么将body中所有的后代span都绘上red。

复制代码 代码如下:






body span {
color: red;
}



我是span1


    • 我是span2





2. 孩子选择器

"> "玩法

这个也是我说的第二种情况,真的只找孩子节点,在css中也很简单,用 > 号就可以了,是不是很有意思,跟jquery一样的玩法,对不对。

复制代码 代码如下:





body > span {
color: red;
}



我是span1


    • 我是span2





"伪选择器"玩法

除了上面这种玩法,在css3中还可以使用"伪选择器"玩法,真tmd的强大,下一篇会专门来讲解,这里只介绍一个:nth-child用法,如果

你玩过jquery,一切都不是问题。

复制代码 代码如下:






body > span:nth-child(1) {
color: red;
}



我是span1
我是span2


    • 我是span3





3. 兄弟节点

兄弟节点也是很好理解的,在css中用 "+"就可以解决了,可以看到下面我成功将第二个p绘制成了红色。

复制代码 代码如下:






.test + p {
color:red;
}



我是第一个段落


我是第二个段落





4. 属性选择器

如果玩过jquery,这个属性选择器我想非常清楚,首先看个例子,我想找到name=test的p元素,将其标红。

复制代码 代码如下:





p[name='test'] {
color: red;
}




我是第一个段落


我是第二个段落




到现在为止,有没有感觉到和jquery的玩法一模一样,而且感觉越来越强烈,已经到了 "你懂的" 的境界。

二:css内部机制的猜测

文章开头也说了,浏览器会根据css中定义的"标签",然后将这个标签的样式应用到dom中指定的"标签"上,就比如说,我在css中定义了一个

p样式,但浏览器怎么就能找到dom中的所有的p元素呢??? 因为闭源的原因,我们无法得知其内部机制,不过在jquery上面,或者我们可以窥知一

二,因为css能展示的选择器用法,在jquery中都能做得到,然后我就很迫不及待的去看看jquery如何提取我的各种选择器写法,下面我们看看源码。

复制代码 代码如下:







p[name='test'] {
color: red;
}





$(document).ready(function () {

$("p[name='test']").hide();
} );



我是第一个段落


我是第二个段落



声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: 举例详解CSS中的选择器
本文地址: https://pptw.com/jishu/666547.html
浅析与CSS3的loading动画加载相关的transition优化 WPCOS插件实现WordPress图片/附件自动存储至腾讯云COS

游客 回复需填写必要信息