CSS详解（3.选择器）

最新推荐文章于 2022-12-08 17:15:47 发布

张兵游勇

最新推荐文章于 2022-12-08 17:15:47 发布

阅读量8.8k

点赞数 2

分类专栏：笔记 css 文章标签： html css html5

本文链接：https://blog.csdn.net/qq_43623447/article/details/104015870

版权

本文详细介绍了CSS中的各种选择器，包括元素选择器、类选择器、ID选择器、后代选择器、属性和值选择器、通配符选择器、交集选择器、并级选择器、子选择器和伪类选择器。重点讲述了类选择器的用法，以及如何通过这些选择器实现精准的样式定位。

摘要由CSDN通过智能技术生成

一，元素选择器

HTML元素是最典型的选择器类型，任何一个HTML元素都可以做为选择器。元素选择器的有效范围为页面中所有的、名称相同的HTML元素。

格式：元素 { 属性: 值; }

例如：h1 { color: red; } h2 { color: #FF0000; } 或者：h1, h2 { color: #ff0000; }

二，类选择器【重点】

如果想要把某一个样式应用到不同的HTML元素上，可以采用类选择器来定义，然后在不同标签中应用它们。

格式1： .类名 { 属性: 值; }

格式2：元素.类名 { 属性: 值; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>类选择器示例1</title>
<style type="text/css">
.tt{
     font-size:10pt; font-family:黑体; color:#800080; font-weight:bold; }
</style>
</head>
<body>
<p class="tt">示例一</p> /*p标签应用名字为tt的类层叠样式表*/
<h1 class="tt">示例二</h1> /*h1标签也应用名字为tt的类层叠样式表*/
</body>
</html>

三，ID选择器

除了使用类选择器的方式定义一个样式以外，还可以使用ID定义样式。ID与类选择器的概念相似，只是ID选择器只能被引用一次，而类选择器可以被多次引用。
格式：#id名 { 属性: 值; }

示例：#red { color: red; }

    <p id="red">欢迎使用id选择器</p>

四，后代选择器

如果需要为位于某个标记符内的元素设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记

h1 b{ color:blue; } /注意h1和b之间以空格分隔/

五，属性和值选择器

下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

下面的例子为 title=“bjsxt” 的所有元素设置样式：

[title=bjsxt]
{
border:5px solid blue;
}

设置表单的样式

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

六，通配符选择器

<!DOCTYPE html>
<html lang&#

最低0.47元/天解锁文章

张兵游勇

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS详解（3.选择器）

文章目录一，元素选择器二，类选择器【重点】三，ID选择器四，后代选择器五，属性和值选择器六，通配符选择器七，交集选择器八，并级选择器九，子选择器十，伪类选择器一，元素选择器HTML元素是最典型的选择器类型，任何一个HTML元素都可以做为选择器。元素选择器的有效范围为页面中所有的、名称相同的HTML元素。格式：元素 { 属性: 值; }例如：h1 { color: red; } h2 ...
复制链接

扫一扫

专栏目录