Css和Css选择器的简单介绍

1. CSS3简介

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

2.CSS语法

2.1 CSS声明

CSS功能：为特定的属性设定特定的值

CSS的属性和值都是大小写敏感的，属性和值之间通过冒号":"分隔开

2.2 CSS声明块

CSS声明块：使用花括号"{}“将多个CSS声明包括起来，将多个CSS声明写在一起，每个CSS声明通过分号”;"分隔。

2.3 CSS规则集

由选择器、声明、和属性、属性值构成。

3.CSS的引入方式

3.1 内联样式（行内样式）

优点：优先级高

缺点：样式与结构冗余，不能对样式进行复用，不方便后期维护，不推荐使用

内联样式表是把CSS代码写在HTML标签中，且只对当前标签其效果注意将css声明写入"“双引号中，两个声明间用分号”;"隔开。

<div style="color:red;font-size:14px">
    设置字体颜色为红色，字体大小为14px
</div>

3.2 内部样式表

优点：样式与结构分离，可以同时为多个元素设置样式，方便后期的维护

缺点：样式的复用率较低

内部样式表是编写在head中，将所有的css声明都写在style标签中

<style>    
  p{        
    color:red;        
    background-color:yellow;    
  }
</style>

3.3 外部样式表

优点：样式与结构分离，

外部样式表的方式

1.在外部定义一个CSS文件，在这里写样式，再通过link标签，将该文件引入所需要引入的HTML文件中

特点：解耦；样式的复用率高， 共用，定义好的css文件可以应用到多个页面中

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

2.通过import方式导入Css文件

特点：@import引入方式会先加载html，再加载css，当网络环境较差时，会出导致页面效果较差的现象，所以该方式不建议使用

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

3.4 样式的优先级

行内样式>内部样式/外部引入

就近原则：哪一种样式距离元素最近，谁的优先级高

4. CSS选择器

4.1 标签选择器

作用: 根据指定的标签名称，在当前界面中找到所有该名称的标签， 设置属性
格式:
标签名称{
属性:值;
}
注意点:
1.标签选择器选中的是当前界面中所有的标签，不能单独选中某一个标签

4.2 id选择器

作用: 根据指定的id名称找到对应的标签，设置属性
格式:
#id名称{
属性:值;
}
注意点:
1.每个HTML标签都有一个属性叫做id，每个标签都可以设置id
2.在同一个界面中id是不可以重复的
3.在编写id选择器时一定要在id名称前面加上‘#’
4.id的名称是有一定的规范的
4.1 id的名称只能由字母/数字/下划线，a-z 0-9 _
4.2 id名称不能以数字开头
4.3 id名称不能是HTML标签的名称，不能是a h1 img input …
5.在企业开发中一般情况下如果仅仅是为了设置样式， 我们不会使用id ，因为id是留给js使用的

4.3 类选择器

作用: 根据指定的类名称找到对应的标签，然后设置属性
​ 格式:
​ .类名{
​ 属性:值;
​ }

注意点:
​ 1.每个HTML标签都有一个属性叫做class,，每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
​ 3.在编写class选择器时一定要在class名称前面加上.
​ 4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给CSS设置样式的
​ 6.在HTML中每个标签可以同时绑定多个类名
​ 格式:
​ <标签名称 class=“类名1 类名2 …”>

	   <p class="para1 para2">

7.在企业开发中一个开发人员对类的使用可以看出这个开发人员的技术水平
一般情况下在企业开发中要注重冗余代码的抽取，可以将一些公共的代码抽取到一个类选择器中， 然后让标签和这个类选择器绑定即可

4.4 后代选择器

作用: 找到指定标签的所有特定的后代标签，设置属性
​ 格式:
​ 选择器1 选择器2{
​ 属性:值;
​ }
​ 先找到所有名称叫做"选择器1"的标签，然后再在这个标签下面去查找所有名称叫做"选择器2"的标签，然后在设置属性
​ 例如：div p{}

注意点:
​ 1.后代选择器必须用空格隔开
​ 2.后代指的是儿子、孙子、重孙子等等，只要是放到指定标签中的都是后代
​ 3.后代选择器可以使用标签名称，也可以使用其它选择器
​ 4.后代选择器不限制元素个数

4.5 子代选择器

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

注意点:
​ 1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
​ 2.子元素选择器之间需要用>符号连接, 并且不能有空格
​ 3.子元素选择器可以使用标签名称，也可以使用其它选择器
​ 4.子元素选择器可以通过>符号一直延续下去

4.6 交集选择器

作用: 给所有选择器选中的标签中，相交的那部分标签设置属性
格式:
选择器1选择器2{
属性: 值;
}
注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称
3.交集选择器仅仅作为了解, 企业开发中用的并不多

4.7 并集选择器

作用: 给所有选择器选中的标签设置属性
格式:
选择器1,选择器2{
属性:值;
}
注意点:
1.并集选择器必须使用,来连接
2.选择器可以使用标签名称/id名称/class名称

4.8 兄弟选择器

相邻兄弟选择器（CSS2）

作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:
选择器1+选择器2{
属性:值;
}
注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签

通用兄弟选择器（CSS3）

作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
格式:
选择器1~选择器2{
属性:值;
}
注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以选中

4.9 伪类选择器

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

4.9.1 序选择器（结构伪类选择器，CSS3新增）

同级别（不区分类型）

