昨天的内容我故意先放了一个实例,并没有讲CSS相关知识,目的是希望你能够「有目的地学习」。昨天内容中用到了很多选择器。选择器的作用在于「选择」,目的是为了能够把定义好的 CSS 样式作用于指定 HTML 标签上,比如想让 p 标签的字体颜色变为红色。
CSS 相关的语法可以通过下面这张图来读懂:
注意:写 CSS 代码的时候,即使某个属性写错,浏览器也不会报错,只会忽略无法识别的 CSS 样式。
选择器
下面的CSS会把所有的 p 标签字体颜色改为红色:
p { color: red; }
<p>超越技术p><div>哈哈.div><p>一起学前端!p>
p { color: red;}.first { font-weight: bold; text-decoration: line-through;}
<p class="first">超越技术p><div>哈哈.div><p>一起学前端!p>
#second { color: blue;}
<body> <p class="first">超越技术p> <div>哈哈.div> <p id="second">一起学前端!p>body>
* { 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>Tomatoesli> <li data-quantity="3" lefe>Onionsli> <li data-quantity="3" lefe>Garlicli> <li data-quantity="700g" lefe="not spicy like chili">Red pepperli> <li data-quantity="2kg" data-meat>Chickenli> <li data-quantity="optional 150g" data-meat>Bacon bitsli> <li data-quantity="optional 10ml" lefe="liquid">Olive oilli> <li data-quantity="25cl" lefe="liquid">White wineli> 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 mea>
伪元素(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->p1p> <p>|__div->p2p> <section> <p>|_____div->section->pp> <p>|_____div->section->pp> <div>|_____div->section->divdiv> section> div> <p>|__p1p> <p>|__p2p>body>
A B {} : A 元素的所有后代元素 B 都会起作用。下面的例子中 div p {},它会遍历 div 中所有的子元素 p,只要找到 p 元素就应用对应的 CSS 样式,故所有的 p 元素都变成了红色;
div p { color: red;}
A > B {} : A 元素的直接子节点会起作用,也就是只适用于 A 节点的第一层所有的子节点。例子中 div > p { } , 只会找到 div 的第一层子节点 p。
div > p { color: red;}
A + B {} : 匹配 A 的下一个兄弟节点,AB具有相同的父节点,并且 B 紧跟在 A 的后面;例子中 div + p { } 只会匹配 div 的下一个兄弟节点 p;
div + p { color: red;}
A ~ B {} : B是 A 之后的任意一个兄弟节点。例子中 div ~ p { } 会匹配 div 的所有兄弟节点 p;
div ~ p { color: red;}
组选择器 A, B:A 和 B 元素具有同一规则的 CSS 样式,不同元素使用逗号隔开。
div,p { color: red;}
以上就是所有与 CSS 样式和选择器相关的内容。这部分内容很基础但很重要。
@规则
@规则在CSS中用于传递元数据、条件信息或其他描述性信息。它们以at符号(@)开头,后跟一个标识符来说明它是什么类型的规则,然后是某种类型的语法块,以分号(;)结尾。由标识符定义的每种类型的 at 规则都有其自己的内部语法和语义。
@charset and @import (metadata)@media or @document (条件,嵌套申明)@font-face (描述信息)
下面这个 CSS 只适用于屏幕超过 800px 的设备:
@media (min-width: 801px) { body { margin: 0 auto; width: 800px; }}
参考:
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
推荐阅读:
前端小课开课啦「免费加入」第 6 天:设计一个左右滑动的菜单
前端小课,每日一课