CSS样式--被忽略的前端基础（一）

CSS样式–被忽略的前端基础（一）

---

前言

以前学后端觉得前端不屑一顾，easy，后来从事前端开发后觉得其实并不简单，尤其是在css这一块，总觉得简单，没怎么系统的学习。现在觉得语言只是一种处理和解决问题工具，而你对基础掌握的深度影响着你解决问题的速度和方式。

css语句

1、 选择器和css声明块构成了CSS规则集。

div {
    background-color: red;
}

h1 {
    font-size: 1.5em;
}

/*
**样式良好的习惯（代码是写给人看的）
**1、分号结尾 2、属性和值空格隔开 3、不同规则集空一行 4、有坑的css样式最好注释下
*/

2、css语句
@-规则(At-rules)在CSS中被用来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。一些例子如下:
- @charset 和 @import （元数据）
- @media 或 @document （条件信息，又被称为嵌套语句，见下方。)
- @font-face （描述性信息）

@import 'custom.css';
/* 该@-规则向当前 CSS 导入其它 CSS 文件 */

嵌套语句 是@-规则中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件如下：
- @media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
- @supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
- @document 只有当前页面匹配一些条件时才会应用该@-规则的内容。

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}
/*上述的嵌套语句只有在页面宽度超过801像素时才会应用   */

CSS中有@keyframes规则，可以轻松的实现动画效果。

CSS选择器

1、简单选择器（Simple selectors）：通过元素类型、class 或 id 匹配一个或多个元素。

/*1、类型选择器：html tag名匹配*/
p {
    color: red;
}

div {
    color: blue;
}

/*2、类选择器: 与html标签class属性匹配(<li class="test"></li>)*/
.test {
    font-weight: bold;
}

/*3、ID选择器：与html标签的id属性匹配(<p id="test"> — "Go away!"</p>)*/
#test {
    text-transform: uppercase;
}

/*4、通用选择器：匹配所有元素(一般用于同一页面字体分格)*/
* {
    font-family: cursive;
}

2、属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。

/*html代码*/
我的食谱配料: <i lang="fr-FR">Poulet basquaise</i>
<ul>
  <li data-quantity="1kg" data-vegetable>Tomatoes</li>
  <li data-quantity="3" data-vegetable>Onions</li>
  <li data-quantity="3" data-vegetable>Garlic</li>
  <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
  <li data-quantity="2kg" data-meat>Chicken</li>
  <li data-quantity="optional 150g" data-meat>Bacon bits</li>
  <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
  <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>

/*1、[attr]:该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何*/
/* 所有具有"data-vegetable"属性的元素将被应用绿色的文本颜色 */
[data-vegetable] {
  color: green;
}

/*2、[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。*/
/* 所有具有"data-vegetable"属性且属性值刚好为"liquid"的元素将被应用金色的背景颜色 */
[data-vegetable="liquid"] {
  background-color: goldenrod;
}

/*3、[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且包含val的元素。*/
/* 所有具有"data-vegetable"属性且属性值包含"spicy"的元素，
即使元素的属性中还包含其他属性值，都会被应用红色的文本颜色 */
[data-vegetable~="spicy"] {
  color: red;
}

/*4、[attr|=val]：选择attr属性的值是 val 或值以 val- 开头的元素*/
/* 所有lang属性且值为fr或fr-*的元素字体加粗 */
[lang|="fr"] {
  font-weight: bold;
}

/*5、[attr*=val]：选择attr属性的值中包含子字符串 val 的元素（**注意和3的区别**：3是完全匹配，5是包含。eg：  <li data-quantity="700g" data-vegetable="not spicyssss like chili">Red pepper</li>）[attr~=val]是匹配不到的，但是[attr*=val]可以匹配*/
/* 
    具有"data-vegetable"属性含有值"not spicy"的所有元素,都变回绿色
*/
[data-vegetable*="not spicy"] {
  color: green;
}

/*6、[attr$=val] : 选择attr属性的值以 val 结尾*/
/* 
   具有"data-quantity"属性其值以"kg"结尾的所有元素*/
[data-quantity$="kg"] {
  font-weight: bold;
}

/*7、[attr^=val] : 选择attr属性的值以 val 开头*/
/* 
   具有属性"data-quantity"其值以"optional"开头的所有元素 
*/
[data-quantity^="optional"] {
  opacity: 0.5;
}

3、伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。

伪类	伪类	伪类	伪类
:active	:any	:checked	:default
:dir()	:disabled	:empty	:enabled
:first	:first-child	:first-of-type	:fullscreen
:focus	:hover	:indeterminate	:in-range
:invalid	:lang()	:last-child	:last-of-type
:left	:link	:not()	:nth-child()
:nth-last-child()	:nth-last-of-type()	:nth-of-type()	:only-child
:only-of-type	:optional	:out-of-range	:read-only
:read-write	:required	:right	:root
:scope	:target	:valid	:visited

a {
  color: blue;
  font-weight: bold;
}

/* 我们想让被访问过的链接和未被访问
的链接看起来一样 */

a:visited {
  color: blue;
}

4、伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容(注意和伪类区别：伪元素是新元素（两个冒号）而伪类是作用一个元素不同场景下)。

伪元素	伪元素
::after	::before
::first-letter	::first-line
::selection	::backdrop

/* 所有含有"href"属性并且值以"http"开始的元素，
将会在其内容后增加一个箭头（去表明它是外部链接）
*/

[href^=http]::after {
  content: '⤴';
}

5、组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。

Combinators	Select
A,B	匹配满足A（和/或）B的任意元素.
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点–所有子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点（B的子节点无法匹配）
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）