css3 定义选择器
引言:CSS样式规则有两个主要部分。选择器决定将格式化应用到哪些元素。声明则定义要应用的格式化。
- 构造选择器
选择器可以定义五个不同的标准来选择要进行格式化的元素。
- 元素的类型或者名称。如下所示。
h1{color:red; }
- 元素所在的上下文。如下所示。
h1 em{color:red; }
- 元素的类或ID。如下所示。
/*类选择器*/ .error{color:red; } /*ID 选择器*/ #gaudi{color:red; }
- 元素的伪类或伪元素。如下所示。
a:link{color:red; }
- 元素是否有某些属性和值。如下所示。
a[title]{color:red }
- 按名称选择元素
选择要格式化的元素,最常见的标准可能是元素的名称。如下所示:
h2{color:red; }
按照类型选择要格式化的元素
- 输入selector,其中selector是目标元素的类型名称。
- 输入{。
- 输入希望应用到选中元素的样式,用属性:值得形式表示。
- 输入}结束样式规则。
- 按类或ID选择元素
元素中标识了class或id,可以在选择器中使用这个标准,从而支队已标识的元素进行格式化。推荐使用类选择器。如下所示:
/*类选择器*/ .error{color:red; } /*ID 选择器*/ #gaudi{color:red; }
按类选择要格式化的元素
- 输入.(点号)。
- 不加空格,直接输入classname.
输入{。
输入希望应用到选中元素的样式,用属性:值得形式表示。
输入}结束样式规则。
按id选择要格式化的元素
- 输入#(井号)。
- 不加空格,直接输入id。
- 输入{。
- 输入希望应用到选中元素的样式,用属性:值得形式表示。
- 输入}结束样式规则。
- 按上下文选择元素
根据元素的祖先、父元素或同胞元素来定位需要格式化的元素。
祖先(ancestor)是包含目标(后代,descendant)元素的任何元素,不管它们之间隔了多少代。
按祖先元素选择要格式化的元素
- 输入希望格式化的元素的祖先元素的选择器。
- 输入一个空格。
- 如果需要,对后续的每个祖先元素重复以上两步。
- 输入希望格式化的元素的选择器。
.architect p{color:red; }
按父元素选择要格式化的元素
- 输入希望格式化的元素的父元素的选择器。
- 输入>(大于号)。
- 如果需要,对后续每代父元素重复以上两步。
- 输入希望格式化的元素的选择器。
.architect>p{color:red; }
按相邻同胞元素选择要格式化的元素
- 输入包含在同一父元素中的、直接出现在目标元素前面的元素选择器。
- 输入+(加号)。
- 如果需要,对每个后续的同胞元素重复以上两步。
- 输入要格式化的元素的选择器。
.architect p+p{color:red; }
- 选择第一个或者最后一个子元素
有时需要选择仅作为某元素第一个或最后一个子元素的元素。需要使用伪类:firsh-child和:last-child。如下:
li:frist-child{color:red; }li:last-child{color:red; }
选择某元素的第一个或者最后一个子元素进行格式化
- 输入代表我们想应用样式的第一个或者最后一个子元素。
- 选择第一个子元素输入:first-child。最后一个子元素输入:last-child。
- 选择元素的第一个字母或者第一行
分别使用:first-letter和:first-line伪元素只选择元素的第一个字母或第一行。如下:
P:first-letter{color:red;font-size:1.4em;font-weight:bold; }p:first-line{color:red; }
选择元素的第一个字母
- 输入要对其格式化的元素选择器。
- 输入:first-letter。
选择元素的第一行
- 输入要对其第一行进行格式化的元素的选择器。
- 输入:first-line。
- 按状态选择链接元素
CSS允许根据链接的当前状态对他们进行格式化。
按状态选择要格式化的链接元素的步骤
- 输入a(a是链接元素的名称)。
- 输入:(冒号),前后都没有空格。
- 完成第2步后,执行下列操作影响链接状态。
- 输入link以设置从未被激活或指向,当前页没有被激活或指向的链接的外观。
- 输入visited以设置访问者已激活过链接的外观。
- 输入focus,前提是链接是通过键盘选择并已准备好激活的。
- 输入hover以设置光标指向链接时链接的外观。
- 输入active以设置激活过的链接的外观。
/*未访问过*/ a:link{color:red; } /*访问过的链接*/ a:visited{color:orange; } /*链接获取焦点*/ a:focus{color:purple; } /*光标停留在连接上*/ a:hover{color:green; } /*激活链接时*/ a:active{color:blue; }
一定要按照以下的顺序定义规则:link、visited、focus、hover、active(缩写为LVFHA)。
- 按属性选择元素
对给定属性或属性值的元素进行格式化。例如:
p[class]{color:red; }
按属性选择要格式化的元素
- 输入要考察其属性的元素的选择器。
- 输入[。
- 输入选择元素需要考察的属性的名称。
- 根据需要输入属性的匹配符号和匹配值。
- 输入。如果想要为元素指定其他属性或者属性值。重复2-4步骤。
选择器 | 属性值 |
[attribute] | 匹配指定属性,不论具体指是什么。 |
[attribute="value"] | 完全匹配指定属性值。 |
[attribute~="value"] | 属性值是以空格分隔的多个单词,其中有一个完全匹配指定值。 |
[attribute|="value"] | 属性值以value-打头。 |
[attribute^="value"] | 属性值以value开头,value为完成的单词或单词的一部分。 |
[attribute$="value"] | 属性值以value结尾,value为完整的单词或单词的一部分。 |
[attribute*="value"] | 属性值为指定值的子字符串。 |
/*选择rel属性值等于external的a元素*/ a[rel="external"]{color:red; }/*配置以空格相隔的多个单词中的一个*/ article[class~="barcelona"]{color:red; }/*这个选择器也能匹配,因为这个选择器匹配部分字符串*/ article[class*="barcelona"]{color:red; }/*选择任何带有lang属性且属性值以es开头的h2*/ h2[lang|="es"]{color:red; }/*选择任何带有lang属性且属性值以es开头的元素*/ *[lang|="es"]{color:red; }/*选择既有href属性,又有任意是属性值包含单词howdy的title属性的a元素*/ a[href][title~="howdy"]{color:red; }/*选择既有href属性,又有任意属性值包含how的title属性的a元素*/ a[href][title*="how"]{color:red; }/*匹配href属性值以http://开头的a元素*/ a[href^="http://"]{color:red; }/*匹配任何src属性值完全等于logo.png的img元素*/ img[src="logo.png"]{border:1px solid green; }/*匹配任何src属性值以.png结尾的img元素*/ img[src$=".png"]{border:1px solid green; }
- 指定元素组
对于使用相同样式规则的多个元素,可以使用元素组设置样式规则。
将样式应用于元素组的步骤
- 输入第一个元素名称。
- 输入,(逗号)。
- 输入第二个元素名称。
- 对其他元素重复第二和第三步。
h1, h2{color:red; }
- 组合使用选择器
现实中常常需要组合使用以上技术,才能找到要格式化的元素。如:
/*选择em元素,包含在p元素中,这样的p元素是lang属性值以es开头的h2元素的直接相邻同胞元素,且class等于project的任何元素的子元素*/ .project h2[lang|="es"]+p em{color:red; }
css3 定义选择器相关推荐
- php表单偶数变颜色,利用CSS3 nth-child()选择器 实现表格奇偶行变色
nth-child()简介 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一样.这 ...
- jQuery与CSS3的选择器
2019独角兽企业重金招聘Python工程师标准>>> jQuery与CSS在选择器方面,有很多的相似之处,本文稍加总结,方便对比使用. 注:本文以jQuery1.9.1版本和CSS ...
- html兄弟选择器怎么用,兄弟选择器 - 选择后面相邻的所有兄弟元素 - css3普通选择器...
兄弟选择器 版本:CSS3 定义和用法E~F用于选择第一个元素之后所有的兄弟级的元素.只作用于同级元素. 这两个元素必须具有相同的父元素.F不必紧跟E. 语法:E~F{sRules} 选择E元素后面的 ...
- :empty css 可以用在哪些标签,CSS3 :empty 选择器
这可是个好东西,我也是这个星期才发现的,下面我们来说具体功能. p:empty { width:100px; height:20px; background:#ff0000; } A paragrap ...
- css的nth选择器,CSS3 :nth-child() 选择器
CSS3 :nth-child() 选择器 实例 指定每个 p 元素匹配的父元素中第 2 个子元素的背景色: p:nth-child(2) { background:#ff0000; } 定义和用法 ...
- 【04】HTML5+CSS3:01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天 一.什么是 `HTML5` 二.`HTML5 ` 新增标签 三.多媒体音频标签 四.多媒体视频标签 五.新增 input 标签 六.新增表单属性 七.`CSS3 ` 属性 ...
- CSS3(选择器、过渡、变形、动画)
目录 一.渐进增强和优雅降级 二.CSS3新增选择器 1.属性选择器 2.结构伪类选择器 3.目标伪类选择器 4.否定伪类选择器 5.动态伪类选择器 6.UI状态伪类 7.层级选择器 三.阴影 1.盒 ...
- CSS3新增选择器及用法详细介绍
目录 CSS属性选择器 E[att^=value]属性选择器 E[att$=value]属性选择器 E[att*=value]属性选择器 CSS3关系选择器 CSS3子代选择器(>) CSS3兄 ...
- html5类选择器选择权重,Python Html5和CSS3的新增功能:CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...
最新文章
- 当我们按下电源键,Android 究竟做了些什么?
- Maven 学习 (0) Maven 简介
- 【NOI2013】快餐店【基环树】【树的直径】【set】
- ajax如何传超长字符串_解决ajax超长字符串、中文乱码问题
- 超级楼梯(HDU-2040)
- 余承东嘲讽苹果:iPhone 12落后华为Mate40两代
- 黑马程序员 oc中的类与对象
- 离散傅里叶变换(DFT)
- 基于PHP课程网站设计开题报告,在线课程网站设计开题报告
- 【Windows Server 2019】路由服务的配置和管理
- 小米路由器 安装mysql_小米路由器安装和设置方法(图文教程)
- 阿里巴巴400集python教程_摆摊吧,程序员!阿里巴巴力荐Python400集视频
- 老刘说NLP:这几年的NLP历程回顾,以及关于NLP(知识图谱等)落地的思考
- 中国洗衣胶囊行业市场供需与战略研究报告
- HBase数据大批量导入方式总结和对比
- MySQL慢查询日志分析
- mb63.nte.ios.html,2009 Diagnosis, assessment, and treatment of non-pulmonary arterial hypertension
- zookeeper的客户端工具zoolnspector 工具的安装
- android--圆角框--dialog(圆角框)
- 2020 人工智能人才报告
热门文章
- 替换string中的部分字符
- Android studio安装过程中入的坑的记录与记录
- select选中的值_selenium下拉框处理(select)
- C++ primer第六章6.6函数匹配
- 科​目​三​路​考​操​作​步​骤
- 狂赌智能手机 中国互联网巨头深陷零利润困局
- 信息图:程序员/开发人员实际在用哪些工具
- C++ class中的静态(static)成员
- 四种类型转换 cast
- x264 struct学习 1