notes_estom/CSS/css-selector.md

元素选择器

元素选择器就是通过 HTML 页面的元素名称来设置 CSS 样式。具体语法如下:

元素名称 { 属性名 : 属性值; }

示例代码:

div {color : red; }

类选择器

类选择器就是通过 HTML 元素的 class 属性值来设置 CSS 样式。具体语法如下:

.class属性值 { 属性名 : 属性值; }

示例代码:

.myDiv {color : red; }

ID选择器

ID选择器就是通过 HTML 元素的 id 属性值来设置 CSS 样式。具体语法如下:

#id属性值 { 属性名 : 属性值; }

示例代码:

#show1 {color : red; }

属性选择器

属性选择器就是通过 HTML 元素的属性名称来设置 CSS 样式。具体语法如下:

[属性名称] { 属性名 : 属性值; }

示例代码:

[name] {color : red; }

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

后代选择器

后代选择器就是设置 HTML 页面的指定元素的后代元素（中间使用空格）的 CSS 样式。具体语法如下:

祖先元素 后代元素 { 属性名 : 属性值; }

示例代码:

div em {color : red; }

子元素选择器

子选择器就是设置 HTML 页面的指定元素的子元素的 CSS 样式。具体语法如下:

祖先元素 > 子元素{ 属性名 : 属性值; }

示例代码:

div > em {color : red; }

相邻元素选择器

相邻元素选择器就是设置 HTML 页面的指定元素的下一个兄弟元素的 CSS 样式。具体语法如下:

指定元素 + 兄弟元素 { 属性名 : 属性值; }

示例代码:

div + div {color : red; }

其他内容

选择器分组

选择器分组就是将不同选择器相同声明的内容“压缩”在一起，得到更简洁的样式表。

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

通配符选择器

CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。

* {color:red;}

值得注意的是: 通配符选择器的性能并不好。