• :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 选中父元素仅有的一个子元素，且仅有一个子元素时生效

同级别同类型

• :first-of-type 选中同级别中同类型的第一个标签
• :last-of-type 选中同级别中同类型的最后一个标签
• :nth-of-type(n) 选中同级别中同类型的第n个标签
• :nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
• :only-of-type 选中父元素的特定类型的唯一子元素

4.9.2动态伪类选择器

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

a标签的伪类选择器

1.a标签的状态及对应的伪类选择器：

• 默认状态, 从未被访问过 :link
• 被访问过的状态 :visited
• 鼠标长按状态 :active
• 鼠标悬停在a标签上状态 :hover

2.注意点

• a标签的伪类选择器可以单独出现也可以一起出现
• a标签的伪类选择器如果一起出现，那么需要按严格的顺序要求进行设置，否则会不起作用
  顺序： 默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active
• 如果默认状态的样式和被访问过状态的样式一样，可以缩写

/* 简写格式 */
a{
    color: green;
}
/* link:和 :visited样式一样，可以写成以上的简写格式，代码量减少，开发效率提高*/
/*a:link{*/
    /*color: green;*/
/*}*/
/*a:visited{*/
    /*color: green;*/
/*}*/

4.9.3否定伪类

作用：可以从已选中的元素中剔除出某些元素
语法：
:not(选择器)
例如:
p:not(.hello){
background-color: yellow;
}

将类名为hello的p标签元素剔除，不设置黄色背景颜色

4.10 伪元素选择器

表示元素中一些特殊的位置

• ::after表示元素的最后边的部分，一般需要结合content这个样式一起使用，通过content可以向after的位置添加一些内容
• ::before表示元素最前边的部分，一般需要结合content这个样式一起使用，通过content可以向before的位置添加一些内容
• ::first-letter为第一个字符来设置一个样式，例如需要将英文首字母大写
• ::first-line 为第一行设置一个样式，例如需要将这行设置一个背景颜色等等…

4.11属性选择器

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

获取属性开头的值选择特定的标签：

​ CSS2：[attribute|=value] ，使用这个只能找到name取值是被-号隔开的

​ CSS3：[attribute^=value] ，使用这个只要以value开头的name都能找到

获取属性结尾的值选择特定的标签：

​ CSS3：[attribute$=value]

获取属性的值，查找是否包含该值并选择特定的标签：

​ CSS3：[attribute*=value]，只要包含value就可以找到

​ CSS2：[attribute~=value]，只能找到独立的单词，也就是包含value，并且value是被空格隔开的

<style>
      /* 属性选择 */
        input[type=text] {
            background-color: olivedrab;
        }
        /* 获取属性开头选择特定的标签 */
        /* css2 只能找到被-号隔开的*/
        input[name|=user] {
            color: orange;
        }

        /* css3 只要以user开头的都能找到*/
        /* input[name^=user] {
            color: orange;
        } */
 </style>
<input type="text" name="user-name">123
<input type="text" name="username">321

4.12 通配符选择器

作用: 给当前界面上所有的标签设置属性
格式:
*{
属性:值;
}
注意点

• 通配符选择器是设置界面上所有的标签的属性
• 在设置之前会遍历所有的标签，若当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会使用通配符选择器
• 一般用于清空页面中的padding和margin

4.13 组合选择器

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

5.CSS三大特性

5.1 继承性

给父元素设置一些属性，子元素也可以使用，我们就称之为继承性

注意点

• 不是所有的属性都可以继承,，只有以color/font-/text-/line-开头的属性才可以继承
• 在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
• 继承性中的特殊性
  - a标签的文字颜色和下划线是不能继承的
  - h标签的文字大小是不能继承的

5.2 层叠性

CSS处理冲突的一种能力

注意点

只有在多个选择器选中"同一个标签"，然后又设置了"相同的属性"，才会发生层叠性，即该标签中都有这些属性值，一层一层的叠加在标签上，由优先级决定显示哪一属性值

5.3 优先级

当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时， 如何层叠，显示哪个属性值就由优先级来确定

5.3.1 间接选中（指继承）

继承祖先元素的属性，参照就近原则，谁离目标标签比较近，哪个属性值就层叠在最上面，即显示该属性值

5.3.2 相同选择器(直接选中)

同一类型的选择器，直接选中标签，哪个写在后面就听谁的

5.3.3 不同选择器(直接选中)

不同类型的选择器，直接选中标签，需要通过选择器的优先级来层叠

优先级：!important > ID选择器 > 标签 > 通配符 > 继承 > 浏览器默认

5.3.4 优先级特例（!important）

用于提升某个直接选中标签的选择器中的某个属性的优先级，被指定的属性的优先级提升为最高

注意点

• !important只能用于直接选中，不能用于间接选中
• 通配符选择器选中的标签也是直接选中的
• !important只能提升当前被选中的属性的优先级，其它的属性的优先级不会被提升
• !important必须写在属性值的分号前
• 一般建议不使用，因为它会改变级联的工作方式，使得调试变得困难

5.3.5 优先级权重

当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高

• 行内样式 ，权值为1000
• ID选择器，权值为100
• 类选择器、伪类、属性选择器，权值为10
• 标签选择器、伪元素选择器，权值为1
• 通配符、复合选择器（+、>、~等）、否定伪类（：not），权值为0
• 继承的样式没有权值
• 优先级如果一样, 那么谁写在后面听谁的