1. 引入css的四种方式

内联、内嵌、外联、导入
1、外联：用link标签外联写好的css文件

<link rel="stylesheet" href="css/first.css">

2、内嵌：在style标签里写css

    <style>
        /*在这里写css*/
        h1{
      
      
            color: coral;
        }
        </style>

3、导入：在style用import导入写好的css文件

<style>
        /*导入*/
        /*@import "css/first.css";*/
 
        </style>

4、内联：直接在标签属性后加上style属性值，写样式

<h1 style="color: red">我是标签</h1>

1.1优先级：内联>内嵌=外联>导入

代码的顺序以及选择器的优先级会影响页面的样式效果。内嵌和外联的优先级一样，但是根据就近原则以及代码的执行效果。

2. css选择器

选择器的语法结构为：

选择器 {
            属性：属性值；
        }

2-1 简单选择器

2-1-1 标签选择器

标签选择器如；如：body,div,p,ul,li，h1{}

h1{
            color: red;
            font-size: 10px;
        }

2-1-2 id选择器

id选择器以"#"开头，后面跟选择器所取名字

#d1{
            color: coral;
            font-size: 18px;
        }
 <h1 id="d1">这是id选择器</h1>

优先级：id选择器的优先级>类选择器>标签选择器
选择器不同的条件下，会先执行选择器的优先级而影响到引入的执行顺序

2-1-3 类选择器（class）

类选择器class，以"."开头，后面跟选择器所取名字

.nv{
          color: crimson;
        }
<h1 class="nv">这是类选择器</h1>

2-2 复合选择器

复合选择器由多种简单选择器组成

2-2-1 并集选择器

简答选择器用逗号","隔开，表示同时选中多个元素。

h1,h2,h3{
            color: red;
            }

2-2-2 交集选择器

选择的元素要同时满足多个条件。表示既能被选择器1选中，又能被选择器2选中。
注意选择器之间要紧挨着，同时若有标签选择器，标签选择器必须放在前面

<style>
	p.pink{
      
      
           	 color: green;
        	 }      
	p.pink,div p{
      
        
            font-size: 20px;
            color: purple;
             }
</style>
<body>
<div>
    <p>我是第一个文本</p>
</div>
<p class="pink">我是一个p标签</p>
</body>

2-3 属性匹配选择器

1.原生属性[]
2.自定义属性[]
3.开头匹配^
4.结尾匹配$
5.包含匹配*

2-3-1 全匹配

<style>
	input[type='text']{
      
      
        background-color:red;
    }
</style>
<body>
   <input type="text">
</body>

效果图：
在这里插入图片描述

2-3-2 自由匹配

<style>
div[wode='nihao']{
      
      
       width:100px;
       height:100px;
       background-color:red;
   }
</style> 
<body>
<div wode="nihao">我是自定义的div</div>
</body>

效果图：
在这里插入图片描述

2-3-3 开头匹配符号为^

选择以ni开头的div：

<style>
div[wode^='ni']{
      
      
        width:100px;
        height:100px;
        background-color:green;
    }
</style>
<body>
<div wode="nihao"></div>
</body>

效果图：
在这里插入图片描述

2-3-4 结尾匹配符号为$

选择以"ao"结尾的div：

<style>
div[wode$='ao']{
      
      
           width:100px;
           height:100px;
           background-color:purple;
        }
</style>
<body>
<div wode="nihao"></div>
</body>

效果图：
在这里插入图片描述 pic_center

