CSS语法与CSS选择器

2023-11-06

目录

CSS 语法

实例

例子解释

 CSS 选择器

CSS 元素选择器

实例

CSS id 选择器

实例

CSS 类选择器

实例

实例

实例

CSS 通用选择器

实例

CSS 分组选择器

实例

所有简单的 CSS 选择器

延伸阅读


CSS 语法

CSS 规则集(rule-set)由选择器和声明块组成:

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。

多条 CSS 声明用分号分隔,声明块用花括号括起来。

实例

在此例中,所有 <p> 元素都将居中对齐,并带有红色文本颜色:

p {
  color: red;
  text-align: center;
}

亲自试一试

例子解释

  • p 是 CSS 中的选择器(它指向要设置样式的 HTML 元素:<p>)。
  • color 是属性,red 是属性值
  • text-align 是属性,center 是属性值


 CSS 选择器

CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类:

我们将了解最基本的 CSS 选择器。


CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

实例

在这里,页面上的所有 <p> 元素都将居中对齐,并带有红色文本颜色:

p {
  text-align: center;
  color: red;
}

亲自试一试


CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!

要选择具有特定 id 的元素,请写一个井号(),后跟该元素的 id。

实例

这条 CSS 规则将应用于 id="para1" 的 HTML 元素:

#para1 {
  text-align: center;
  color: red;
}

亲自试一试

注意:id 名称不能以数字开头。


CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。

实例

在此例中,所有带有 class="center" 的 HTML 元素将为红色且居中对齐:

.center {
  text-align: center;
  color: red;
}

亲自试一试

还可以指定只有特定的 HTML 元素会受类的影响。

实例

在这个例子中,只有具有 class="center" 的 <p> 元素会居中对齐:

p.center {
  text-align: center;
  color: red;
}

亲自试一试

HTML 元素也可以引用多个类。

实例

在这个例子中,<p> 元素将根据 class="center" 和 class="large" 进行样式设置:

<p class="center large">这个段落引用两个类。</p>

亲自试一试

注意:类名不能以数字开头!

另注:如果有冲突的元素,将以后面的类为基准。


CSS 通用选择器

通用选择器(*)选择页面上的所有的 HTML 元素。

实例

下面的 CSS 规则会影响页面上的每个 HTML 元素

* {
  text-align: center;
  color: blue;
}

亲自试一试


CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素

请看下面的 CSS 代码(h1、h2 和 p 元素具有相同的样式定义):

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

最好对选择器进行分组,以最大程度地缩减代码。

如需对选择器进行分组,请用逗号来分隔每个选择器

实例

在这个例子中,我们对上述代码中的选择器进行分组:

h1, h2, p {
  text-align: center;
  color: red;
}

亲自试一试


所有简单的 CSS 选择器

选择器 例子 例子描述
.class .intro 选取所有 class="intro" 的元素。
#id #firstname 选取 id="firstname" 的那个元素。
* * 选取所有元素。
element p 选取所有 <p> 元素。
element,element,.. div, p 选取所有 <div> 元素和所有 <p> 元素。

延伸阅读

课外书:CSS 元素选择器

课外书:CSS 选择器分组

课外书:CSS 类选择器详解

课外书:CSS ID 选择器详解

课外书:CSS 属性选择器详解

课外书:CSS 后代选择器

课外书:CSS 子元素选择器

