WEB前端-CSS选择器(CSS背景)

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器

注：用的相对来说比较少，不太建议使用。

h3.title{
   color:red;}标签下的类名：h3标签下类名叫title复制代码

并集选择器

如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式

比如  .one, p , #test {
   color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。复制代码

子元素选择器

子元素选择器: 拥有父类的元素称为子元素

.demo > h3 {
   color: red;}   类名demo下的子标签h3标签复制代码

属性选择器

选取标签带有某些特殊属性的选择器

/* 获取到 拥有 该属性的元素 */div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */			color: pink;		}div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */			color: skyblue;		}div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */			color: green;		}复制代码


    
     属性选择器
    
    
    
     属性选择器
    
    
    
     属性选择器
    
    
    
     属性选择器
    
    
    
     属性选择器
    
    
    
     属性选择器123
    
    
    
     属性选择器footer
    
    
    
     属性选择器footer
    
    
    
     属性选择器
    
    
    
     属性选择器
    
    
    
     属性选择器
    
复制代码

伪元素选择器（CSS3)

E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

E::first-line 文本第一行；

E::selection 可改变选中文本的样式；

E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

p::first-letter {  font-size: 20px;  color: hotpink;}/* 首行特殊样式 */p::first-line {  color: skyblue;}p::selection {  /* font-size: 50px; */  color: orange;}div::befor {  content:"开始";}div::after {  content:"结束";}复制代码

CSS背景

背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);复制代码

最后一个参数是alpha 透明度取值范围 0~1之间

注意：背景半透明是指盒子背景半透明，盒子里面的内容不收影响。

背景缩放(CSS3)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

background-image: url('images/gyt.jpg');			background-size: 300px 100px;			/* background-size: contain; */			/* background-size: cover; */复制代码

多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局做法就是用逗号隔开就好了。

一个元素可以设置多重背景图像。

每组属性间使用逗号分隔。

如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。

为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;复制代码

凹凸文字

CSS 三大特性

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

一般情况下，按照CSS顺序，以最后的样式为准。

样式冲突，遵循的原则是就近原则。

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号

注：子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

CSS优先级

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下：

specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的

例子：

div ul  li   ------>      0,0,0,3.nav ul li   ------>      0,0,1,2a:hover      -----—>      0,0,1,1.nav a       ------>      0,0,1,1   #nav p       ----->       0,1,0,1复制代码

总结优先级：使用了 !important声明的规则。内嵌在 HTML 元素的 style属性里面的声明。使用了 ID 选择器的规则。使用了类选择器、属性选择器、伪元素和伪类选择器的规则。使用了元素选择器的规则。只包含一个通用选择器的规则。同一类选择器则遵循就近原则。注意： 继承的 权重是 0数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0。复制代码