css复建

最近写了好多个界面的css，大部分是抄的

然后在一段一段研究代码的时候发现，好多作者的思路很巧妙，翻译成人话就是我看不懂作者是怎么实现的。

为了学习css，搞些好玩的界面，看来css要重新学习一遍了

先说说css的选择器和他们的优先级，要想用好css，他们的优先级是必须必须要搞清楚的

总体来说：ID>类>元素>通配

当然这是最简单的情况，我们实际开发中不可能只用这里面的一种，肯定都是混合使用的，这时候问题来了，假如一个选择器包含了多个类型，那么它的优先级该怎么计算呢？

这里其实不说优先级，说 特异度或者 权重比较好。

他们有一个计算公式，（ID选择器的个数，，，类、伪类、属性选择器的个数，，，元素、伪元素选择器的个数）从前往后进行比较，如果完全一样，则后写的生效。

下面来介绍一下选择器们的种类：

 

通配选择器（Universal selector）

• 作用：选中页面中的所有元素
• 语法：*
• 例子：*{}

* {
  color: red;
}

 

元素选择器（Type selector）

也叫类型选择器、标签选择器

• 作用：根据标签名来选中指定的元素
• 语法：elementname{}
• 例子：p{} h1{} div{}

p {
  color: red;
}

h1 {
  color: green;
}

 

类选择器（Class selector）

• 作用：根据元素的 class 属性值选中一组元素
• 语法：.classname
• 例子：.blue{}

.blue {
  color: blue;
}
.size {
  font-size: 20px;
}

 

class是一个标签的属性，它和id类似，不同的是class

• 可以重复使用，
• 可以通过class属性来为元素分组，
• 可以同时为一个元素指定多个class属性

<p class="blue size">类选择器（Class selector）</p>

 

ID 选择器（ID selector）

• 作用：根据元素的id属性值选中一个元素
• 语法：#idname{}
• 例子：#box{} #red{}

#red {
  color: red;
}

 

属性选择器（Attribute selector）

• 作用：根据元素的属性值选中一组元素
• 语法 1：[属性名] 选择含有指定属性的元素
• 语法 2：[属性名=属性值] 选择含有指定属性和属性值的元素
• 语法 3：[属性名^=属性值] 选择属性值以指定值开头的元素
• 语法 4：[属性名$=属性值] 选择属性值以指定值结尾的元素
• 语法 5：[属性名*=属性值] 选择属性值中含有某值的元素
• 例子：p[title]{} p[title=e]{} p[title^=e]{} p[title$=e]{} p[title*=e]{}

p[title] {
  color: orange;
}
p[title="e"] {
  color: orange;
}
p[title^="e"] {
  color: orange;
}
p[title$="e"] {
  color: orange;
}
p[title*="e"] {
  color: orange;
}

 

4. 复合选择器

交集选择器

• 作用：选中同时复合多个条件的元素
• 语法：选择器1选择器2选择器3选择器n{}
• 注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头

div.red {
  font-size: 30px;
}

.a.b.c {
  color: blue;
}

 

并集选择器（选择器分组）

• 作用：同时选择多个选择器对应的元素
• 语法：选择器1,选择器2,选择器3,选择器n{}
• 例子：#b1,.p1,h1,span,div.red{}

h1,
span {
  color: green;
}

 

5. 关系选择器

• 父元素：直接包含子元素的元素叫做父元素
• 子元素：直接被父元素包含的元素是子元素
• 祖先元素：直接或间接包含后代元素的元素叫做祖先元素；一个元素的父元素也是它的祖先元素
• 后代元素：直接或间接被祖先元素包含的元素叫做后代元素；子元素也是后代元素
• 兄弟元素：拥有相同父元素的元素是兄弟元素

子元素选择器（Child combinator）

• 作用：选中指定父元素的指定子元素
• 语法：父元素 > 子元素
• 例子：A > B

div.box > p > span {
  color: orange;
}

 

后代元素选择器（Descendant combinator）

• 作用：选中指定元素内的指定后代元素
• 语法：祖先 后代
• 例子：A B

div span {
  color: skyblue;
}

 

兄弟元素选择器（Sibling combinator）

• 作用：选择下一个兄弟
• 语法：前一个 + 下一个 前一个 + 下一组
• 例子 1：A1 + A2（Adjacent sibling combinator）
• 例子 2： A1 ~ An（General sibling combinator）

p + span {
  color: red;
}

p ~ span {
  color: red;
}

 

6. 伪类选择器

伪类（不存在的类，特殊的类）

伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素.…

伪类一般情况下都是使用:开头

• :first-child 第一个子元素
• :last-child 最后一个子元素
• :nth-child() 选中第 n 个子元素
  • n：第 n 个，n 的范围 0 到正无穷
  • 2n 或 even：选中偶数位的元素
  • 2n+1 或 odd：选中奇数位的元素

以上这些伪类都是根据所有的子元素进行排序的

• :first-of-type 同类型中的第一个子元素
• :last-of-type 同类型中的最后一个子元素
• :nth-of-type() 选中同类型中的第 n 个子元素

这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序的

• :not()否定伪类，将符合条件的元素从选择器中去除

/* ul下所有li，黑色 */
ul > li {
  color: black;
}

/* ul下第偶数个li，黄色 */
ul > li:nth-child(2n) {
  color: yellow;
}

/* ul下第奇数个li，绿色 */
ul > li:nth-child(odd) {
  color: green;
}

/* ul下第一个li，红色 */
ul > li:first-child {
  color: red;
}

/* ul下最后一个li，黄色 */
ul > li:last-child {
  color: orange;
}

 

 

• :link 未访问的链接
• :visited 已访问的链接:hover 鼠标悬停的链接
  • 由于隐私的原因，所以visited这个伪类只能修改链接的颜色
• :active 鼠标点击的链接

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: yellow;
}

/* mouse over link */
a:hover {
  color: green;
}

/* selected link */
a:active {
  color: blue;
}

 

 

7. 伪元素选择器

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用::开头

• ::first-letter 表示第一个字母
• ::first-line 表示第一行
• ::selection 表示选中的内容
• ::before 元素的开始
• ::after 元素的最后
• ::before和::after 必须结合content属性来使用

/* 段落首字母设置大小为30px */
p::first-letter {
  font-size: 30px;
}

/* 段落第一行设置为黄色背景 */
p::first-line {
  background-color: yellow;
}

/* 段落选中的部分变绿色 */
p::selection {
  background-color: green；;
}

/* div前加上内容 */
div::before {
  content: "BEFORE";
  color: red;
}

/* div后加上内容 */
div::after {
  content: "AFTER";
  color: blue;
}