属性选择器

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

E[attribute]
{
	属性:属性值;
	属性:属性值;
}

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

自定义属性选择器

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

<style>
    [data-code]{
        属性:属性值;
        属性:属性值;
    }
</style>

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

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

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

• 所有 ^开头 $结尾 ~包含 |默认加-
• [data-code^=“kk”]{属性值开头带有kk的}
• [data-code$=“kk”]{属性值结尾带有kk的}
• [data-code*=“kk”]{所有属性值带有kk的}
• [data-code~=“kk”]{属性值带有kk单词的，中间加空格}
• [data-code|=“kk”]{属性值带有kk-的（例如data-code=“kk-a”）}

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

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

我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外的一些结构中不起作用。规则左边的选择器一段包括两个或多个用空格分割的选择器。选择器之间的空格是一种结合符（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=“国际语言缩写” 代表该标签内所写语言。

用法与属性选择器相同。

伪类元素选择器

::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在使用时需要添加(地址) ，或者写none不显示背景图 ）
• background-repeat 背景图平铺
  • background-repeat 背景图平铺 （不自适应）
  • background-repeat 背景图不平铺
  • background-repeat 背景图沿X轴平铺（横向平铺）
  • background-repeat 背景图沿Y轴平铺（纵向平铺）
  • background-repeat 自动缩放，充满整个容器（自适应）
  • background-repeat

背景图定位

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

为什么使用雪碧图？

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

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