CSS基础

发表于 | | 阅读次数

CSS基础学习

类型选择器（元素选择器）

1
2
3
4
5
6
7
8
h1,p,ul,li {
  color: red;
  text-shadow: 1px 1px 1px black;
  background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.1));
  padding: 3px;
  text-align: center;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), inset -2px -2px 5px rgba(255,255,255,0.5);
}

类选择器：
.classname

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul>
    <!--多个类选择器的组合 -->
  <li class="first done">Create an HTML document</li> 
  <li class="second done">Create a CSS style sheet</li>
  <li class="third">Link them all together</li>
</ul>

/* The element with the class "first" is bolded */
.first {
  font-weight: bold;
}

/* All the elements with the class "done" are strike through */
.done {
  text-decoration: line-through;
}

ID 选择器
#idname

1
2
3
4
5
6
7
8
9
10
11
<p id="polite"> — "Good morning."</p>
<p id="rude"> — "Go away!"</p>

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

属性选择器
[]

  • [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
  • [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
  • [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。
  • [attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
  • [attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
  • [attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
  • [attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。
1
2
3
4
5
6
7
8
9
10
11
li[lang="de"] {
   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/de.png") 5px center no-repeat;
}

li[lang="es"] {
   background: url("http://mdn.github.io/learning-area/css/introduction-to-css/css-selectors/es.png") 5px center no-repeat;
}

li[data-perf*="inc"] {
   background-color: rgba(0,255,0,0.7);
}

伪类
:
伪类
元素在处于某种状态下呈现另一种样式

1
2
3
4
5
6
7
8
a:hover {
  text-decoration: underline;
  color: red;
}

li:nth-of-type(2n) {
  background-color: #ccc;
}

伪元素
::

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop
1
2
3
p::first-line {
  font-weight: bold;
}

组合器和选择器组

名称 组合器 选择
选择器组 A,B 匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
后代选择器 A B 匹配B元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
子选择器 A > B 匹配B元素，满足条件：B是A的直接子节点
相邻兄弟选择器 A + B 匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
通用兄弟选择器 A ~ B 匹配B元素，满足条件：B是A之后的任意一个兄弟节点（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

数值

  • px：像素 (px) 是一种绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的
  • em：相对于于当前元素的大小
  • %： 相当于父容器的百分比

颜色

层叠：
优先级顺序

继承