CSS基本语法与各类选择器

最新推荐文章于 2022-09-09 12:18:43 发布

lefex

最新推荐文章于 2022-09-09 12:18:43 发布

阅读量255

点赞数 1

本文链接：https://blog.csdn.net/lefex/article/details/103351416

版权

这一节内容关乎到后续能不能看懂 HTML，非常重要，很多书会花费一章或多章来讲，但非常“教科书”，导致第一次学习的时候云里雾里的，直到看完了 MDN 上的讲解，我才有了自己的认识。总结如下：

CSS 相关的语法可以通过下面这张图来读懂：

注意：写 CSS 代码的时候，即使某个属性写错，浏览器也不会报错，只会忽略无法识别的 CSS 样式。

CSS 是通过一个一个属性组合成一个 block，可以把多个选择器组合到一块，用逗号分隔，基本语法如下：

@规则在CSS中用于传递元数据、条件信息或其他描述性信息。它们以at符号（@）开头，后跟一个标识符来说明它是什么类型的规则，然后是某种类型的语法块，以分号（；）结尾。由标识符定义的每种类型的 at 规则都有其自己的内部语法和语义。

@charset and @import (metadata)@media or @document (条件，嵌套申明)@font-face (描述信息)

下面这个 CSS 只适用于屏幕超过 800px 的设备：

@media (min-width: 801px) {  body {    margin: 0 auto;    width: 800px;  }}

选择器

选择器（selector）是用来定位 HTML 元素的，当定义一些 CSS block 后，需要把这些 block 作用于 HTML 元素，这时就需要使用选择器，比如设置所有 p 元素的背景色为红色。

作用于所有的 p 标签，下面所有的 p 标签为红色：

p { color: red; }

<p>超越技术</p><div>哈哈.</div><p>一起学前端!</p>

class 选择器：以 “.” 开头，后跟一个名字

p {    color: red;}.first {    font-weight: bold;    text-decoration: line-through;}

<p class="first">超越技术</p><div>哈哈.</div><p>一起学前端!</p>

ID 选择器：以 “#” 开头，后跟一个选择器的名字，名字必须在当前文档唯一;

#second {    color: blue;}

<body>    <p class="first">超越技术</p>    <div>哈哈.</div>    <p id="second">一起学前端!</p></body>

通用选择器（Universal selector）：单独一个“ * ”，作用于所有的标签。

* {    margin: 0;    padding: 0;}

属性选择器（Attribute selectors）：根据属性来匹配HTML元素

/* 匹配所有使用属性 "lefe" 的元素 */[lefe] {    color: green;}
/*匹配所有使用属性为 "lefe"，且值为 liquid 的元素*/[lefe="liquid"] {    background-color: goldenrod;}
/*匹配所有使用属性为 "lefe"，且值包含 spicy 的元素*/[lefe~="spicy"] {    color: red;}

还有类似于“正则表达式”的属性选择器，比如：[attr^=val] 匹配以 val 开头的元素，[attr$=val] ,匹配以 val 结尾的元素，[attr*=val]匹配包含 val 的字符串的元素。

<body>    <ul>        <li data-quantity="1kg" lefe>Tomatoes</li>        <li data-quantity="3" lefe>Onions</li>        <li data-quantity="3" lefe>Garlic</li>        <li data-quantity="700g" lefe="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" lefe="liquid">Olive oil</li>        <li data-quantity="25cl" lefe="liquid">White wine</li>    </ul></body>

伪选择器（pseudo-selectors）：它包含伪类（pseudo-classes）和伪元素（pseudo-elements）。这类选择器不是真正意义上的选择器，它作为选择器的一部分，起到选择器匹配元素的限定条件。比如，匹配 dom 树中某个元素的第一个孩子，匹配鼠标点击后的状态等。

/* 匹配超链接样式 */a {    color: blue;    font-weight: bold;}
/* 访问后的状态 */a:visited {    color: yellow;}
/* 鼠标悬停、点击、聚焦时的样式 */a:hover,a:active,a:focus {    color: darkred;    text-decoration: none;}

<a href="https://developer.mozilla.org/" target="_blank">Click me</a>

伪元素（pseudo-elements）选择器，它以“ :: ” 为标识符。比如修改首字母的样式。在超链接后添加一个向上的弯曲的箭头：

 p::first-letter{  font-weight: bold;} p::first-line{  font-size: 3em; }

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

组合选择器（Combinators）: 这种选择器可以作用于多个 HTML 元素，有多种组合方式，下面这些方式，CSS 都会作用于 B 元素。通过下面的例子来讲解这些选择器，例子类似于一个树形，表示不同的层级：

代码如下：

<body>    <div>        <p>|__div->p1</p>        <p>|__div->p2</p>        <section>            <p>|_____div->section->p</p>            <p>|_____div->section->p</p>            <div>|_____div->section->div</div>        </section>    </div>    <p>|__p1</p>    <p>|__p2</p></body>

A B {} : A 元素的所有后代元素 B 都会起作用。下面的例子中 div p {}，它会遍历 div 中所有的子元素 p，只要找到 p 元素就应用对应的 CSS 样式，故所有的 p 元素都变成了红色；