个人中心
文章发布
退出
作者热门文章
- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
27
4
举例：
<head>
<title>标签选择器</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>111111</p>
<p>222222</p>
<p>333333</p>
</body>特点:
语法细节:
举例：
<head>
<title>类选择器</title>
<style>
.red {
color: red;
}
.size30 {
font-size: 30px;
}
</style>
</head>
<body>
<p class="red">这是红色字体</p>
<p class="size30">字体大小为30px，不为红色字体</p>
<p class="red">这是红色字体</p>
<p>不为红色~~</p>
<p class="red">这是红色字体</p>
<p class="red size30">字体大小为30px，为红色字体</p>
</body>
特点:
和类选择器类似:
相当于，姓名是类选择器，可以重复
身份证号码是 id 选择器，是唯一的
举例：
<head>
<title>id选择器</title>
<style>
#p2 {
color: red;
}
</style>
</head>
<body>
<p>111111</p>
<p id="p2">222222</p>
<p>333333</p>
</body>
使用 * 的定义，选取所有的标签
举例:
<head>
<title>通配符选择器</title>
<style>
/* 使用 * 的定义, 选取所有的标签 */
* {
color: red;
}
</style>
</head>
<body>
<h2>h2标题</h2>
<h3>h3标题</h3>
<p>111111</p>
<p>222222</p>
<div>div标签</div>
</body>
又名: 包含选择器；选择某个父元素中的某个子元素
语法格式：
元素1 元素2 {
样式声明
}
① 元素间使用空格分割
② 元素 1 是父级，元素 2 是子级，只选元素 2 ，不影响元素 1
③ 元素 2 不一定非是"儿子"，也可以是 "孙子"
举例：
<head>
<title>后代选择器</title>
<style>
/* ol下任意li子元素 */
ol li {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>鸡蛋</li>
<li>牛奶</li>
</ul>
<ol>
<li>鸡蛋</li>
<li>牛奶</li>
</ol>
</body>
和后代选择器类似，但是只能选择子标签
语法格式：
元素1 > 元素2 {
样式声明
}
① 元素间使用大于号分割
② 只选"儿子"，不选"孙子"元素
③ 父和子都可以选择基础选择器中的任意一种
举例:
1.使用后代选择器:
<head>
<title>子选择器</title>
<style>
/* 后代选择器方式 链接1 2都会设置为红色 */
div a {
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">链接1</a>
<p>
<a href="#">链接2</a>
</p>
</div>
</body>2.使用子选择器:
<head>
<title>子选择器</title>
<style>
/* 子选择器: 只选择 div 下一级的子元素 */
div>a {
color: red;
}
</style>
</head>
<body>
<div>
<a href="#">链接1</a>
<p>
<a href="#">链接2</a>
</p>
</div>
</body>
用于选择多组标签
语法格式：
元素1，元素2 {
样式声明
}
① 元素间使用逗号 ，分割
② 表示同时选中元素 1 和 元素 2
③ 任何基础选择器都可以使用并集选择器
④ 并集选择器建议竖着写，每个选择器占一行 (最后一个选择器不能加逗号)
举例:
<head>
<title>并集选择器</title>
<style>
h3,li {
color: red;
}
</style>
</head>
<body>
<h3>苹果-</h3>
<p>西瓜</p>
<ul>
<li>香蕉-</li>
<li>葡萄-</li>
</ul>
</body>
a:link —— 选择未被访问过的链接
a:visited —— 选择已经被访问过的链接
a:hover —— 选择鼠标指针悬停上的链接
a:active —— 选择活动链接(鼠标按下了但是未弹起)
举例:
<head>
<title>链接伪类选择器</title>
<style>
a:link {
color: black;
/* 去掉 a 标签的下划线 */
text-decoration: none;
}
/* 链接访问后的样式 */
a:visited {
color: green;
}
/* 链接在鼠标放到上边的样式 */
a:hover {
color: red;
}
/* 链接在鼠标点击 未松开时的样式 */
a:active {
color: blue;
}
</style>
</head>
<body>
<a href="#">狗狗</a>
</body>结果演示:
思考: 如何让一个已经被访问过的链接恢复成未访问的状态？？
清空浏览器历史记录即可. ctrl + shift + delete
.
注意事项:
选取获取焦点的 input 表单元素
<head>
<title>focus 伪类选择器</title>
<style>
div>input:focus {
color: red;
}
</style>
</head>
<body>
<div>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</div>
</body>此时被选中的表单的字体就会变成红色
基础选择器:
| 选择器 | 作用 | 特点 |
|---|---|---|
| 标签选择器 | 能选出所有相同标签 | 不能差异化选择 |
| 类选择器 | 能选出一个或多个标签 | 根据需求选择, 最灵活, 最常用；可差异化表示不同的标签；可以让多个标签的都使用同一个标签 |
| id 选择器 | 能选出一个标签 | 同一个 id 在一个 HTML 中只能出现一次；id 是唯一的，不能被多个标签使 |
| 通配符选择器 | 选择所有标签 | 特殊情况下使用 |
复合选择器:
| 选择器 | 作用 | 注意事项 |
|---|---|---|
| 后代选择器 | 选择后代元素 | 可以是孙子元素 |
| 子选择器 | 选择子元素 | 只能选"儿子"，不能选"孙子" |
| 并集选择器 | 选择相同样式的元素 | 更好的做到代码重用 |
| 链接伪类选择器 | 选择不同状态的链接 | 按照 LVHA 的顺序书写，且注意书写格式 |
| focus 伪类选择器 | 选择被选中的元素 | input:focus 选择获得焦点的 < input>元素 |
27
4
0
我有一个名为 main.css 的 css 文件和另一个名为 style.css 的文件。我怎样才能在 main.css 中做到这一点？ .someClass { //apply rules to
在更新我的 css 之前，我在 Login.css 中有以下内容: body { background-image: url('./pictures/fond.png'); bac
我的 share point 2013 核心 css 和我的 css 之间存在 css 冲突。所以我想把我所有的类都放在 div #s4-workspace 下但是我搜索了一种方法来将所有类分组到这个
我知道您可以覆盖 jsp 页面从 jsp 包含 CSS 文件(即全局 CSS 文件)继承的 CSS 属性。 但是，如果元素中的某个属性弄乱了特定页面，而我不想只使用内联 CSS 在该页面中使用它怎么办
我刚刚发现了 initial-scale 元属性。 以前，我一直在使用 default.css 来定义我所有的样式和大小(用于字体和元素)，以便它们在桌面计算机的屏幕上显示得很好。然后，如果您使用的是
我正在尝试使用 LESS CSS 来编写我的 CSS。我已经按顺序导入了 style.less 和 less.js 文件。 现在我想提取 LESS 生成的 CSS。有什么办法可以做到吗？我不想使用脚本
我想知道是否有任何一种软件可以读取大量内联样式中的 HTML 文档并将所有这些样式转换为外部 css 文件。如果只有一页，我可以手动完成。但是有100页。有人有想法吗？ 最佳答案 就像有人说的那样，“
当我想从 Styled Components 迁移到 CSS Modules 时，出现了以下问题。 假设我有以下样式组件，它接受动态参数 offset和一个动态 CSS 字符串 theme : con
有没有办法将 CSS 类定义为与另一个类相等？例如，如果我有一个类: .myClass{ background-color: blue; } 有没有一种方法可以将第二个类定义为与 myClas
我正在尝试制作一组按钮，这些按钮贴在页面底部并且由固定的空间隔开。我正在使用 angularJS 的 ng-repeat 指令通过 ajax 请求获取数据，然后我用它来显示按钮。 我的问题在于让按
浏览器是否在加载 CSS 文件时解析 CSS？还是在整个 CSS 文件被浏览器下载后才进行解析？不同浏览器的做法有区别吗？我在哪里可以找到这种底层信息？ 这个问题不是 Load and executi
这个问题在这里已经有了答案: Can a CSS class inherit one or more other classes? (29 个答案) 关闭 3 年前。 标题有点乱，我给大家看一下。假
我遇到了最奇怪的问题...... 在最简单的形式中，我有一个包含以下内容的 index.html 文件: (在尝试确定根本原因的过程中，我已经大大减少了它) 当我查看页面的源代码时，我得到以下信息:
我正在使用 Mindscape Workbench 来最小化我的 scss 文件。我的页面设置为使用 *.min.css 文件。在随机时间，min 文件不会与系统的其余部分一起发布。 我有很多 css
请告诉我 CSS 框架和 CSS 网格之间的区别。 最佳答案 CSS 框架也可以是 CSS 网格框架。 CSS 网格框架用于构建 CSS 布局。有一些框架除了构建布局还有其他用途，例如 Hartija
我有无法从页面中删除或更改的 original.css 文件。原始.css table { border-collapse: collapse; border-spacing: 0;
我以前使用 bootstrap css import 很好。 但是我正在尝试使用 CSS 模块，所以我添加了几行。 { test: /\.css$/, use:
有没有办法在 css 选择器中创建一个 css 组。 例如: .SectionHeader { include: .foo; include: .bar; include: .
今天我学习了 CSS 中的两个概念，一个是 CSS 定位(静态、相对、绝对、固定)，另一个是 CSS Margin，它定义了元素之间的空间。 假设我想移动一个元素，这是最好的方法吗？因为这两个概念似乎
var paths = { css: './public/apps/user/**/*.css' } var dest = { css: './public/apps/user/css/' } /
我是一名优秀的程序员,十分优秀！