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