css引入方式及选择器

CSS语法

选择器 {
    属性: 值；
}

CSS引入方式：

1. 外部样式表

<head>
    <link rel="stylesheet" href="样式目录地址">
</head>

　　

2. 内嵌样式表

1 <head>
2     <style>
3            body {
4             }
5             .content {
6             }
7     </style>
8 </head>

3. 行内样式

<div style="color: red;">
</div>

4. 导入样式表

@import url('路径')

导入样式表方式可在同一个文件内导入多个样式表

样式引入优先级：就近原则

选择器

1. 元素选择器

div, p {}

2. id选择器

// 元素id要唯一
<div id='content'></div>

#content {}

3. 类选择器

<div class='content'></div>

.content {}

 

选择器优先级

id > 类 > 元素

层叠样式表

根据优先级（考虑 引入方式、选择器、顺序），相同属性相覆盖，不同属性相叠加。

// 最终文字显示颜色为红色，和类的使用顺序无关，和类样式定义的顺序相关
<span class='blue red'>内容111</span>

.blue {
  color: blue;
}
.red {
  color: red;
}


// 最终文字显示颜色为蓝色，和类的使用顺序无关，和类样式定义的顺序相关
<span class='red blue'>内容111</span>

.red {
  color: red;
}
.blue {
  color: blue;
}

复合选择器

1. 后代选择器

// 使用content类的元素下的li子元素
.content li {}

2. 交集选择器

// div元素上的content类
div.content {}

// 同时具备red,green,blue三个类的元素
.red.green.blue {}

3. 并集选择器

// div元素和p元素以及span元素都设置相同样式
div,p,span{}

伪类选择器

a:link {}

a:visited {}

a:hover {}

a:active {}

div:frist-child {}

p:nth-of-type(n) {}

单冒号伪类，双冒号伪元素

选择器权重

id  100

类  10

元素  1

!important最高，但是要少用。

选择器命名需要规范。 

posted @ 2021-04-21 14:52  泥泥和艾勒是好朋友  阅读(64)  评论(0)    收藏  举报