CSS选择器及背景相关

# 属性选择器

属性选择器的标准语法如下：

E[attribute]

{

	属性:属性值;

	属性:属性值;

}

• E 代表元素
• attribute 代表属性

# 自定义属性选择器

自定义属性：只需要在标签后加上自定义的属性，例如 <div data-code></div> 中的 data-code
语法如下：

<style>

    [data-code]{

        属性:属性值;

        属性:属性值;

    }

</style>

若自定义属性内有值则需要在中括号内完整的写出。

属性选择器也可以选择已有属性，可选择同一标签内多个属性。中括号内就是属性 [ ]。

# 通配符选择器（也叫做子字符串选择器）

• 所有 ^ 开头 $ 结尾～包含 | 默认加 -
• data-code^=“kk”
• data-code$=“kk”
• data-code*=“kk”
• data-code~=“kk”
• data-code|=“kk”

# 后代选择器（又称包含选择器）

后代选择器可以选择作为某元素后代的元素。

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外的一些结构中不起作用。规则左边的选择器一段包括两个或多个用空格分割的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合夫可以解释为 “… 在… 找到…”“… 作为… 的一部分”“… 作为… 的后代”，但是要求必须从右到左读选择器。

后代选择器的书写方法：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔，当标记发生嵌套时，内层的标记就成为外层标记的后代了。

后代选择器语法格式如下： E1 E2{属性:属性值;属性:属性值;...}

# 子（元素） 选择器

子元素选择器只能选择作为某元素的子元素。子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。

子选择器的语法格式如下： E > F{属性:属性值;属性:属性值;...}

# 相邻选择器

相邻选择器可以选择紧接在另一元素后的元素，而且他们具有相同的父元素。即，E 和 F 具有相同的父元素。且 F 在 E 后面紧紧相邻。

相邻选择器的语法格式如下： E + F{属性:属性值;属性:属性值;...}

# 选择器分组

如下有两个选择器。

<style>

    h1{color:gold;}

    p{color:gold;}

</style>

为了同时应用这两个选择器，我们可以使用选择器分组。将两个选择器的标签用逗号隔开，这样就将两个标签应用了这一个属性。

<style>

	h1,p{color:gold;}

</style>

# 伪类选择器

伪类用来指定选择器某种特定状态或者条件，伪类在 DOM 中并不存在，但对用户是可见的。
语法如下：

选择符:伪类{属性:属性值;属性:属性值;...}

# 动态伪类

1. hover 鼠标滑过
2. link 向未访问过的链接添加样式
3. visited 向访问过的链接添加样式
4. active 激活元素添加样式（例如：按下）
5. focus 向拥有输入键盘焦点的元素添加样式 solid 实线 border 边框

以下是 5 个例子：

<style>

    a:hover{

        color:red;

    }

    a:link{

        color:green;

    }

    a:visited{

        color:pink;

    }

    a:active{

        color:blue;

    }

    input[type="text"]:focus{

        border:10px soild #000000

    }

</style>

# 结构性伪类

1. first-child 匹配父类第一个子元素
2. last-child 匹配父类最后一个子元素
3. nth-child (n) 匹配父类元素第几个子元素 odd 2n 匹配奇数 even 2n+1 偶数

下面是例子，以 1 为例，用法相同：

ul>li:first-child

{

	color:red;

}

# 语言伪类

1. :lang (值) 向带有指定 lang 属性元素添加样式

lang=“国际语言缩写” 代表该标签内所写语言。

用法与属性选择器相同。

# 伪类元素选择器

::first-letter 第一个字

::first-line 第一行

例如：

p::first-letter{

    color:red;

    font-size:22px;

}

p::first-line{

    color:red;

    font-size:22px;

}

与伪类选择器的不同点：

• 伪类选择器一个 :
• 伪元素选择器两个 ::

仅限于块级元素

• ::before 在之前设定样式
  • 需要配合 content 使用，content 内一定要写内容，否则不显示。
• ::after 在之后设定样式
• ::selection 选中时的样式

div::before {

    width:100px;

    height:100px;

    background-color:red;

    content:"*****"

}

div::selection {

    color:yellow;

}

# 选择器优先级

!importment 用法：

div {

	width:100px;

	height:100px;

	background-color: yellow !importment;

}

# 微观权重

微观权重：

• 1,0,0,0,0 !importment （写在后面）
• 0,1,0,0,0 内联 外联
• 0,0,1,0,0 id 选择器
• 0,0,0,1,0 类选择器 伪类选择器 属性选择器
• 0,0,0,0,1 元素伪类选择器
• 0,0,0,0,0 通配符选择器 后代选择器 兄弟选择器

# 直观权重

直观权重：

• 10000 !importment （写在后面）
• 1000 内联 外联
• 100 id 选择器
• 10 类选择器 伪类选择器 属性选择器
• 1 元素伪类选择器
• 0 通配符选择器 后代选择器 兄弟选择器

# 使用原则

在一个节点上设定的样式越多，越受权重影响。

使用原则：

1. 使用就近原则
2. 继承样式的优先级别最低
3. !inportment 的样式优先级别最高，如有冲突则重新计算。

# CSS 单位

# 尺寸单位

如果当前元素设置字体大小则 em 会根据当前元素进行倍数放大

如果没有在当前元素设置字体大小 则选择默认浏览器字体大小进行放大倍数

rem 根据根（html）元素字体尺寸的倍数

在 html 上设置字体大小，下面设置 rem 会根据根元素大小进行倍数放大

# 手机端布局方式

# 视窗相对单位

# 颜色单位

1. 颜色名 直接写单词，如 red yellow
2. rgb rgb 值 red 红色通道 green 绿色通道 blue 蓝色通道，如 rgb (255,255,255) 即白色。
3. rgb rgb 百分比值 如 rgb (0%,100%,0%) 即绿色 理解为浓度
4. rgba red 红色通道 green 绿色通道 blue 蓝色通道 alpha 透明通道（取值范围 0~1）
5. 16 进制数 #000000 #ffffff

# 背景

• background-color 背景颜色
• background-image 背景图片（image 在使用时需要添加:url (地址) ，或者写 none 不显示背景图 ）
• background-repeat 背景图平铺
  • background-repeat:repeat 背景图平铺 （不自适应）
  • background-repeat:no-repeat 背景图不平铺
  • background-repeat:repeat-x 背景图沿 X 轴平铺（横向平铺）
  • background-repeat:repeat-y 背景图沿 Y 轴平铺（纵向平铺）
  • background-repeat:round 自动缩放，充满整个容器（自适应）
  • background-repeat:space

# 背景图定位

• background-position:x y （X 减小，图片向右走，视线向左；Y 减小，图片向上走，视线下移）
• icon 图标 雪碧图 / 精灵图 滑动门

为什么使用雪碧图？

1、提高浏览器加载速度（暂知）

background: 颜色背景 url（地址） no-repeat（是否平铺） left（图片位置，left 靠左显示 top 向上显示，center 居中显示） （支持 IE）