CSS引入方式和选择器及CSS三大特点

CSS引入方式

内联样式/行内样式

把css代码直接写在现有的HTML标签中

<div style="background-color: pink;">我是一个div</div>

缺点：样式与结构冗余
优点：优先级较高

内部样式表

将样式表写到head的style标签中

<style type="text/css">    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

缺点：样式的复用率较低
优点：样式与结构分离

外部样式表 使用link标签引入 属于html标签

将样式表编写到外部的css文件中，然后通过link标签将外部文件引入

<link rel="stylesheet" type="text/css" href="文件的路径"/>

优点：样式与结构分离，解耦；样式的复用率高（框架：例如：bootstrap），共用，定义好的css文件可以应用到多个页面中。

使用@import引入css文件 不推荐 必须放在style标签第一行 属于css标签

<style>
	/*要写在style标签的最前面，否则不会生效 或者直接在外部css文件中直接使用*/
  @import url('./style.css');
</style>

缺点：优先加载html, 再加载css, 兼容性较差 ie5+（属于css）

引入方式的优先级
行内样式 > 内部样式/外部引入（就近原则）

CSS选择器

后代选择器
作用: 找到指定标签的所有特定的后代标签, 设置属性
格式：
标签名称1 标签名称2{
​ 属性:值;
​ }

/* 后代（子代+其它后代）选择器 空格隔开 */
        div p {
            color: brown;
        }

子元素选择器
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式:
​ 标签名称1>标签名称2{
​ 属性:值;
​ }

/* 子代 子元素选择器>隔开(直子代) */
        .div1>p {
            color: aqua;
        }

交集选择器
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
格式:
​ 选择器1选择器2{
​ 属性: 值;
​ }

 /* 交集选择器 */
        /* 标签选择+类选择器 */
        p.p1 {
            color: brown;
        } 

并集选择器
作用: 给所有选择器选中的标签设置属性
​ 格式:
​ 选择器1,选择器2{
​ 属性:值;
​ }

 /* 并集选择器 */
         .p1,#p2 {
            color: rgb(21, 181, 127);
        } 

兄弟选择器
1.相邻兄弟选择器 CSS2
​ 作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
​ 格式:
​ 选择器1+选择器2{
​ 属性:值;
​ }

/* css2选择器 */
         .p1+p {
            color: yellow;
        } 

2.通用兄弟选择器 CSS3
​ 作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
​ 格式:
​ 选择器1~选择器2{
​ 属性:值;
​ }

/* css3兄弟选择器 */
         .p1~p {
            color: brown;
        } 

伪类选择器
伪类以":"开头，用在选择器后，用于指明元素在某种特殊的状态下才能被选中

序选择器（结构伪类选择器）
CSS3中新增的选择器最具代表性的就是序选择器
​ 1.同级别中的第几个
​ :first-child 选中同级别中的第一个标签
​ :last-child 选中同级别中的最后一个标签
​ :nth-child(n) 选中同级别中的第n个标签
​ :nth-child(odd) 选中同级别中的所有奇数
​ :nth-child(even) 选中同级别中的所有偶数
​ :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增

​ 例如(3n+1)分别对应1,4,7…
​ :nth-last-child(n) 选中同级别中的倒数第n个标签
​ :only-child 选中父元素仅有的一个子元素E。仅有一个子元素时生效
​ 注意点: 不区分类型
​
​ 2.同级别同类型中的第几个
​ :first-of-type 选中同级别中同类型的第一个标签
​ :last-of-type 选中同级别中同类型的最后一个标签
​ :nth-of-type(n) 选中同级别中同类型的第n个标签
​ :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
​ :only-of-type 选中父元素的特定类型的唯一子元素

 /* 伪类选择器 使用范围同级别*/
        p:first-child {
            color: darkorange;
        }

        p:last-child {
            color: darkolivegreen;
        }

        p:nth-child(3) {
            color: cadetblue;
        }

        p:nth-child(odd) {
            color: blue;
        }

        p:nth-child(even) {
            color: chartreuse;
        }

        P:nth-child(2n+1) {
            color: blueviolet;
        } 

        /* 同级别同类型 第一个 */
        div:first-of-type {
            color: blue;
        }

动态伪类选择器
E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接 描点上
​ E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于 链接描点上
​ E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
​ E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持 a:hover

a标签的伪类选择器
注意：

