举报投诉联系我们 手机版 热门标签 编程学
您的位置：编程学 > 选择器优先级 选择器

选择器优先级 选择器

2023-04-16 12:18 jQuery教程

选择器优先级 选择器

选择器优先级

CSS 选择器优先级是指在一个页面中，当多个选择器同时作用于一个元素时，由于不同的选择器有不同的权重，所以会有一个优先级的问题。

CSS 选择器优先级的计算方法是：将所有选择器的权重相加，然后根据总权重判断出最终的优先级。CSS 选择器分为四大类：标记、ID、Class 和内联样式。

 
div { 
    color: red; 
} 
 
#id { 
    color: blue; 
} 
 
.class { 
    color: green; 
}      <div style="color: yellow;"></div>

标记选择器权重为 1；ID 选择器权重为 10；Class 选择器权重为 10；内联样式权重最高，可以理解为 1000。如上例中 div 标签上应用了三种选择器：标记、ID 和 Class ，它们的总权重是 11 （1+10+10=11 ）。这时内联样式就会覆盖前三者的效果。

选择器

jQuery - 选择器

jQuery 库利用级联样式表(CSS)选择器让我们快速而方便地访问文档对象模型(DOM)中的元素或元素组。

jQuery 选择器是一个函数，基于给定的标准，利用表达式从 DOM 中找出匹配的元素。简单来说，选择器是使用 jQuery 来选择一个或多个 HTML 元素。当一个元素被选中，然后我们对所选元素可以执行各种操作。

$() 工厂函数

jQuery 选择器以 dollar 符号和括号开始 —— $()。工厂函数 $() 使用了以下三个部分来从给定的文档中选取元素 ——

序号 选择器 & 描述
1 标签名

代表在 DOM 中可用的标签名。例如 $('p') 选择文档中所有的段落 <p>。

2 标签 ID

代表在 DOM 中带有给定 ID 的一个可用的标签。例如 $('#some-id') 选择文档中带有 ID 为 some-id 的单个元素。
3 标签类

代表在 DOM 中带有指定类的可用的标签。例如 $('.some-class') 选择文档中带有 some-class 类的所有元素。

上述所有项目可以单个使用或结合其他的选择器使用。所有 jQuery 选择器除了一些调整外，都是基于同样的原则。

注意 —— 工厂函数 $() 是 jQuery() 函数的同义词。所以如果你使用的是任何其他 JavaScript 库，其中 $ 符号和一些其他的事情有冲突的话，你可以用 jQuery 名称来取代 $ 符号，并且你也可以使用 jQuery() 函数来替代 $() 函数。

示例

下面是使用标签选择器的一个简单的例子。它会选取带有标签名称 p 的全部的元素，并把它们的背景色设置为 “黄色”。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts..cn/attachments/image/wk/jquery/jquery.min.js">
      </script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>

   <body>
      <div>
         <p class="myclass">This is a paragraph.</p>
         <p id="myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>

</html>

这将产生如下所示结果 ——

如何使用选择器？

选择器非常有用，在使用 jQuery 的每一步都需要使用选择器。它们会从 HTML 文档中获得你想要的正确的元素。

下表列出了一些基本的选择器并用示例进行了解释。

序号 选择器 & 描述
1 名称

选择出与给定的元素 Name 匹配的所有元素。
2 #ID

选择出与给定的 ID 相匹配的单个元素。
3 .Class

选择出与给定的 Class 匹配的全部元素。
4 Universal (*)

选择出在 DOM 中全部可用的元素。
5 多个元素 E, F, G

选择出所有指定的选择器 E, F 或 G 的所有组合结果。

选择器示例

与上述语法和实例类似，下面的例子会使你对使用其他类型的选择器有一个大致的了解 ——

S.N. Selector & Description
1 $('*')

该选择器选出文档中所有的元素。
2 $("p > *")

该选择器选择出段落元素的所有子元素。
3 $("#specialID")

该选择器函数获取 id="specialID" 的元素。
4 $(".specialClass")

该选择器获取带有 specialClass 类的所有元素。
5 $("li:not(.myclass)")

选择出与 <li> 匹配并且不带有 class="myclass" 类的所有元素。
6 $("a#specialID.specialClass")

该选择器与 id 为 specialID 的链接匹配并且带有 specialClass 类。
7 $("p a.specialClass")

该选择器与带有 specialClass 类的链接匹配并且该类在 <p> 元素内声明。
8 $("ul li:first")

