CSS基础（引入和选择器）

本章重点写了CSS如何引入以及引入的优先级，有哪些选择器以及这些选择器如何使用

目录

引入方式

1.行内引入 在标签里面直接加style

2.内联式 在head头部加style,下面加标签名

3.外联式 link-css引入

选择器

*通配符选择器（全局选择器）

标签选择器

类选择器

id选择器

层级选择器

兄弟选择器

伪类选择器

属性选择器

---

引入方式

1.行内引入 在标签里面直接加style

<p title="行内引入"  style="background-color: rgb(0, 170, 28);;height: 50px;">行内引入</p>

2.内联式 在head头部加style,下面加标签名

<style>
        p{
            background-color: red;
        }
</style>

3.外联式 link-css引入

优先级 行内引入方式，优先级最高 内联式和外联式谁在后面谁生效

<link rel="stylesheet" href="demo1.css">

选择器

*通配符选择器（全局选择器）

一般用于浏览器的默认样式

*{
    margin: 0;
    padding: 0;
}

标签选择器

h1-h6 div ul li span等等

p{
    font-size: 28px;
}

类选择器

.classname{
    width: 500px;
    height: 200px;
    background-color: rgb(218, 211, 211);
    color: purple;
    font-size: 21px;
}

id选择器

#box1{
    font-size: 28px;
}

层级选择器

1.子代 >

2.后代 空格

.ul1>li{
    color: red;
}
.ul2 li{
    color: aqua;
}

兄弟选择器

1.相邻兄弟 + 只选择下面的一个

2.通用兄弟 ~ 把下面的全都选择上

.ul3 + li{
    color: aquamarine;
}
.ul3 ~ li{
    color: blue;
}

伪类选择器

.ul3:hover{
    cursor: pointer;
}
.ul3:hover ~li{
    color: brown;
}

属性选择器

[title]{
    color: black;
}

!important 设置最高优先级 一般不建议使用

*优先级最低 标签选择器<.class<#id<行内优先级

组合选择器时按优先级顺序叠加 谁大谁生效