分类 CSS权威指南 下的文章

每个规则有两个基本部分:
选择器{
属性:值
}

选择器可以是元素选择器(p span等)

选择器分组

选择器可以多选:

h2,p{

}
表示h2,p标签都应用如下规则

通配选择器

此类选择器可与任何元素匹配 类似通配符一样
*{
color:red
}

类选择器&ID选择器

.className{

}

#idName{

}

同时选择器

当把两个类名连在一起则可以实现 仅对两个类同时使用时生效假设:
.a.b{
color:red
}
<div class="a b"></div>

属性选择器

可以指定一个 标签的下属属性比如:

h1[class]{
    color:red
}
<h1 class="a">df</h1>
<h1 class="b">ff</h1>
<h1 class="c">gg</h1>

还可以这样用

h1[moon]{
    color:red
}
<h1 moon="1">d</h1>
<h1 moon="2">f</h1>

img[alt]{
    color:red
}
<img alt="x"/>

如果想把所有带有title属性的都生效规则 则:
*[title]{

color:red

}
还可以:
atitle{

color:red

}
仅当title和href同时出现时

根据具体属性值

如:
a[href="http://www.baidu.com"]
{
color:red
}

带有部分属性值选择

a[class~="warning"]{
color:red
}
//生效

还有:
class^="warning" warning开头
class$="warning" warning结尾
class*="warning" 包含warning子串

特定属性选择

img[src|="figure"] //src属性中 figure 以及figure-开头的

特殊性

如果一个元素有两个或多个冲突的属性声明则最高特殊性的声明就会胜出

  • 内联样式 特殊性+1000
  • 对于选择器中给定的各个ID属性值:加100
  • 对于选择器中给定的各个类的属性值、属性选择或伪类加10
  • 对于选择器中给定的各个元素和伪元素加1
    有些特别重要的属性我们可以增加!important来提高层级

通配选择不加任何特殊性

继承

当前元素会继承父元素的属性

有一些属性是不能继承的例如:border 继承值没有特殊性 通配符往往会继承。
如果特殊性相同则会按以下进行排序:

  • 按权重和来源排序(importan 创造人员的正常生命 读者的正常生命 用户代理的声明)
  • 按特殊性排序
  • 按顺序排序

元素的两种形式:替换、非替换

  • 替换元素 img 等 由载体提供内容展示
  • 非替换元素 p span 等
  • 块级元素 p div
  • 行内元素 在一个文本行内生成元素框 而不会打断这行文本 a标签 strong em 等

link标签可以引用网址上的css
<link rel="stylesheet" type="text/css" href="地址" media="作用媒体"/>
media可供属性
all 所有
aural 语音合成
braille braille 设备文档。。………………

候选样式表:
rel="alternate" 可设为备选样式表 在浏览器可选择

@import

此方法也可以加载外部css 但是要求写在style 标签里面

CSS注释// / /

内联样式

可以在标签里面单独设style
<p style="color:red"></p>