CSS样式冲突 与 选择器语法

目录

css 样式冲突 排查方式

CSS 导入方式：

一、行内样式导入  定义在元素身上

二、内部样式导入 style标签中定义样式  定义在head标签中

三、外部样式导入 link 元素标签  定义在head标签中

四、导入样式表的方式  @import 方式

五、外部样式导入 与 @import 导入样式表的区别

CSS选择器

一、层次选择器

1.后代选择器 M N

2.子代选择器 M > N

3.兄弟选择器 M ~ N

4.相邻选择器 M + N

5. ::first-letter 选择器

6. ::first-line 选择器

---

css 样式冲突 排查方式

第一步：检查 引用方式是否冲突 行内样式 —> 内部样式 —> 外部样式
第二步：检查 继承是否冲突
第三步：检查 权重是否冲突

---

CSS 导入方式：

一、行内样式导入  定义在元素身上

<h1 style="color:red;">我是行内样式</h1>

二、内部样式导入 style标签中定义样式  定义在head标签中

<style type="text/css">
    body {
        color: red;
    }
</style>

三、外部样式导入 link 元素标签  定义在head标签中

<!-- type属性代表的类型 -->
<!-- rel属性代表的是解析规则 -->
<!-- href属性是引入index.css文本 -->

<link type="text/css" rel="stylesheet" href="index.css">

四、导入样式表的方式  @import 方式

@import 'index.css'

五、外部样式导入 与 @import 导入样式表的区别

外部样式表是先 加载 CSS 再加载 HTML

@import 是先加载 HTML 再加载 CSS

CSS选择器

常用：元素选择器、id选择器、class选择器、群组选择器

一、层次选择器

1.后代选择器 M N

后代选择器，选择 M 元素内部后代的N元素（所有 N 元素）

特点：元素内部查找 子元素

<div>
    <p>我是子元素</p>
    <p>我是子元素1
        <p>我是孙元素</p>
    </p>
</div>

<style type="text/css">
    <!-- 上面所有的p元素的背景颜色都为 红色 -->
    div p { background-color: red; }
</style>

2.子代选择器 M > N

子代选择器，选择 M 元素内部子代的 N 元素 (所有第1级N元素)

特点：元素内部查找 子元素

<div>
    <p>我是子元素</p>
    <p>我是子元素1
        <p>我是孙元素</p>
    </p>
</div>

<style type="text/css">
    /* 上面文本为子元素的p元素的背景颜色都为红色 */
    /* 文本为孙元素的p元素的背景色不会发生改变 */
    div>p { background-color: red; }
</style>

3.兄弟选择器 M ~ N

兄弟选择器，选择 M 元素后所有的同级 N 元素

特点：同级别元素查找

<div>
    <p>Lorem, ipsum.</p>
    <p>Quam, architecto.</p>
    <p>Unde, aspernatur.</p>
    <div class="second">Lorem, ipsum.</div>
    <p>Aspernatur, sunt!</p>
    <p>Aliquid, architecto!</p>
</div>
<style type="text/css">
    /* 文本为：Aspernatur, sunt! 的 p 元素字体颜色为 红色 */
    /* 文本为：Aliquid, architecto! 的 p 元素字体颜色为 红色 */
    .second~p {
        color: red;
    }
</style>

4.相邻选择器 M + N

相邻选择器，选择 M 元素相邻的下一个 N 元素 (M、N 是同级元素)

特点：同级别元素查找

<div>
    <p>Lorem, ipsum.</p>
    <p>Quam, architecto.</p>
    <p>Unde, aspernatur.</p>
    <div class="second">Lorem, ipsum.</div>
    <p>Aspernatur, sunt!</p>
    <p>Aliquid, architecto!</p>
</div>
<style type="text/css">
    /* 文本为：Aspernatur, sunt! 的 p 元素字体颜色为 红色 */
    .second+p {
        color: red;
    }
</style>

5. ::first-letter 选择器

选中文本中的首个 字母 或 文字

<div>
    <p>Lorem, ipsum.</p>
    <p>Quam, architecto.</p>
    <p>Unde, aspernatur.</p>
    <div class="second">Lorem, ipsum.</div>
    <p>Aspernatur, sunt!</p>
    <p>Aliquid, architecto!</p>
</div>
<style type="text/css">
    /* 文本为：Aspernatur, sunt! 的 p 元素中的 A字母 颜色为 红色 */
    .second+p::first-letter {
        color: red;
    }
</style>

6. ::first-line 选择器

选中文本中的首行 字母 或 文字

<div>
    <p>123</p>
    <p>321</p>
</div>
<style>
    /* 第一行P元素的文本内容是：123 颜色为红色 */
    div::first-line {
        color: red;
    }
</style>