2-3-5 包含匹配(模糊选择器）符号为*

选择包含"h"的div：

<style>
div[wode*='h']{
      
      
      width:100px;
      height:100px;
      background-color:orange;
   }
</style>
<body>
<div wode="nihao"></div>
</body>

效果图：
在这里插入图片描述

2-4 伪类选择器

2-4-1结构性伪类选择器

2-4-1-1 first-of-type：第一

选中在父元素中第一个出现的特定元素。
section>div:first-of-type：是section中第一个出现的div；
只要是该类型元素的第一个就行了，不要求是是第一个子元素。

<style>
section>div:first-of-type {
      
      
            color: blue;
        }
</style>
<body>
<section>
    <div>我是第一个p标签</div>
    <p>我是p标签</p>
    <div>我是第二个p标签</div>
    <div>我是第三个p标签</div>
</section> 
</body>

会选中我是第一个p标签的div
在这里插入图片描述
效果图：

2-4-1-2 last-of-type：最后

选中在父元素中最后出现的特定元素。
section>div:last-of-type：在section中最后一个出现的div。

<style>
    section>div:last-of-type {
      
      
            color: pink;
        }
  </style> 
  <section>
    <div>我是第一个p标签</div>
    <p>我是p标签</p>
    <div>我是第二个p标签</div>
    <div>我是第三个p标签</div>
</section>

会选择section中的最后一个div，我是第三个p标签会被选中，改变样式。
在这里插入图片描述

效果图：
在这里插入图片描述

2-4-1-3 nth-of-type()

选定第几个指定的元素。如div：nth-of-type(2)表示选择第二个div。
section>div:nth-of-type(2)：选择section下的第二个div。

<style>
     section>div:nth-of-type(2){
      
      
       color: red;
   }
</style>
<body>
    <section>
        <div>我是第一个p标签</div>
        <p>我是p标签</p>
        <div>我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>    
</body>

选中的是我是第二个p标签。
在这里插入图片描述

效果图：
在这里插入图片描述

2-4-1-4 nth-child()

nth-child()：第几个儿子。
在这个标签中，注意：选中的是第几个儿子并且这个儿子是不是前面的标签或者类，nth-child()和nth-of-type()的区别就是：nth-of-type()可以选择指定类型的元素，而nth-child()在选取的时候是不限定类型的。
比如：这里的section>div:nth-child(2)是选取不到，改变不了样式的。

<style>
     section>div:nth-child(2){
      
      
       color: red;
   }
</style>
<body>
    <section>
        <div>我是第一个p标签</div>
        <p>我是p标签</p>
        <div>我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>    
</body>

在这里插入图片描述
发现，并没有选中，改变样式。
因此，我们可以大致这样理解，因为nth-child()在选取的时候是不限定类型的，在我们的html里第二个儿子是个p标签不是div所以不会定位到我是p标签这个。要先找儿子，再找div是几个。如果我们要让我是第二个p标签就要写为section>div:nth-child(3)。

<style>
     section>div:nth-child(3){
      
      
       color: red;
   }
</style>
<body>
    <section>
        <div>我是第一个p标签</div>
        <p>我是p标签</p>
        <div>我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>    
</body>

效果图：
在这里插入图片描述
这也是nth-child()的弊端，当然也可以用nth-of-type()限定类型，来改变样式。

2-4-1-5 first-child()

first-child()第一个儿子

<style>
       section>div:first-child{
      
      
        color: red;
       }
</style>
<body>
    <section>
        <div>我是第一个p标签</div>
        <p>我是p标签</p>
        <div>我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>    
</body>

在这里插入图片描述

2-4-1-6 last-child()

last-child()最后一个儿子

<style>
       section>div:last-child{
        color: green;
       }
</style>
<body>
    <section>
        <div>我是第一个p标签</div>
        <p>我是p标签</p>
        <div>我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>   
</body>

在这里插入图片描述

2-4-1-7 only-child

only-child 只有一个儿子
section>div:only-child：选择section里只有一个儿子并且是div的。

<style>
       section>div:only-child{
      
      
        color: orange;
        font-weight: bolder;
       }
</style>
<body>
    <section>
        <div>我是第一个p标签</div>
        <p>我是p标签</p>
        <div>我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>
    <section>
        <div>我只有一个儿子</div>
    </section>  
</body>

在这里插入图片描述
效果图：

2-4-2 其他伪类选择器

2-4-2-1 :checked

input:checked 选择每个被选中的 input 元素
在这里插入图片描述

2-4-2-2 not(反选）

选择非指定元素。 section div:not(#d1)：section里id选择器不是d1的div都会被选。

<style>
    section div:not(#d1){
       color: red;
    }
</style>
<body>
    <section>
        <div id="d1">我是第一个p标签</div>
        <p>我是p标签</p>
        <div>我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>
    <section>
        <div>我只有一个儿子</div>
    </section>  
</body>

效果图：
在这里插入图片描述

2-4-2-3 a:hover

a:hover 选择鼠标悬停其上的链接。

<style>
    a:hover{
        color:orange;
    }
</style>
<body>
    <a href="www.baidu.com">这是一个链接</a> 
</body>

鼠标停在上面的效果：
在这里插入图片描述

2-4-2-4 a:link

a:link 选择所有未被访问的链接。

<style>
a:link{
    color:green;
}
</style>
<body>
    <a href="www.baidu.com">这是一个链接</a> 
</body>

效果图：
在这里插入图片描述

2-4-2-4 a:active

已选择的链接

<style>
a:active  {
    color:purple;
    }
</style>
<body>
    <a href="www.baidu.com">这是一个链接</a> 
</body>

效果图：
在这里插入图片描述

2-4-2-4 a:visited

a:visited:已访问的链接

2-5 关系选择器

2-5-1 后代选择器

多个简单选择器用空格隔开，这里的后代不只是包含儿子，孙子、儿子的孙子都会被选中，是所有后代只要有就会被选中。

div p{   /*div的后代中有p标签的都会被选中*/
            color: coral;
        }

2-5-2 直系选择器

简单选择器用大于符号">"隔开，这里是只有儿子，是直系的。

div>p{   /*/*选择div的儿子中的p标签*/*/
            color: darkblue;
        }

优先级：直系选择器=后代选择器。根据代码的先后顺序来判断

2-5-3 相邻兄弟选择器（“+”）

用＋号来表示相邻兄弟选择器，选中相邻的一个兄弟。
同时也要注意相邻的兄弟是不是在前面的标签或者类里，讲解如下：

<style>
       #d1+div{
      
      
        color: red;
       }
       #d2+div{
      
      
        color: blue;
       }
</style>
<body>
    <section>
        <div id="d1">我是第一个p标签</div>
        <p>我是p标签</p>
        <div id="d2">我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>
    <section>
        <div>我只有一个儿子</div>
    </section>  
</body>

效果图如下：
在这里插入图片描述可以发现我们的第一个相邻兄弟选择器并没有起作用，这是因为id选择器d1的相邻元素并不是div而是p标签，不在要选择的div标签里，所以选不中。

2-5-4 普遍兄弟选择器（“~”）

选中所有的弟弟。

<style>
       #d1~div{
      
      
        color: red;
       }