该选择器获取 <ul> 的第一个 <li> 元素。
9 $("#container p")

选择与 <p> 匹配并且是带有 container id 元素的后代的全部元素。
10 $("li > ul")

选择与 <ul> 匹配并且是与 <li> 匹配的元素的孩子的全部元素。
11 $("strong + em")

选择与 <em> 匹配并且紧跟一个与 <strong> 匹配的兄弟元素的全部元素。
12 $("p ~ ul")

选择与 <ul> 匹配并且后面有一个与 <p> 匹配的兄弟元素的全部元素。
13 $("code, em, strong")

选择所有与 <code> 或 <em> 或 <strong> 匹配的元素。
14 $("p strong, .myclass")

选择与 <strong> 匹配并且是与 <p&gt 匹配的元素的后代，同样所有的元素都要有 myclass 类的全部元素。
15 $(":empty")

选择出所有没有孩子的元素。
16 $("p:empty")

选择出所有与 <p> 匹配并且没有孩子的元素。
17 $("div[p]")

选择出与 <div> 匹配并且包含一个与 <p> 匹配的元素的所有元素。
18 $("p[.myclass]")

选择出与 <p> 匹配并且包含一个带有 myclass 类的元素的所有元素。
19 $("a[@rel]")

选择出与 <a> 匹配并且带有 rel 属性的全部元素。
20 $("input[@name=myname]")

选择出所有与 <input> 匹配并且 name 值恰好等于 myname 的元素。
21 $("input[@name^=myname]")

选择出所有与 <input> 匹配并且 name 值以 myname 开始的元素。
22 $("a[@rel$=self]")

选择出所有与 <a> 匹配并且带有以 self 结尾的 rel 属性值的元素。
23 $("a[@href*=domain.com]")

选择出所有与 <a> 并且带有一个包含 domain.com 的超链接值的元素。
24 $("li:even")

选择出与 <li> 匹配并且带有一个 even 索引值的全部元素。
25 $("tr:odd")

选择出与 <tr> 匹配并且有 odd 索引值的全部元素。
26 $("li:first")

选择出第一个 <li> 元素。
27 $("li:last")

选择出最后一个 <li> 元素。
28 $("li:visible")

选择出与 <li> 匹配并且可见的全部元素。
29 $("li:hidden")

选择出与 <li> 匹配并且不可见的全部元素。
30 $(":radio")

选择出表单中全部的单选按钮。
31 $(":checked")

选择出表单中全部的复选框。
32 $(":input")

只选择表单元素 (输入，选择，文本区，按钮)。
33 $(":text")

只选择文本元素 (input[type=text])。
34 $("li:eq(2)")

选择第三个 <li> 元素。
35 $("li:eq(4)")

选择第五个 <li> 元素。
36 $("li:lt(2)")

选择第三个之前的与 <li> 元素匹配的所有元素；换句话说，也就说前两个 <li> 元素。
37 $("p:lt(3)")

选择第四个之前的与 <p> 元素匹配的全部元素；换句话说，也就是前三个 <p> 元素。
38 $("li:gt(1)")

选择第二个之后的与 <li> 匹配的全部元素。
39 $("p:gt(2)")

选择第三个之后与 <p> 匹配的全部元素。
40 $("div/p")

选择与 <p> 匹配并且是与 <div> 匹配的元素的孩子的全部元素。
41 $("div//code")

选择与 <code> 匹配并且是与 <div> 匹配的元素的后代的全部元素。
42 $("//p//a")

选择与 <a> 匹配并且是与 <p> 匹配的元素后代的全部元素。
43 $("li:first-child")

选择与 <li> 匹配并且是它们父亲的第一个孩子的全部元素。
44 $("li:last-child")

选择与 <li> 匹配并且是它们父亲的最后一个孩子的全部元素。
45 $(":parent")

选择出是另一个元素的父亲的全部元素，包括文本。
46 $("li:contains(second)")

选择与 <li> 匹配并且包含文本 second 的全部元素。

你可以用任何 HTML/XML 元素以通用的方式使用上述所有选择器。例如，如果选择器 $("li:first") 为 < li> 元素工作，那么 $("p:first") 也会为 < p> 元素工作。

阅读全文
以上是编程学为你收集整理的选择器优先级 选择器全部内容。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
相关文章
猜您喜欢
标签TAG
本月热门
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部