【前端系列教程之CSS3】05_CSS3高级选择器和颜色表示方法

一、CSS3新增选择器

1.1 CSS3属性选择器

选择器	示例	示例说明
attribute^=value	a[src^="https"]	选择每一个src属性的值以"https"开头的元素
attribute$=value	a[src$=".pdf"]	选择每一个src属性的值以".pdf"结尾的元素
attribute*=value	a[src*="runoob"]	选择每一个src属性的值包含子字符串"runoob"的元素

1.2 CSS3结构伪类选择器

选择器	示例	示例说明
:first-of-type	p:first-of-type	匹配元素其父级是特定类型的第一个子元素。
:last-of-type	p:last-of-type	匹配元素其父级是特定类型的最后一个子元素。
:only-of-type	p:only-of-type	匹配元素其没有其他相同类型的兄弟元素。
:only-child	p:only-child	匹配属于父元素中唯一子元素的元素。
:nth-child(n)	p:nth-child(2)	匹配父元素中的第 n 个子元素，元素类型没有限制。 n 可以是一个数字，一个关键字，或者一个公式。
:nth-last-child(n)	p:nth-last-child(2)	匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。 n 可以是一个数字，一个关键字，或者一个公式。
:nth-of-type(n)	p:nth-of-type(2)	匹配同类型中的第n个同级兄弟元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	匹配同类型中的倒数第n个同级兄弟元素。
:last-child	p:last-child	用来匹配父元素中最后一个子元素。

/*选择的 p 元素是其父元素的第一个 p 元素：*/
p:first-of-type{
    background:#ff0000;
}

/*指定其父级的最后一个p元素的背景色：*/
p:last-of-type{
background:#ff0000;
}

/*指定属于父元素的特定类型的唯一子元素的每个 p 元素：：*/
p:only-of-type{
    background:#ff0000;
}

/*匹配属于父元素中唯一子元素的 p 元素:*/
p:only-child{
    background:#ff0000;
}

/*指定每个 p 元素匹配的父元素中第 2 个子元素的背景色：*/
p:nth-child(2){
    background:#ff0000;
}
/*奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。 在这里，我们为奇数和偶数p元素指定两个不同的背景颜色：*/
p:nth-child(odd)
{
    background:#ff0000;
}
p:nth-child(even)
{
    background:#0000ff;
}
/*使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。 在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：*/
p:nth-child(3n+0){
    background:#ff0000;
}

/*指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色：*/
p:nth-last-child(2){
    background:#ff0000;
}

/*指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：*/
p:nth-of-type(2){
background:#ff0000;
}

/*指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色：*/
p:nth-last-of-type(2){
	background:#ff0000;
}

/*指定父元素中最后一个p元素的背景色：*/
p:last-child{
background:#ff0000;
}

1.3 CSS3伪元素选择器

选择器	示例	示例说明
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分

1.4 CSS3表单选择器

选择器	示例	示例说明
:enabled	input:enabled	匹配每个启用的的元素（主要用于表单元素）。
:disabled	input:disabled	匹配每个禁用的的元素（主要用于表单元素）。
:checked	input:checked	匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
:read-write	input:read-write	用于匹配可读及可写的元素:read-write 选择器选取没有设置 "readonly" 属性的元素。
:read-only	input:read-only	用于匹配设置 "readonly"（只读） 属性的元素；read-only选择器选取设置 "readonly" 属性的元素。
:optional	input:optional	用于匹配可选的输入元素用于匹配没有设置了 "required" 属性的元素
:required	input:required	用于匹配设置了 "required" 属性的元素
:in-range	input:in-range	用于标签的值在指定区间值时显示的样式。
:out-of-range	input:out-of-range	用于标签的值在指定区间之外时显示的样式。
:invalid	input:invalid	选择所有无效的元素
:valid	input:valid	选择所有有效值的属性

/*设置所有type="text"的启用的输入元素的背景颜色：*/
input[type="text"]:enabled{
	background:#ffff00;
}

/*文本输入框禁用设置背景*/
input[type="text"]:disabled{
	background:#dddddd;
}

/*为所有选中的输入元素设置背景颜色：*/
input:checked {
    height: 50px;
    width: 50px;
}

/*如果 input 元素不是只读，即没有 "readonly" 属性，设置输入框样式为黄色:*/
input:read-write{
	background-color: yellow;
}

/*如果 input 元素设置了 "readonly" 属性，设置输入框样式为黄色:*/
input:read-only{
	background-color: yellow;
}

/*如果 input 元素没有设置 "required" 属性，设置其为黄色:*/
input:optional{
	background-color: yellow;
}

/*如果 input 元素设置了 "required" 属性，设置其为黄色:*/
input:required{
	background-color: yellow;
}

/*输入的值在指定区间内时，设置指定样式:*/
<input type="number" min="5" max="10" value="7" />
input:in-range{
	border:2px solid yellow;
}

/*输入的值在指定区间外时，设置指定样式:*/
input:out-of-range{
	border:2px solid red;
}

/*如果 input 元素中的值是非法的，设置样式为红色：*/
<input type="email" value="supportEmail" />
input:invalid{
	border:2px solid red;
}
/*如果 input 元素中输入的值为合法的，设置其为黄色:*/
input:valid{
	background-color: yellow;
}

1.5 CSS3其他选择器

选择器	示例	示例说明
:root	:root	匹配文档的根元素。
:empty	p:empty	选择每个没有任何子级的元素（包括文本节点）。
:target	#news:target	在一个文件中链接到某个元素的URL。元素被链接到目标元素。:target选择器可用于当前活动的target元素的样式。
:not(selector)	:not(p)	匹配每个元素是不是指定的元素/选择器。

/*设置HTML文档的背景色：*/
:root{
    background:#ff0000;
}

/*指定空的p元素的背景色：*/
p:empty{
    background:#ff0000;
}

/*高亮显示锚点或id区域*/
<p><a href="#news1">Jump to New content 1</a></p>
<p><a href="#news2">Jump to New content 2</a></p>
<p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
<p id="news1"><b>New content 1...</b></p>
<p id="news2"><b>New content 2...</b></p>
 p:target{
     font-weight: bold;
     color: red;
}

/*为每个并非<p>元素的元素设置背景颜色：*/
:not(p){
	background:#ff0000;
}

二、CSS3颜色表示方法

1、RGBA方式三原色配色方式:

        在RGB模式上新增了Alpha透明度。

        alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

2、HSL模式:

        语法:HSL(H,S,L)，HSL分别表示色调，饱和度，亮度

        H:0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360

        S:(饱和度)。取值为：0.0% - 100.0%

        L:(亮度)。取值为：0.0% - 100.0%

3、HSLA模式:

        HSL模式上新增了Alpha透明度。

4、transparent

        transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。

        在CSS3中，transparent被延伸到任何一个有color值的属性上。IE8及以下，color属性值为transparent时，文本显示为黑色。