</style>
<body>
    <section>
        <div id="d1">我是第一个p标签</div>
        <p>我是p标签</p>
        <div id="d2">我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>
    <section>
        <div>我只有一个儿子</div>
    </section>  
</body>

效果图：
在这里插入图片描述

2-6 伪元素选择器

2-6-1 ::selection

选中的元素。

<style>
        ::selection{
      
      
            background-color: blueviolet;
            color:white;
        }
</style>
<body>
    <section>
        <div id="d1">我是第一个p标签</div>
        <p>我是p标签</p>
        <div id="d2">我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>
    <section>
        <div>我只有一个儿子</div>
    </section>  
</body>

选中的情况下样式改变：
在这里插入图片描述

2-6-2 ::after

比如span::after 在每个 span 元素之后插入内容。要使用content属性来插入内容
在这里插入图片描述
效果图：

2-6-3 ::first-letter

span::first-letter 选择每个span元素的首字母。

<style>
    p:first-letter{
      
      
       color: red;
   }
</style>
<body>
    <section>
        <div id="d1">我是第一个p标签</div>
        <p>我是p标签</p>
        <p>哈哈哈哈</p>
        <p>Day</p>
        <p>Day</p>
        <p>Up</p>
        <div id="d2">我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>
    <section>
        <div>我只有一个儿子</div>
    </section>  
</body>

效果图：

在这里插入图片描述

2-6-4 ::first-line

p::first-line 选择每个 p>元素的首行。

2-6-5 ::before p::before

::before p::before 在每个 p 元素之前插入内容。要使用content属性来插入内容

<style>
    span::before{
      
      
       content: "这是我添加的文字";
   }
</style>
<body>
    <section>
        <div id="d1">我是第一个p标签</div>
        <p>我是p标签</p>
        <span>Hahaha</span>
        <div id="d2">我是第二个p标签</div>
        <div>我是第三个p标签</div>
    </section>
    <section>
        <div>我只有一个儿子</div>
    </section>  
</body>

效果图

3.css选择器的优先级

id选择器(#my)>类选择器(.my)>标签选择器(div,h1,p)>子选择器(ul < li)>后代选择器(li a)>伪类选择(a:hover,li:nth-child)
优先级相同时，则采用就近原则，选择最后出现的样式;

css：超全选择器详细介绍以及优先级

1. 引入css的四种方式

1.1优先级：内联>内嵌=外联>导入

2. css选择器

2-1 简单选择器

2-1-1 标签选择器

2-1-2 id选择器

2-1-3 类选择器（class）

2-2 复合选择器

2-2-1 并集选择器

2-2-2 交集选择器

2-3 属性匹配选择器

2-3-1 全匹配

2-3-2 自由匹配

2-3-3 开头匹配 符号为^

2-3-4 结尾匹配 符号为$

2-3-5 包含匹配(模糊选择器）符号为*

2-4 伪类选择器

2-4-1结构性伪类选择器

2-4-1-1 first-of-type：第一

2-4-1-2 last-of-type：最后

2-4-1-3 nth-of-type()

2-4-1-4 nth-child()

2-4-1-5 first-child()

2-4-1-6 last-child()

2-4-1-7 only-child

2-4-2 其他伪类选择器

2-4-2-1 :checked

2-4-2-2 not(反选）

2-4-2-3 a:hover

2-4-2-4 a:link

2-4-2-4 a:active

2-4-2-4 a:visited

2-5 关系选择器

2-5-1 后代选择器

2-5-2 直系选择器

2-5-3 相邻兄弟选择器（“+”）

2-5-4 普遍兄弟选择器（“~”）

2-6 伪元素选择器

2-6-1 ::selection

2-6-2 ::after

2-6-3 ::first-letter

2-6-4 ::first-line

2-6-5 ::before p::before

3.css选择器的优先级

猜你喜欢

2-3-3 开头匹配符号为^

2-3-4 结尾匹配符号为$