【CSS属性选择器和部分伪类】的更多相关文章

CSS属性选择器和部分伪类

p[name]{background:red;} 只使用属性名p[name=ghr]{background:red;} 指定属性名,并指定了该属性的属性值p[name~=old]{background:red;}此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词p[name^=g]{background:pink;}属性值是以g开头的p[name$=M]{background:#CC0;}属性值是以M结尾的p[name*=d]{background:#C3C;}属值中包含了…

CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ] E [ att = 'val' ]   选择具有 att 属性且属性值等于 val 的 E元素 E [ att = 'val' ]   选择具有 att 属性且属性值等于 val 的 E元素 E [ att ^= 'val' ]   选择具有 att 属性且属性值以 val 开头的 E元素 E…

CSS 属性选择器的深入挖掘

CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场景下的不同用法. 简单的语法介绍 [attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何. [attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素. [attr~=val]:该选择器仅选择具有 attr 属性的元素,而且要求 val 值是 att…

HTML&CSS基础-子元素的伪类选择器

HTML&CSS基础-子元素的伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html的源代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>子元素的伪类选择器</title> <style> /** * * 子元素的伪类装饰器: * :first-child * 可以选中第一个子元素 *…

js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

js进阶 10-10  可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是  四个  包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常有用. 1.可见伪类选择器可以做什么? 设置你想是实现的任何元素显示或者隐藏的功能 2.css中元素隐藏两种方法? display和visibility 8 /* ul{display: none;}*/ 9 /* ul{visibility: hidden;}*/ 3.display和visibi…

使用这些 CSS 属性选择器来提高前端开发效率

属性选择器非常神奇.它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题.但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用.在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法. 通常将 HTML 属性放在方括号中,称为属性选择器,如下: [href] { color: red;} 这样任何具有href属性的且没有更特定选择器的元素的文本颜色都会是红色的.属性选择器的特性与类相同. 注:更多关于笼匹配的CSS特异性,你可以阅读CSS特性:你应该知…

CSS的选择器分为两大类

CSS的选择器分为两大类:基本选择题和扩展选择器. 基本选择器: 标签选择器:针对一类标签 ID选择器:针对某一个特定的标签使用 类选择器:针对你想要的所有标签使用 通用选择器(通配符):针对所有的标签都适用(不建议使用) 高级选择器: 后代选择器:用空格隔开 交集选择器:用.隔开 并集选择器(分组选择器):用逗号隔开 伪类选择器 https://blog.csdn.net/DYD850804/article/details/80997251…

IE7浏览器下CSS属性选择器二三事

一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货色,研究的多半是两个浏览器共性的东西,比方说haslayout之类的. 但是,最近1~2年,至少我个人所从事的桌面PC项目都不需要管IE6浏览器(0.3%)了,但是,还是要关心IE7浏览器(3%+)的.虽然,我们有丰富的处理IE6浏览器的经验,但是,当我们不要管IE6浏览器的时候,我们前端技术的选型…

CSS：CSS 属性 选择器

ylbtech-CSS:CSS 属性 选择器 1.返回顶部 1. CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id. 注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器. 属性选择器 下面的例子是把包含标题(title)的所有元素变为蓝色: 实例 [title] { color:blue; } 尝试一下 » 属性和值选择器 下面的实例改变了标题title='runoob'元素的边框样式: 实例…

CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别 总结: "value 是完整单词" 类型的比较符号: ~=, |= "拼接字符串" 类型的比较符号: *=, ^=, $= 1.attribute 属性中包含 value: [attribute~=value] 属性中包含独立的单词为 value,例如: [title~=flower] --> <img src="/i/eg_tulip.jpg" title="…