css中的各种选择器

我们都知道浏览器会把远端的html解析成dom模型，这时html文件就变成了xml格式，这样浏览器才能

根据css各种规则的选择器在dom结构中找到相应的位置，从而做一些操作。除了常用的标签选择器，类选择器和ID

选择器之外，还有一些常用的选择器。整理如下:

--------------------------------------------------------------------------------------------------------------------------

1：后代选择器

所谓后代选择器，就是找到所有的“孩子节点”，包括子孙

这样body下的所有的span标签里的内容都会被定义成以上样式，浏览器中会如下显示：

2：孩子选择器

与后代选择器不同的是，孩子选择器只是找孩子节点，不包括“子孙”，用“>”符号就可以实现

这样body下的孩子节点的所有span标签内容都会被定义成以上样式，浏览器中会如下显示：

3：兄弟节点选择器，用“+”符号实现

当css为：

浏览器中显示为：

当css为：

浏览器中显示为：

是不是觉得后者好奇怪，说好的紧跟的那一个兄弟节点呢。。。。这是因为span+span，并没有指明是哪一个span，所以从第一个开始，再把第二个span当成第一个，这样的话，除了第一个span，后面的所有紧跟的span的css都被修改。

4：属性选择器

就是选择满足某一属性值的元素

css为：

浏览器中显示为：

css中的各种选择器相关推荐

CSS中的id选择器和class选择器简单介绍
<!-- CSS中选择器 CSS有两种选择器id和class,总之如果说你想在HTML元素中设置CSS属性, 你要在元素中设置id和class选择器.那么我们现在来一个一个的介绍这两中选择器 i ...
在CSS中实现父选择器效果
为何CSS不支持父选择器? 这个问题的答案和"为何CSS相邻兄弟选择器只支持后面的元素,而不支持前面的兄弟元素?"是一样的. 浏览器解析HTML文档,是从前往后,由外及里的.所以, ...
css中的五大选择器
众所周知,在css中存在五大选择器,它们分别是id选择器.标签选择器.后代选择器.类选择器.子选择器,他们具有各自不同的功能,让我们来了解一下. 一.id选择器 id选择器多种标签都能够使用指定样式 ...
css unchecked,详细介绍CSS中的伪选择器
说到伪选择器,真的让我体会到了CSS的无比强大,强大到自己貌似都不认识CSS了,有点C# 6.0中一些语法糖带给我们的震撼...首先我们可以在VS里面提前预览一下. 可以看到,上面的伪类有很多很多, ...
实操代码带你理解CSS中的常用选择器（你值得掌握！）
在CSS中,我们要给一个元素定义样式,首先得把这个元素选出来,我在网上看了很多文章,再结合老师所讲的精华部分将平时比较常用的选择器整理出来分享给大家,哈哈哈一起学习一起进步! https://blog ...
html中hover的写法,在行内css中书写伪选择器:hover
我们知道直接写style可以把css属性直接作用到一个元素上,但是如果这个元素有:hover怎么办呢?还是只能写style吗?查看CSS的标准,你会发现这么一段描述: Setting properti ...
【CSS 教程系列第 7 篇】什么是 CSS 中的 class 选择器（类选择器）、多类名选择器
这是[CSS 教程系列第 7 篇],如果觉得有用的话,欢迎关注专栏. CSS 的选择器有很多,常用的有元素选择器.id 选择器.class 选择器.后代选择器.子代选择器.并集选择器.交集选择器.伪 ...
css中伪类选择器详解(a:visited不生效的原因)
css伪类是一种css定义的方法,主要用于对链接显示效果的定义, 主要包括: a:link :链接平常的状态. a:visited:链接被访问之后的状态. a:hover:鼠标停留在链接上的状态. a ...
CSS中常用的选择器都有那些？
CSS选择器分类: 基础选择器标签选择器类选择器 id选择器通配符选择器复合选择器(在demo5里) 标签选择器标签名作为选择器优点: 可以一次修改所有某一类的标签的样式缺点: 没法区 ...

css中的各种选择器

css中的各种选择器相关推荐

最新文章

热门文章