1. a标签的伪类选择器可以单独出现也可以一起出现
2. a标签的伪类选择器如果一起出现, 那么有严格的顺序要求
   默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active
   编写的顺序必须要遵守爱恨原则 love hate
3. 如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写

 /* 动态伪类 */
        /* 如果链接没有被访问过 */
        a:link {
            color: aquamarine;
        }

        /* 用户访问过 */
        a:visited {
            color: rgb(255, 64, 0);
        }

        /* 用户鼠标悬浮 */
        a:hover {
            color: darkgoldenrod;
        }

        /* 鼠标按住不动 */
        a:active {
            color: cadetblue;
        }

否定伪类
作用：可以从已选中的元素中剔除出某些元素
​ 语法：
​ :not(选择器)

/* 否定伪类 :not(类名)*/
        p:not(.p2) {
            color: crimson;
        }

伪元素选择器
使用伪元素来表示元素中的一些特殊的位置
​ ::after
​ 表示元素的最后边的部分
​ 一般需要结合content这个样式一起使用，
​ 通过content可以向after的位置添加一些内容
::before
​ 表示元素最前边的部分
​ 一般需要结合content这个样式一起使用，
​ 通过content可以向before的位置添加一些内容
​ ::first-letter
​ 为第一个字符来设置一个样式
​ ::first-line
​ 为第一行设置一个样式

<style>
        /* 伪元素选择器 */
        p::after {
            content: '我是一个::after';
        }

        p::before {
            content: '我是一个::before';
        }

        /* 首字符样式 */
        P::first-letter {
            color: brown;
            font-size: 28px;
        }

        /* 首行文字样式 */
        p::first-line {
            color: cadetblue;
            font-size: 20px;
        }
    </style>

运行结果：

属性选择器
作用: 根据指定的属性名称找到对应的标签, 然后设置属性
​ 格式:
​ [attribute]

​ [attribute=value]
​ 作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
​ 最常见的应用场景, 就是用于区分input属性

<form action="">
        用户名：<input type="text" name="username">
        密码：<input type="password" name="user-name">

    </form>

<style>
        /* 属性选择器 */
        /* 标签[属性:值] */
        input[type='text'] {
            background-color: burlywood;
        } 

        /* 以什么开头 css2*/
         input[name|='user'] {
            background-color: aqua;
        } 

        /* css3 */
        input[name^='user'] {
            background-color: brown;
        }
    </style>

两者之间的区别:
​ CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
​ CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开

​ -属性的取值是以什么结尾的
​ [attribute$=value] CSS3

​ -属性的取值是否包含某个特定的值
​ [attribute~=value] CSS2
​ [attribute*=value] CSS3
​ 两者之间的区别:
​ CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
​ CSS3中的只要包含value就可以找到

通配符选择器

​ 作用: 给当前界面上所有的标签设置属性
​ 格式:
​ *{
​ 属性:值;
​ }
​ 注意点:
​ 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上 的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器

组合选择器

​ 多个选择器组合使用。例如 “div.one” 表示class为one的div元素

CSS三大特点

继承性
作用：给父元素设置一些属性，子元素也可以使用。
注意点：
1.并不是所有的属性都可以继承，只有以color/font-/text-/line-开头的属性才可以继承
3.继承中的特殊性
3.1 a标签的文字颜色和下划线是不继承的，当做子元素
3.2 h标签的文字大小是不能继承的，在做子元素的时候

<div>
  <a href="https://www.baidu.com">百度一下</a>
  <p>我是p标签</p>
  <h1>我是h1标签</h1>
</div>

层叠性
作用：层叠性就是CSS处理冲突的一种能力
注意点：层叠性只有在多个选择器中“同一个白标签”，然后又设置了“相同的属性”，才会发生的层叠性。

优先级
1.!import 优先级最高
2. 内联样式，如: style=“…”，权值为1000。
​ 3.ID选择器，如：#content，权值为0100。
4.类，伪类、属性选择器，如.content，权值为0010。
​5.标签选择器、伪元素选择器，如div p，权值为0001。
​6.通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。
7.继承的样式没有权值

其它情况
（1）id多的，选择器优先级高
（2）如果id的个数一样，那么再看类名的个数，类名个数多的优先级高
（3）如果类名的个数一样，那么再看标签的个数，标签名称个数多的优先级高
（4）如果id个数一样，类名个数也一样，标签名称个数也一样，那么就不会继续往下计算了，那么此时谁写再后面听谁的（也就是说优先级如果一样，那么谁写在后面听谁的）

注意点:
​ 只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的