-
标签选择器 (Element Selector):
- 语法:
element { property: value; }
- 案例: Css
1p { color: green; }
- 说明:这个例子将会把所有
<p>
标签内的文本颜色设置为绿色。
- 语法:
-
类选择器 (Class Selector):
- 语法:
.class-name { property: value; }
- 案例: Css
1.highlight { background-color: yellow; }
- 说明:这个例子将会把所有拥有
highlight
类的元素背景色设置为黄色。
- 语法:
-
ID选择器 (ID Selector):
- 语法:
#id-value { property: value; }
- 案例: Css
1#main-header { font-size: 24px; }
- 说明:这个例子将会把ID为
main-header
的元素的字体大小设置为24像素。
- 语法:
-
后代选择器 (Descendant Selector):
- 语法:
ancestor descendant { property: value; }
- 案例: Css
1div p { margin-bottom: 1em; }
- 说明:这个例子将会为
<div>
元素内部的所有<p>
子元素设置底部外边距为1em。
- 语法:
-
子元素选择器 (Child Selector):
- 语法:
parent > child { property: value; }
- 案例: Css
1ul > li { list-style-type: none; }
- 说明:这个例子将会取消所有直接位于
<ul>
元素下的<li>
元素的项目符号样式。
- 语法:
-
属性选择器 (Attribute Selector):
- 语法:
[attribute=value] { property: value; }
- 案例: Css
1a[target="_blank"] { color: blue; }
- 说明:这个例子将会把所有目标属性
target
值为"_blank"
的链接文本颜色设置为蓝色。
- 语法:
-
伪类选择器 (Pseudo-class Selector):
- 语法:
selector:pseudo-class { property: value; }
- 案例: Css
1a:hover { text-decoration: underline; }
- 说明:这个例子将会在鼠标悬停时给所有链接添加下划线。
- 语法:
-
包含指定内容的选择器 (Substring Matching Attribute Selector)
- 语法:
[attribute*="value"] { property: value; }
- 案例: Css
1input[type*="password"] { border-color: red; }
- 说明:这个例子将会把所有类型属性中包含"password"的输入框的边框颜色设置为红色。
- 语法:
-
伪元素选择器 (Pseudo-element Selector)
- 语法:
selector::pseudo-element { property: value; }
- 案例: Css
1p::first-letter { font-size: 2em; }
- 说明:这个例子将会使所有段落的第一个字母字体大小加倍。
- 语法:
-
结构性伪类选择器 (Structural Pseudo-classes)
- 例如:
:nth-child(n)
、:nth-of-type(n)
、:first-of-type
、:last-of-type
等。 - 案例: Css
1li:nth-child(odd) { background-color: lightgray; }
- 说明:这个例子将会把所有列表项中奇数位置的元素背景色设置为浅灰色。
- 例如:
-
状态伪类选择器 (State Pseudo-classes)
- 例如:
:enabled
、:disabled
、:checked
、:focus
等。 - 案例: Css
1input:disabled { opacity: 0.5; }
- 说明:这个例子会使所有禁用状态的输入框透明度降低至50%。
- 例如: