关于选择器的整理

  选择器可以采用多种方式,提供一个可伸缩性来匹配文档中的各种标记,下面整理一下常用的选择器类型:

  1、元素选择器

 元素选择器是最常见,最易理解的选择器,元素选择器选择匹配选择器的网页上的任何HTML元素,不考虑这些元素在文档中的位置;

  2、类选择器

 元素选择器的目标是一个元素的每个实例,而选择器可以用于选择某个有class属性的任何HTML元素,不考虑他们在文档中的位置;

  3、ID选择器

 ID选择器与类选择器相似,它可以用于选择某个ID属性的任何HTML元素,不用考虑这些元素在文档中的位置,其语法形式为:#ID名{属性:值}

ID选择器和类选择器的主要区别在于,同一ID属性值在同一个页面上只能出现一次,而同一个 class属性值可以在同一页面多次出现;

  4、包含选择器

 包含选择器用于选择在文档树中一个元素的后代元素;

  5、通配选择器

 通配选择器用于选择所有元素。

  6、伪类选择器

 目前所了解的选择器都是基于文档树中的元素,但是有时候我们需要格式化一些没有CSS选择器可用的东西,伪类选择器允许我们格式化不在文档树中的一些条目,因为不用浏览器对伪类选择器的支持有所不同,目前我们主要使用所有的浏览器都支持的、与超链接<a>元素相关的超链接伪类选择器。

  7、伪元素选择器

 伪元素选择器允许我们格式化文档树中没有的一些信息。例如,使用标准的选择器不能格式化一个元素内容的第一个字母或者第一行,而伪类元素选择器能。

时间: 2024-11-05 14:59:35

关于选择器的整理的相关文章

js-DOM中基础选择器的整理

DOM中基础选择器的整理 注意:DOM中选择器返回是数组类型的都是伪数组,只能拥有数组的索引以及length,数组的其他方法是不可以使用的! 一:DOM中的选择器 1.getElementById(id) //获取指定元素的ID元素 2.getElementsByTagName() //获取相同元素的节点列表,通过标签名选择元素,返回值是一个数组 3.getElementsByName() //通过name值获取元素,返回值是数组,通常用来获取有name的input的值 4.getElement

JQuery选择器学习整理(基本选择器,层级选择器,伪类选择器,属性过滤,内容过滤,可见性过滤,范围选择器,排除选择器)

总的来说,选择器引擎规则就是: $('查询字符串'). 最常用最基本的就是:1.标签选择器(以文档元素作为选择符):$("div"): 2.id选择器(以ID作为选择符): $("#demo1"): 3.类选择器(以class作为选择符): $(".selected"): 4.群组选择器: $(".class1, .class2, .class3"): 5.后代选择器: $("p span") 多种规则的组

jquery的遍历选择器-随机整理下

我从w3c上截了一张图,如图所示: 下面我们来详细说一说.这些选择器. 1.add() 方法将元素添加到匹配元素的集合中.例子: .add(selector) $("div").add("p").css("background", "yellow"); div 中添加一个 p 元素,并且设置他的背景. 2.andSelf() 听名字都知道是包括自己.例子: <ul> <li>list item 1<

从零开始学_JavaScript_系列(13)——CSS&lt;2&gt;(新窗口打开,背景图片填充,底文字,小提示,CSS选择器整理)

前注:图片和部分内容引用的网易云课堂的,所以,侵,私信,删. 这篇也算上周的 (10)打开一个网页时,以新窗口形式打开 将 <a href="www.baidu.com"></a> 新增属性: <a href="www.baidu.com" target="_blank"></a> 即可. (11)关于块间的莫名空隙 假设有html代码: <div id="a"> &

jquery下 选择器整理

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行

CSS3选择器整理

属性选择器: E[name] 属性名是name的元素 *E[name=value] 属性名是name值为value元素 E[name~=value] 包含value这个单词元素 E[name^=value] 以value这个词开头的元素 E[name$=value] 以value这个词结尾的元素 *E[name*=value] 只要包含value这个东西的元素 E[name|=value] 以value-或者纯value开头的东西 <a href="xxxpdfxx"> &

jQuery选择器整理

jquery对象訪问: 1. each(callback):以每一个匹配的元素作为上下文来运行一个函数,return false;停止循环;return true;跳至下一个循环.来个实例 :               $("img").each(function(){       $(this).toggle("example");}) 2.size()与length同样,都是返回jquery对象中元素的个数.   $("img").size

CSS3知识点整理(二)----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon"&

CSS选择器的简单整理

标签选择器 直接选择标签 p{ //声明 } 2. 类选择器 给元素设置一个className,通过.className选择到相同className的元素 className必须以字母开头 区分大小写 出现多次 .className{ //声明 } 3. id选择器 给元素设置一个id,通过#id选择到相应id的元素 id必须以字母开头 区分大小写 只出现一次 #id{ //声明 } . 通配符选择器 通过*{}选择页面中所有元素 一般使用通配符选择器清除默认样式 *{ //声明 } 5. 组合