css选择器

元素选择器

• 语法

元素 {样式声明 }

• 示例

 span {
	background-color: #00ff00;
  	color: #ffffff;
}

类选择器

• 语法

.类名 {样式声明 }

• 示例

span.classy {
  background-color: DodgerBlue;
}

ID选择器

• 语法

#id属性 {样式声明 }

• 示例

span#identified {
  background-color: DodgerBlue;
}

通配选择器

• 语法

	ns|* - 会匹配ns命名空间下的所有元素
	*|* - 会匹配所有命名空间下的所有元素
	|* - 会匹配所有没有命名空间的元素

• 示例

*[lang^=en]{color:green;}
*.warning {color:red;}
*#maincontent {border: 1px solid blue;}

属性选择器

• 语法

	span[属性] {
  		color: purple;
	}

• 示例

/* 存在title属性的<a> 元素, 如下选择 */
a[title] {
  color: purple;
}

相邻兄弟选择器

• 语法

前方元素 + 目标元素 {样式声明 }

• 示例

/* 图片后面紧跟着的段落将被选中 */
img + p {
  font-style: bold;
}

通用兄弟选择器

• 语法

元素 ~ 元素 {样式声明 }

• 示例

/* 在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素 */
p ~ span {
  color: red;
}

子选择器

• 语法

元素1 > 元素2 {样式声明 }

• 示例

span { background-color: white; }
div > span {
  background-color: DodgerBlue;
}

后代选择器

• 语法

元素1 元素2 {样式声明 }

• 示例

span { background-color: white; }
div span { background-color: DodgerBlue; }