css选择器类型

  1. 通配符：选择所有元素 *{ }
  2. 标签选择器：选择器直接为标签名
  3. 属性选择器： 格式：标签名[ ]（[ ]里面是为该标签的属性或属性=“属性值”，[ ]前面的标签名视情况可加可不加）

如：

  1. 伪类选择器

用语列表项的规则li :nth-child(序号)表示选择的第几项
li :nth-child(odd)表示选择的奇数项
li :nth-child(even)表示选择的偶数项
li :nth-child(2n)表示选择的二的倍数项，n可从0开始
a:link{}表示未访问的状态
a:visited{}表示已访问的状态
a:hover{}表示悬停时的状态
a:active{}表示点击时的状态

  1. 否定伪类选择器

例：除了3.其他都变
写法：div:not(:nth-child(3)) { }
例：除了3和7其他都变
div:not(:nth-child(3),:nth-child(7)) { }

  1. ID选择器：标签里写入一个ID属性，然后选择器用#属性值的格式选择
  2. 伪元素：用单冒号和双冒号都可以,css3的兼容性问题

h1::before{content:在之前}
h1::after{content:在之后}

  1. 继承选择器：子级 后代

    1. <div>
    2. <p>
    3.  <span>孙子级的 span</span>
    4. </p>
    5. </div>
    1. 大于符号和空格符号都可以
  2. 大于符号是指儿子div>p>span{ }
  3. 空格是指后代div span{}
  4. 并集选择器：选择器之间用逗号隔开。如：h1,h2,h3,h4,.box,#gao,ul>li{声明块}

声明冲突

  1. 属性相同值却不同，这就是声明冲突。
  2. 冲突并不是一个错误

    层叠

  • 比较优先级：优先级低的会淘汰，高的会胜出。（权重）
  • 比较特殊性：特殊性低的会淘汰，高的会胜出。
  • 比较源次序：源次序靠前的的会淘汰，靠后的会胜出。（源次序就是书写代码时的顺序）

!important普通声明后加上感叹号加上important；表示重要声明。

嵌入 id class 元素
a b c d
style 1 0 0 0
id 0 1 0 0
class、属性、伪类 0 0 1 0
元素、伪元素 0 0 0 1
通配符 0 0 0 0
important 1 1 1 1

CSS优先级：important>标签内嵌style属性>ID>类、属性>元素>通配符选择器>继承>浏览器默认属性

继承

  1. 子元素会自动继承父元素的某些样式，通常，文本类的样式（大小、格式、颜色）具有继承性。
  2. 一般可继承的 css 属性有文字大小、文字格式（对齐与缩进）、文字颜色
  3. 一般不可继承的 css 属性有背景属性、盒子模型的属性、定位属性
  4. 所以可继承的 css 属性有，元素可见性：visibility、光标属性：cursor
  • 常用的css可继承的属性：

font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
color：文本颜色
visibility：元素可见性
光标属性：cursor

  • 所有元素可以继承的

元素可见性：visibility
光标属性：cursor

  • 常用的css不可继承的属性

display：规定元素应该生成的框的类型
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
盒子模型的属性：width、height、margin 、border、padding
背景属性：background
定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、 max-height、overflow、clip、z-index

颜色单位表示方法

  1. 关键字（颜色名称）
  2. HEX16进制表示法（#后跟三位或六位数）十六进制颜色的组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色），其中#只是表示使用6位16进制的颜色代码声明颜色。所有值都必须介于0和FF之间。通俗来讲，十六进制的实质就是rgb，每两位表示一个颜色。当每两位的值一样的时候可以缩写，比如color：#ffcc00可以简写成color：#fc0。
    如bgcolor=#ff0000;代码的头两位即ff表示三原色中的红色，范围当然是16进制的00-ff，中间两位即00表示绿色，最后两位即00表示蓝色，00表示没有颜色，ff表示颜色最强。
  3. RGB值 如：rgb(0,0,0)红绿蓝

  4. HSL值

    超链接

  5. 规则：本文文章

  6. target=”_/blank”表示另外打开页面

    路径

  7. 相对路径：不从头（/根）开始的路径（./ 代表的是当前目录；…/ 代表的是上一级目录）

  8. 绝对路径：绝对路径就是你的主页上的文件或目录在硬盘上真正的路径，URL和物理路径。
    例如：
    物理路径：C:\xyz\test.txt 代表了test.txt文件的绝对路径；
    URL绝对路径：协议//域名//路径http://www.baidu.com/

    实体字符

    | 描述 | 实体名称 | | —- | —- | | 空格 |   | | 小于符号< | < | | 大于符号> | > | | 并且& | & | | 版权© | © | | 注册® | ® |