课外书:CSS 相邻兄弟选择器

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS语法与CSS选择器 的相关文章

  • 当我运行反应脚本“yarn start”时,我到index.html中的manifest.json的链接有效,但当我运行“python3 manage.py runserver”时则无效

    当我运行 yarn start 时 我的index html 文件中的manifest json 链接工作正常 但是当我运行时 python3 manage py runserver 我在终端得到的只是 Not Found manifest
  • 从 HTML 表单发送数据到 Node.js 服务器

    我正在学习 Node js 我的服务器中有这个 var http require http var url require url http createServer function request response response w
  • 强制 Flexbox 在特定项目之后换行(方向:列)

    我有导航 各个条目通过 Flexbox 一层一层地显示 方向 列 如果导航条目获得 分隔符 类 则导航应进入下一行 是否可以强制 Flexbox 执行 换行 nav display flex flex direction column na
  • angularjs 自定义过滤器检查数据数组内的值

    我有两个过滤器 它们根据数据中的队列键过滤数据 这是我的代码 var app angular module app app controller mainController function scope Data object scope
  • Safari 6 (iOS 6) 弹性布局不会换行元素

    我需要将两个框放在列中 这在我测试过的其他浏览器中有效 但在 iOS 6 上的 Safari 6 中无效 例子 http jsfiddle net 5FESj 1 http jsfiddle net 5FESj 1 display webk
  • MVC 5 Razor 活动导航选项卡

    我一直在尝试突出显示我的项目中的活动导航选项卡 我的任务是更新旧网站而不更改为引导程序 这是我的经验所在 我找到了一个包含我需要的大部分内容的示例 目前 唯一具有 选定类别 的选项卡是 主页 选项卡 当我单击另一个选项卡时 主页 选项卡不再
  • 使用 Vim 作为 HTML 编辑器

    您知道 Notepad 如何具有此功能 当您单击标签 例如 时 它也会自动突出显示结束标签 它叫什么 如何调整 Vim 使其也具有此功能 还有其他方法可以将 Vim 变成强大且高效的 HTML 编辑器吗 我在 vim 中完成所有 HTML
  • 如何从 Firefox 中的选择元素中删除箭头

    我正在尝试设计一个select使用 CSS3 的元素 我在 WebKit Chrome Safari 中得到了我想要的结果 但 Firefox 的表现不佳 我什至不关心 IE 我正在使用 CSS3appearance属性 但由于某种原因我无
  • 清除 CSS 过渡

    我使用 CSS 框架 该框架在将鼠标移动到输入元素上时应用过渡 我有一堂课 我不想有这种转变 这可能吗 只需放置过渡 无 在CSS中并使其优先级高于其他 Example html div class a div div class a b
  • 如何使页面上的所有内容变大?

    如果我在浏览器中打开我的网站并按Ctrl 有几次 一切都变得更大 网站对我来说看起来更好 我可以通过在 HTML 代码中添加一些内容来实现相同的效果吗 以便用户默认看到更大的所有内容 而无需按Ctrl 我想让所有东西都变大 文本和图像 如果
  • contenteditable 在 safari 中不起作用,但在 chrome 中起作用

    我有一个奇怪的问题 这在 chrome 中按预期工作 但在 safari 中它只会发光 但不会对按键输入做出反应 这是触发文本版本的方法 var namebloc event currentTarget find column filena
  • 将箭头添加到 Twitter Bootstrap 的下拉药丸中?

    我的 Twitter 引导下拉按钮成功工作 但我有一个小问题 这里的黑色导航栏 http twitter github com bootstrap javascript html dropdowns http twitter github
  • 如何防止在达到一定字符数后向文本区域输入内容?

    使用下面的代码 任何超过指定最大值的输入都将被删除 但这会产生一种效果 即键入字符后立即将其删除 我宁愿简单地阻止输入字符
  • 表单提交不起作用

    我有一张桌子 可以打印出所有可用的相机 它使用表单来更改这些设置 问题在于该表单仅更新条目中的最后一个摄像机 换句话说 如果我更改表单并为列表中的最后一个摄像机点击 应用 它将起作用 如果我更改此列表中任何其他摄像机的表单 它会将其更改为与
  • jQuery 面板滑块通过单击按钮打开但不会关闭

    我的页面上有一个按钮 可以使用 jquery 和 Modernizr 框架打开右侧面板 按钮位于屏幕最右侧 单击时 它会向左滑动并打开打开的面板 问题是 再次单击时它不会滑回到原来的位置 HTML div class cd panel fr
  • jQuery 显示/隐藏兄弟姐妹

    我有这段代码 旨在首先隐藏除第一个元素之外的所有相关元素 这个 做的不错啊接下来 它应该根据选择的项目显示 隐藏这些元素 但这部分不起作用 想法 jQuery accordion dl not first child hide hide a
  • 如何将外部 div 的高度设置为始终等于特定内部 div 的高度?

    我有一个外部 div 其中包含三个内部 div 我希望最左边的内部 div 始终确定外部 div 的高度 如果其他内部 div 的内容 比最左边的 div 少 它们将有空白空间 如果他们有更多的内容 比最左边的div 他们将得到一个滚动条
  • Javascript 替换为正则表达式无法正常工作

    我正在尝试使用正则表达式验证名称 正则表达式阻止用户连续输入 2 个空格或点 这是我的代码 function test input var regex A Za z 0 1 s 0 1 input value input value rep
  • ☺ 不在移动版本中呈现

    我如何获得特殊角色 笑脸在移动浏览器中正确呈现 li a href http goo gl GjxlI title target blank span style font size 20px span a li 它在大多数浏览器上显示为
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css

随机推荐