5、CSS 选择器

1.颜色取值

• 文字颜色 color
• 背景颜色 background-color | 颜色表示方式 | 表示含义 | 属性值 | | —- | —- | —- | | 关键词 | 预定义的颜色名 | red、green、blue | | rbg 表示法 | 红绿蓝三原色，取值 0-255 | rgb(0,0,0) | | rgba 表示法 | 红绿蓝三原色+透明度，取值 0-1 | rgba(0, 0, 0, 0.5) | | 十六进制表示法 | #开头 | #000000 简写 #000 |

<p style="color: green;">Hello World!</p>
<p style="color: rgb(0, 255, 0);">Hello World!</p>
<p style="color: rgba(0, 255, 0, 0.5);">Hello World!</p>
<p style="color: #00FF00;">Hello World!</p>
<p style="color: #0F0;">Hello World!</p>

clipboardErrorCopied
Hello World!
Hello World!
Hello World!
Hello World!
Hello World!

2.水平居中

margin: 0 auto;

opy to clipboardErrorCopied
div、p、h 需要设置元素的宽度，否则会自动撑满父元素

<div
     style="margin: 0 auto; width:200px; border: 1px solid #cccccc; text-align: center;"
     >
  Hello World!
</div>

opy to clipboardErrorCopied

3.选择器

（1）复合选择器

<1>后代选择器

父选择器 后代选择器: {
}

opy to clipboardErrorCopied
示例：

<style>
  div span {
    color: green;
  }
</style>

<div>
  <span>Hello World!</span>
  <p>
    <span>Hello World!</span>
  </p>
</div>

clipboardErrorCopied

<2>子代选择器

父选择器 > 子代选择器: { }

py to clipboardErrorCopied
示例：

<style>
    div>span {
        color: green;
    }
</style>

<div>
    <span>Hello World!</span>
    <p>
        <span>Hello World!</span>
    </p>
</div>

（2）并集选择器

选择器1, 选择器2: {
}

to clipboardErrorCopied
示例：

<style>
  p,
  span {
    color: green;
  }
</style>

<div>
  <span>Hello World!</span>
  <p>Hello World!</p>
</div>

py to clipboardErrorCopied

（3）交集选择器

选择器1选择器2: { }

boardErrorCopied
示例：

<style>
  span.title {
    color: green;
  }
</style>

<div>
  <p class="title">Hello World!</p>
  <span class="title">Hello World!</span>
</div>

y to clipboardErrorCopied

（4）hover 伪类选择器

鼠标悬停状态

选择器:hover {
}

py to clipboardErrorCopied
示例：

<style>
    p:hover {
        color: green;
    }
</style>

<div>
    <p>Hello World!</p>
    <span>Hello World!</span>
</div>

to clipboardErrorCopied

（5）Emmet 语法

• 简写语法，快速生成代码
• VS Code 等代码编辑器自带 | 语法 | 示例 | 效果 | | —- | —- | —- | | 标签名 | div |
  | | 类选择器 | .red |
  | | id 选择器 | #one |
  | | 交集选择器 | p.red#one |
  | | 子代选择器 | ul>li |
  | | 内部文本 | ul>li{内容} |
  • Hello
  | | 创建多个 | ul>li3 |
  | | 创建自增 | ul>li{$}3 |
  • 1
  • 2
  • 3
  | | 同级 | div+p |
  |

css 提示