Css选择器

Css Selector

Css选择器中有8种基本选择器与其他选择器。

Css选择器的格式如下：

selector{
   
	property1: value1;
	property2: value2;
	...		 : ...	 ;
}复制

基本选择器

元素选择器 (Element Selector)

元素选择器

优点：大批量处理元素。

缺点：范围太大，过于笼统。

Example

实例 1：

适用于所有 html 元素的样式

* {
   
    margin: 0;
    padding: 0;
}复制

实例 2 ：

适用与所有 div 标签的样式

div {
   
	color: red;
}复制

实例 3 ：

适用于所有 p 标签的样式

p {
   
	color: blue;
}复制

元素选择器 是 属性选择器 的特例。

属性选择器 (Property Selector)

属性选择器格式：

Element[attribute]{
    
    property1: value1;
    ... : ... ;
}复制

Example

==普通==属性选择器：

适用于所有含有 id 属性的 div 标签

div[id] {
   
	color: blue;
}复制

适用于所有含有 class 属性的 p 标签

p[class] {
   
	color: pink;
}复制

根据==属性前缀==进行读取的属性选择器：

适用于所有 id 属性前缀为 melody 的 div 标签

div[id^=melody] {
   
	color: white;
}复制

根据==属性结尾==进行读取的属性选择器：

适用于所有 class 属性结尾为 tail 的 p 标签

p[class$=tail] {
   
	color: aquamarine;
}复制

根据==属性部分内容==进行读取的属性选择器：

适用于所有 id 属性种包含 content 的 div 标签

div[id*=content] {
   
	color: blue;
}复制

根据==属性准确内容==进行读取的属性选择器：

适用于所有 id 属性为 content 的 div 标签

div[id=content] {
   
	color: black;
}复制

根据==元素特殊属性==进行读取的属性选择器：

该种属性选择器是 特殊的 根据 属性准确内容 进行读取的属性选择器。

该种属性选择器对于输入框等用于用户交互的标签作用更大。

适用于所有 type 类型为 text 的 input 标签

input[type=text] {
   
	width: 20px;
}复制

ID选择器 (ID Selector)

ID选择器

优点：精确处理

缺点：只能处理ID为此的，处理过于唯一

Example

普通 ID选择器：

适用于 id 为 testid 的标签

#testid {
   
	color: beige;
}复制

==精确定位==的ID选择器：

适用于 id 为 testid 的 div 标签

div#testid {
   
	font-size: 40px;
}复制

CLASS选择器 (CLASS Selector)

Example

==普通==CLASS选择器：

适用于所有 class 属性为 testclass 的标签

.testclass {
   
	color: red;
}复制

==精确定位==的CLASS选择器：

适用于所有 class 属性为 testclass 的 div 标签

div.testclass {
   
	color复制