part1 ：css选择器

HTML+CSS+JavaScrip

[没看这个，但是写完之后发现这个好全]((8条消息) CSS入门学习笔记+案例_itboy-CSDN博客)

什么是CSS

学习方法

1. CSS是什么
2. CSS怎么入门
3. CSS选择器（重点）
4. 美化网页（文字，阴影，超链接、列表…）
5. 盒子模型
6. 浮动
7. 定位
8. 网页动画（特效）

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体，颜色，

CSS 发展史

1.0

2.0 DIV+CSS,HTML与CSS结构分离的思想，网页变得简单，SEO

2.1 浮动、定位

3.0 圆角、阴影、动画…浏览器兼容性

​ 狂神说这个是标准形式

快速入门

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

css和html连接方式

多建议css样式代码和html代码分开写

css优势

1. 内容和表现分离

2. 网页结构表现统一，可以实现复用

3. 样式十分丰富

4. 建议使用独立html和css文件

5. 利用SEO容易被搜索引擎收录

CSS的3中导入方式

1. 行内样式 在标签原书中编写一个样式属性

<h1 style="color:red">标题</h1>

优先级：就近原则

外部样式幽两种写法

1. @import

选择器

作用：选择页面上的某一个或某一类元素

基本选择器

1. 标签选择器：选择页面上的所有同标签的内容

       <style>
   	  h1{
       		background:red
       	}
       </style>
   <h1 class="ar">标题</h1>
   

2. 类选择器 class：跨标签

   .class名称：可以多个标签归类，不用单独设形式，可设置相同的类，跨标签实现

   <style>
   	.ar{
   		background:#121212
   		}
   </style>
   <h1 class="ar">标题</h1>
   

3. id选择器：全局唯一

#id名称 id不能多个同id，只能单独一个保证唯一性

三种的优先级

id选择器>class选择器>标签选择器

层次选择器

1. 后代选择器

   /*后代选择器*/
   body p{
       background:red;
   }
   

2. 子选择器

   body>p{
   background: yellow;
   }
   

3. 相邻兄弟选择器

   .a+p{
   background: yellow;
   }
   

   .class名+相邻的标签(向下相邻)

4. 通用选择器

   .class~标签名（选中元素向下的所有标签）比第三个好用

   .a~p{
   background: yellow;
   }
   

结构 伪类选择器

<style>
/*ul的第一个子类元素*/
     ul li:first-child{
     color:red
     }
     /*ul的最后一个子类元素*/
     ul li:last-child{
     background:yellow}
     /*定位到父元素，选择当前的第一个元素
        选择当前p远胜于的腹肌原色，选中父级元素的第一个，并且是当前元素才生效*/
        p:nth-child(2){
        background: #2755ff
        }
        /*选中父元素下的p元素的第二个*/
        p:nth-of-type(1){
        background: blue}
</style>

属性选择器

1. 选中包含id属性的a元素:

    ```html
       a[id] {
                background-color: #fff;
            }
    ```
   

2. 选中id为AAA属性的a元素:

    a[id="AAA"] {
        background-color: #fff;
    }

3. 选中href属性可以包含www.baidu的a元素:

    a[href~="www.baidu"] {
        background-color: orange;
    }

4. 选中href属性以world单词开头的a元素，该值必须包含整个world:

    a[href|="world"] {
        background-color: orange;
    }

5. 选中href属性以https开头的a元素:

     a[href^="https"] {
        background-color: orange;
    }

6. 选中href属性以.com结尾的a元素

    a[href$=".com"] {
        background-color: orange;
    }

7. 选中href属性包含baidu的a元素：

    a[href*="baidu"] {
        background-color: orange;
    }

= 绝对等于

*= 包含这个元素

^= 以这个开头

$= 以这个结尾