css随笔

css ：层叠样式表Cascading Style Sheets

1.内联样式： 只对当前元素中内容起作用，不方便复用；内联样式属于结构和表现耦合，不方便后期的维护，一般不推荐使用

2.嵌入式样式：只能对当前页面起作用，只能在当前页面复用

3.外部样式：各个页面都可复用，css文件缓存复用，可以提高页面访问速度，开发中最推荐的方式

 

html和css 的注释方式不一样

html :<!-- -->  css:/*  */

块元素和内联元素

所谓块元素就是无论长度多大都独占一行的元素（例如div，p, h1,h2....）div没有任何语意，没有任何默认样式，适用于页面布局

所谓内联元素即行内元素就是只占自身大小的位置，当一行不够的时候会换行（span a img）span也没有任何语意和样式，主要用来选中文本，为文本设置样式

一般都是块级元素包含内联元素，

a元素可以包含任何元素（但是除了它本身）

p元素不能包含任何块元素

 

选择器：

1.元素选择器：通过元素选择器能够选中页面所有指定的元素 p{}

2.ID选择器：通过元素的ID属性值选中唯一的一个元素 #id{}

3.类选择器：class属性和ID类似，但是class可以重复，.class {}

 4.选择器分组（并集选择器）：通过选择器分组可以同时选中多个选择器的对应的元素，语法：选择器1，选择器2，选择器3 {}

5.通配选择器：他可以选择页面中所有的元素；语法：*{}

6.复合选择器（交集选择器）：作用：可以同时满足多个选择器的元素；语法：选择器1选择器2选择器3{}

7.后代元素选择器：作用：选中指定元素的后代元素；语法：祖先元素 后代元素{}

8.子元素选择器：作用：选中指定元素的子元素，语法：父元素>子元素{}

9.属性选择器：可以根据元素中的属性或属性值来选取指定元素；

语法:1[属性名]选取含有指定属性的元素

2.[属性名=‘属性值’]选择含有指定属性值得元素,

3.[属性名^='属性名']选取属性值以指定内容开头的元素

4.[属性名$='属性名']选取属性值以指定内容结尾的元素

5[属性名*='属性名']选取属性值以包含指定内容的元素

　　p[title] p[title=hello] p[title^='ab']p[title*='ab'] p[title￥='ab']

10.伪类选择器：

 

元素之间的关系：

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

 

伪类专门用来表示元素的一种特殊的状态

比如a标签

• :link => 向未被访问的链接添加样式。
• :visited => :visited 向已被访问的链接添加样式。（涉及隐私问题，只能设置字体颜色）
• :hover => :hover 当鼠标悬浮在元素上方时，向元素添加样式。
• :active => :active 向被激活的元素添加样式。即鼠标按下时的样式。

伪元素：使用伪元素来表示元素中的一些特殊的位置

p:first-letter p:first-line

:before :after一般before或者after都要结合content一起使用

 

div + p: 可以选中一个元素后紧挨着的指定的兄弟元素

div ~ p:选中后边的所有的兄弟元素

 

否定伪类： 作用：可以从已选中的元素中剔除某些元素

语法：【:not(选择器)】

 

后代元素会继承祖先元素的样式，但是并不是所有的样式都会被继承（比如背景相关的样式就不会被继承）

 

当使用不同的选择器，选中同一个元素时并且设置相同样式时，这时样式之间产生的冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定；

优先级的规则：

　　内联样式，优先级 1000

　　id选择器 优先级 100

　　类和伪类 优先级 10

　　元素选择器，优先级 1

　　通配* 优先级 0

　　继承的样式，没有优先级

当选择器中包含多种选择器时，需要将多种选择优先级权重相加然后在做比较，

但是注意，选择器优先级计算不会超过他的最大级数量（比如ID选择器最大数量级900）

优先级一样的话，则使用靠后的样式

并集优先级单独计算

可以在样式最后添加一个！important，此时样式获得最高的优先级，一般来说开发中慎用。

 

a标签的伪类是有顺序的，顺序不对，显示的效果就不对

正确顺序(lvha)

 :link :visited :hover :active