CSS简单介绍与常用的选择器

文章目录

• css3简介
• 使用语法
• css的引入方式
• css选择器
• css的三大特性
• 总结

---

前言

学习css我们必须掌握选择器的基本使用方式，了解选择器的作用

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、css是什么？

CSS 是层叠样式表，是一个用于修饰文档可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。

HTML和CSS之间的关系：HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 CSS样式是表现。

二、css的语法

CSS的属性和值都是大小写敏感的。属性与值通过分号“:”分隔开。将多个CSS声明样式写在一起，每个CSS声明通过“;”分隔开，最后一个css声明无需使用“;”分隔开。

选择器 ：HTML 元素的名称位于开始标签里面。它可以为一个或多个需要添加样式的元素。

声明 ：一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性 ：改变HTML元素样式的途径。

属性的值 ：在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值。

三.css的引入方式

内联样式（行内样式）

缺点：样式与结构冗余度高

优点：优先级高

代码如下（示例）： 

<div style="color:red">设置文字的颜色为红色</div>

 内部样式

缺点：样式的复用率较低

优点：样式与结构分离

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

注意:

  -style标签要写在head标签的开始标签和结束标签之间

-style标签中的type属性其实可以不用写, 默认就是type="text/css"

-设置样式时必须按照固定的格式来设置 key: value;其中:不能省略, 分号大多数情况下也不能省略

 外部样式表

优点：样式与结构分离，解耦；样式的复用率高，可以应用到多个页面中。

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

 引入方式的优先级：行内样式>内联样式/外部引入。

就近原则：哪一种设置方式距离元素最近，谁的优先级更高。

四.css选择器

标签选择器
        根据指定的标签名称, 然后设置属性。 ​ 格式: ​ 标签名称{ ​ 属性:值; ​ }

注意：

        1.每个标签都设置一个属性叫id，id不建议重复

        2.使用id时前面要加上一个#号

        3.id名称有一个规范

                3.1 id只能由字母、下划线、数字组成

                3.2 id不能以数字开头、不能是标签名称

类选择器

        根据指定的类名匹配对应的标签。格式: ​ .类名{ ​ 属性:值; ​ }

注意：

        1.每个标签都有一个属性叫class

        2.class的名称是可以重复的

        3.使用class选择器名称前面加上点号"."

        4.类名规范和id规范一样

        5.每个标签可以同时绑定多个类名。格式: ​ <标签名称 class="类名1 类名2 ...">

后代选择器

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

注意：

        1.后代选择器必须用空格隔开

        2.在该标签里面的都是后代

        3.后代选择器不仅可以使用标签名称也可以使用其他选择器

        4.后代选择器可以通过空格一直延续下去

子元素选择器

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

注意：

        1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签 ​

        2.子元素选择器之间需要用>符号连接, 并且不能有空格 ​

        3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器 ​

        4.子元素选择器可以通过>符号一直延续下去

并集选择器

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

注意：

        1.并集选择器必须使用逗号,来连接 ​

        2.选择器可以使用标签名称/id名称/class名称

兄弟选择器

        给指定选择器后面紧跟的那个选择器选中的标签设置属性 ​ 格式: ​ 选择器1+选择器2{ ​ 属性:值; ​ }

注意：

        1.相邻兄弟选择器必须通过+连接 ​

        2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

伪类选择器：

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

序选择器（结构伪类选择器）：

        CSS3中新增的选择器最具代表性的就是序选择器 ​

       1.同级别中的第几个 ​

                :first-child 选中同级别中的第一个标签 ​ :last-child 选中同级别中的最后一个标签 ​ :nth-child(n) 选中同级别中的第n个标签 ​ :nth-child(odd) 选中同级别中的所有奇数 ​ :nth-child(even) 选中同级别中的所有偶数 ​ :nth-child(xn+y) x和y是用户自定义的, 而n是一个计数器, 从0开始递增。: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个标签

动态伪类选择器：

         E:link（链接伪类选择器）：选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接 描点上 ​

        E:visited（链接伪类选择器 ）：选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于 链接描点上 ​

        E:active（用户行为选择器）：选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 ​

        E:hover （用户行为选择器）： 选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持 a:hover

伪元素选择器：

        使用伪元素来表示元素中的一些特殊的位置 ​ ::after ​ 表示元素的最后边的部分 ​ 一般需要结合content这个样式一起使用， ​ 通过content可以向after的位置添加一些内容

        ::before ​ 表示元素最前边的部分 ​ 一般需要结合content这个样式一起使用， ​ 通过content可以向before的位置添加一些内容 ​

        ::first-letter ​ 为第一个字符来设置一个样式 ​

        ::first-line ​ 为第一行设置一个样式

属性选择器：

        

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

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

input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">

---