五、CSS 选择器

CSS 选择器

颜色取值

• 文字颜色 color
• 背景颜色 background-color

<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>

水平居中

margin: 0 auto;

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

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

选择器
1、复合选择器

（1）后代选择器

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

示例：

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

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

（2）子代选择器

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

示例：

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

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

2、并集选择器

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

示例：

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

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

3、交集选择器

选择器1选择器2: { }

示例：

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

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

4、hover 伪类选择器

鼠标悬停状态

选择器:hover {
}

示例：

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

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

5、Emmet 语法

简写语法，快速生成代码
VS Code 等代码编辑器自带

语法	示例	效果
标签名	div	<div></div>
类选择器	.red	<div class="red"></div>
id 选择器	#one	<div id="one"></div>
交集选择器	p.red#one	<p class="red" id="one"></p>
子代选择器	ul>li	<ul><li></li></ul>
内部文本	ul>li{内容}	<ul><li>Hello</li></ul>
创建多个	ul>li*3	<ul><li></li><li></li><li></li></ul>
创建多个	ul>li{$}*3	<ul><li>1</li><li>2</li><li>3</li></ul>
同级	div+p	<ul><li>1</li><li>2</li><li>3</li></ul>

css提示ex

单词首字母	效果
fw	font-weight
w	width
h	height
bgc	backgroud-color
lh	line-height
w300+h200	width: 300px;height: 200px;