`

多个类选择器

 
阅读更多

多个类选择器:(像这种

	<div class="accoun_right bgDot">

 )

这些去匹配,$('.accoun_right.bgDot')。不能有空格,要紧跟着。

 

参考:

1、在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作(这两个词的顺序无关紧要,写成 warning important 也可以):

<p class="important warning">
This paragraph is a very important warning.
</p>

我们假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作:

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

 

2、通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。

如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。请看下面的规则:

.important.urgent {background:silver;}

不出所料,这个选择器将只匹配 class 属性中包含词 important 和 urgent 的 p 元素。因此,如果一个 p 元素的 class 属性中只有词 important 和 warning,将不能匹配。不过,它能匹配以下元素:

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>
分享到:
评论

相关推荐

    css介绍快速学习

    2. 组合选择器:用逗号分隔多个选择器,如 `p, div` 设置所有段落和 `div` 标签的样式。 3. 伪元素选择器:如 `a:link` 表示超链接的未访问状态,还有 `:hover`, `:visited`, `:active` 等,用于鼠标悬停、已访问和...

    Css基础 (一).doc

    一个标签可以调用多个类选择器,多个标签可以调用同一个类选择器。 * ID 选择器:一个 ID 选择器在一个页面只能调用一次。如果使用 2 次或者 2 次以上,不符合 w3c 规范,JS 调用会出问题。 * 通配符选择器:给所有...

    第39章 UI元素状态伪类选择器

    9. `:not()` 伪类:这个选择器用于选择不符合指定条件的所有元素,提供了更灵活的反向选择能力。 在实际开发中,结合使用这些伪类选择器可以创建出丰富多样的用户交互体验。了解并熟练运用它们,对于前端开发者来说...

    Android地名选择器 全国省市区选择器 城市选择 区县选择

    为了实现这个功能,开发者需要编写一个选择器类,它包含初始化数据、设置回调函数、显示选择界面等方法。在用户选择地名后,选择器会通过回调函数通知调用者,传递所选的省市区信息。回调函数是事件驱动编程的一种...

    前端必须掌握的css选择器方法

    类选择器效率低于 ID 选择器,一个页面可以有多个 class,并且 class 可以放在不同的标签中使用。 .error { color: red; } 4. 标签选择器 X 标签选择器可以选择页面中的某个标签样式改变。 a { color: red; } ...

    css3类选择器之结合元素选择器和多类选择器用法

    这个选择器告诉浏览器,我们要选取所有`&lt;p&gt;`标签中同时具有`class="p1"`的元素。 4. 多类选择器(Multiple Class Selectors): 多类选择器允许在一个class属性中指定多个类,以空格分隔。例如,`&lt;p class="p1 p2"&gt;...

    EDA四选一多路选择器的设计

    数据选择器74153芯片含两个4路数据选择器,每个选择器接收4路数据输入,产生一个输出,两个4路数据选择器共用两个选择变量。芯片有16条引线,其中1D0~1D3,2D0~2D3为8条数据输入线,A1和A0为选择输入线,1Y、2Y为2...

    30个最常用css选择器解析

    Class选择器的优点是可以作用于多个元素,但缺点是优先级较低。 4. 后代选择器(X Y) 后代选择器用于选取X元素下的所有Y元素。例如:`X Y li a { text-decoration: none; }`,这将将X元素下的所有li元素下的a元素...

    JSP页面中的时间选择器

    控件提供了多个参数可以设置,例如: * bMoveable:设置日历是否可以拖动。 * _VersionInfo:设置控件的版本信息。 知识点六:控件的显示效果 控件的显示效果可以通过 CSS 样式来设置,例如: * 设置按钮的样式...

    Android自定义日期选择器源码

    总的来说,自定义日期选择器是Android开发中的一个重要实践,它涉及到了Android UI设计、事件处理、动画、数据绑定等多个方面,对开发者全面理解Android系统具有很高的价值。通过这样的项目,开发者不仅可以提升技能...

    四大类CSS选择器的使用说明

    4. **并集选择器**:允许同时选择多个选择器。例如: ```css p, #one, .two { color: red; } ``` 这表示选择所有`p`标签、ID为`one`的元素以及类名为`two`的所有元素,并将它们的颜色设置为红色。 #### 三、...

    jquery基本选择器

    可以将多个选择器组合起来,如`$("div.myClass p")`会选取所有`div`元素内的类名为"myClass"的`p`元素。 以上就是jQuery的基本选择器,它们极大地简化了对DOM的操作,使得开发者能更高效地编写和维护代码。结合...

    横向滑动时间选择器

    总之,"横向滑动时间选择器"是一个涉及多个Android开发技术的项目,包括UI设计、触摸事件处理、数据绑定、自定义View以及动画效果。通过这样的实践,开发者可以提升自己的Android开发技能,同时也能为用户提供更独特...

    CSS3选择器

    * 属性包含选择器(E[att~=val]):匹配所有 att 属性具有多个空格分隔的值、其中一个值等于“val”的 E 元素 * 属性以…开头选择器(E[att|=val]):匹配所有 att 属性具有多个连字号分隔的值、其中一个值以“val”...

    一个Android图片选择器

    总结来说,Android图片选择器是提升用户体验的关键组件,它的实现涉及到Android的多媒体API、图片加载库、权限管理等多个方面。通过理解并熟练运用这些技术,我们可以构建出符合用户期望的高效、易用的图片选择功能...

    HTML5+CSS3 城市选择器

    CSS3则负责这个选择器的视觉样式和动态效果。通过使用选择器(如类选择器、ID选择器和伪类选择器),可以精确控制各个元素的样式,包括颜色、字体、布局等。CSS3的过渡(transition)和动画(animation)效果可以使...

    带有开始时间和结束时间的日期选择器

    垂直布局避免了在同一屏幕上显示两个日期选择器时可能造成的拥挤感,使用户能更清晰地看到并操作每个选择器。 在Android中实现这样的日期选择器,开发者可能使用了以下技术: 1. **Material Design Components ...

    三级联动选择器 (Android版)

    可以创建一个树形结构,例如:`Province`类包含多个`City`对象,`City`类包含多个`District`对象。 2. 数据加载:从服务器或者本地资源获取三级联动数据,并填充到数据模型中。如果数据量较大,可能需要进行异步...

    js时分秒选择器

    总结,JavaScript时分秒选择器是前端开发中一个实用的组件,它的实现涉及到DOM操作、事件处理、时间格式化等多个方面。开发者需要关注其兼容性、可访问性和用户体验,以创建出高效、易用的时分秒选择器。在实际项目...

Global site tag (gtag.js) - Google Analytics