css3 定义选择器
2016-03-01 11:42
381 查看
引言:CSS样式规则有两个主要部分。选择器决定将格式化应用到哪些元素。声明则定义要应用的格式化。
构造选择器
选择器可以定义五个不同的标准来选择要进行格式化的元素。
元素的类型或者名称。如下所示。
元素所在的上下文。如下所示。
元素的类或ID。如下所示。
元素的伪类或伪元素。如下所示。
元素是否有某些属性和值。如下所示。
按名称选择元素
选择要格式化的元素,最常见的标准可能是元素的名称。如下所示:
按照类型选择要格式化的元素
输入selector,其中selector是目标元素的类型名称。
输入{。
输入希望应用到选中元素的样式,用属性:值得形式表示。
输入}结束样式规则。
按类或ID选择元素
元素中标识了class或id,可以在选择器中使用这个标准,从而支队已标识的元素进行格式化。推荐使用类选择器。如下所示:
按类选择要格式化的元素
输入.(点号)。
不加空格,直接输入classname.
输入{。
输入希望应用到选中元素的样式,用属性:值得形式表示。
输入}结束样式规则。
按id选择要格式化的元素
输入#(井号)。
不加空格,直接输入id。
输入{。
输入希望应用到选中元素的样式,用属性:值得形式表示。
输入}结束样式规则。
按上下文选择元素
根据元素的祖先、父元素或同胞元素来定位需要格式化的元素。
祖先(ancestor)是包含目标(后代,descendant)元素的任何元素,不管它们之间隔了多少代。
按祖先元素选择要格式化的元素
输入希望格式化的元素的祖先元素的选择器。
输入一个空格。
如果需要,对后续的每个祖先元素重复以上两步。
输入希望格式化的元素的选择器。
按父元素选择要格式化的元素
输入希望格式化的元素的父元素的选择器。
输入>(大于号)。
如果需要,对后续每代父元素重复以上两步。
输入希望格式化的元素的选择器。
按相邻同胞元素选择要格式化的元素
输入包含在同一父元素中的、直接出现在目标元素前面的元素选择器。
输入+(加号)。
如果需要,对每个后续的同胞元素重复以上两步。
输入要格式化的元素的选择器。
选择第一个或者最后一个子元素
有时需要选择仅作为某元素第一个或最后一个子元素的元素。需要使用伪类:firsh-child和:last-child。如下:
选择某元素的第一个或者最后一个子元素进行格式化
输入代表我们想应用样式的第一个或者最后一个子元素。
选择第一个子元素输入:first-child。最后一个子元素输入:last-child。
选择元素的第一个字母或者第一行
分别使用:first-letter和:first-line伪元素只选择元素的第一个字母或第一行。如下:
选择元素的第一个字母
输入要对其格式化的元素选择器。
输入:first-letter。
选择元素的第一行
输入要对其第一行进行格式化的元素的选择器。
输入:first-line。
按状态选择链接元素
CSS允许根据链接的当前状态对他们进行格式化。
按状态选择要格式化的链接元素的步骤
输入a(a是链接元素的名称)。
输入:(冒号),前后都没有空格。
完成第2步后,执行下列操作影响链接状态。
输入link以设置从未被激活或指向,当前页没有被激活或指向的链接的外观。
输入visited以设置访问者已激活过链接的外观。
输入focus,前提是链接是通过键盘选择并已准备好激活的。
输入hover以设置光标指向链接时链接的外观。
输入active以设置激活过的链接的外观。
一定要按照以下的顺序定义规则:link、visited、focus、hover、active(缩写为LVFHA)。
按属性选择元素
对给定属性或属性值的元素进行格式化。例如:
按属性选择要格式化的元素
输入要考察其属性的元素的选择器。
输入[。
输入选择元素需要考察的属性的名称。
根据需要输入属性的匹配符号和匹配值。
输入。如果想要为元素指定其他属性或者属性值。重复2-4步骤。
属性选择器参考表
指定元素组
对于使用相同样式规则的多个元素,可以使用元素组设置样式规则。
将样式应用于元素组的步骤
输入第一个元素名称。
输入,(逗号)。
输入第二个元素名称。
对其他元素重复第二和第三步。
组合使用选择器
现实中常常需要组合使用以上技术,才能找到要格式化的元素。如:
构造选择器
选择器可以定义五个不同的标准来选择要进行格式化的元素。
元素的类型或者名称。如下所示。
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; }
相关文章推荐
- 谈谈对CSS中BFC的理解
- css一些小技巧收集(未完待续)
- CSS代码编写中视觉格式化模型的学习教程
- a标签样式
- How Broswers Work<二>渲染引擎(1)
- 用CSS美化你的滚动条
- CSS3 Transitions, Transforms和Animation
- CSS修改前端的一些样式等,持续更新...
- 关于css的全面学习笔记
- CSS3的calc()使用
- background-position 用法详细介绍
- css+div网页布局大全
- CSS样式设置详解
- CSS代码缩写,单位和值
- CSS布局模型
- CSS盒模型
- 2016/3/1 淘宝 腾讯 网易 css初始化代码 以及最基础的初始化
- Material Design之Theme样式及切换
- CSS中Position、Float属性深入探讨
- SQL时间样式