css选择器_第7天：CSS中的选择器详解

最新推荐文章于 2024-07-22 20:38:06 发布

weixin_39956451

最新推荐文章于 2024-07-22 20:38:06 发布

阅读量127

点赞数

文章标签： css选择器 css鼠标悬停样式 div中内容靠右

昨天的内容我故意先放了一个实例，并没有讲CSS相关知识，目的是希望你能够「有目的地学习」。昨天内容中用到了很多选择器。选择器的作用在于「选择」，目的是为了能够把定义好的 CSS 样式作用于指定 HTML 标签上，比如想让 p 标签的字体颜色变为红色。

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

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

选择器

下面的CSS会把所有的 p 标签字体颜色改为红色：

p { color: red; }

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

class 选择器：以 “.” 开头，后跟一个名字。在一个HTML中，类选择器可以作用于多个 HTML 标签。

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)：单独一个“ * ”，作用于所有的标签。下面的例子，清除 HTML 中所有标签的默认边距。

* {    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 天：设计一个左右滑动的菜单

前端小课，每日一课

weixin_39956451

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器_第7天：CSS中的选择器详解

昨天的内容我故意先放了一个实例，并没有讲CSS相关知识，目的是希望你能够「有目的地学习」。昨天内容中用到了很多选择器。选择器的作用在于「选择」，目的是为了能够把定义好的 CSS 样式作用于指定 HTML 标签上，比如想让 p 标签的字体颜色变为红色。CSS 相关的语法可以通过下面这张图来读懂：注意：写 CSS 代码的时候，即使某个属性写错，浏览器也不会报错，只会忽略无法识别的 CSS 样...
复制链接

扫一扫