css标签名
| 标签 | 功能介绍 |
|---|---|
| p | 标签选择器 |
| #id | id选择器 |
| .class | class选择器 |
| * | 通用选择器 |
| p,a | 多个标签选择器 |
| p a | 后代选择器 |
| p>a | 子代选择器 |
| p+a | 紧挨着p后面的a选择器 |
| p~a | p后面所有a选择器 |
| [attribute] | 属性选择器 |
| p[attribute="value"] | 属性是“value”选择器 |
| p[attribute^="value"] | 属性前几个字是“value”选择器 |
| p[attribute&="value"] | 属性后几个字是“value”选择器 |
| p[attribute*="value"] | 属性里包含“value”选择器 |
| p[attribute|="value"] | 属性由“value-”开头的选择器 |
例子
```
<head>
<title>CSS选择器练习</title>
</head>
<style>
p {
color: #333;
font-weight: bolder;
font-style: italic;
font-family: "楷体";
font-size: 18px;
white-space: pre;
}
.highlight {
background-color: yellow;
}
#header {
border: 2px solid blue;
}
* {
margin: 0;
padding: 0;
}
h1,
h2 {
font-family: "Microsoft YaHei";
}
img[alt] {
border: 1px dashed red;
}
input[type="text"] {
pointer-events: none;
}
a[href$=".pdf"] {
color: red;
}
nav li {
display: inline-block;
}
article p {
line-height: 1.5;
}
h2+p {
margin-top: 20px;
}
h2~p {
color: navy;
}
<body>
<header id="header">
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="document.pdf">PDF文档</a></li>
</ul>
</nav>
</header>
<main class="container">
<article>
<h2 class="highlight">文章标题</h2>
<p>段落内容...</p>
<div>
<p>嵌套段落内容...</p>
</div>
</article>
<section>
<h2>章节标题</h2>
<p>章节内容 ...</p>
<p>更多内容 ...</p>
</section>
<form>
<input type="text" placeholder="文本输入">
<input type="password" placeholder="密码输入">
<img src="data:image.jpg" alt="示例图片">
</form>
</main>
</body>
```
css标签名的更多相关文章
- html+css学习总结
HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...
- Javaweb 第1天 HTML和CSS课程
HTML和CSS课程 今日大纲 ● 了解Java Web开发 ● HTML常用标签 ● CSS的使用 ********************************************** ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- Css技术入门笔记01
在学习html的时候,html中的标签都具备了特定功能,或者含义,以及相应的样式效果.可是在有些时候我们可能仅仅希望使用 html标签把要显示的数据封装起来,而不需要任何的样式效果.这时就需要单独的标 ...
- CSS 简介、 选择器、组合选择器
#CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- css提取数据2个常用方法
提取标签里的内容 所谓数据就是HTML里标签的内容,如下面红色字体,就是标签内容 <title>我只是个实验 - SCRAPY</title> 提取标签里的数据,标签可以是ti ...
- 第一周复习二 （CSS样式表及其属性）
样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head& ...
- 关于HTML和Css的一些总结
HTML HTML特点与基本结构 HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language). 超文本就是指页面内可以包含图片.链接 ...
- 前端三件套 HTML+CSS+JS基础知识内容笔记
HTML基础 目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 ...
- 2018.3.29 div格式设置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
随机推荐
- 从BIOS+MBR迁移到UEFI+GPT 并修复Ubuntu Grub2 UEFI引导
之前在虚拟机里使用了默认配置安装了Ubuntu16.04,由于需要扩充磁盘空间不得不将磁盘从MBR分区表转换到GPT分区表. 简单介绍一下思路:首先通过Windows下的DiskGenius软件备份U ...
- 【译】GitHub Copilot Free 在 Visual Studio 中
可能您还没有听说过,GitHub 刚刚宣布了 Copilot Free(免费版)!好消息是:您现在已经可以在 Visual Studio 中开始使用 Copilot Free 了.它现在已经可用了,我 ...
- MyBatis的深入原理-架构设计以及实例分析
MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简单.优雅.本文主要讲述MyBatis的架构设计思路,并且讨论MyBatis的几个核心部件,然后结合一个select查询实例, ...
- Docker容器的原理、特征、基本架构、与应用场景
什么是容器? 一句话概括容器:容器就是将软件打包成标准化单元,以用于开发.交付和部署. 容器镜像是轻量的.可执行的独立软件包 ,包含软件运行所需的所有内容:代码.运行时环境.系统工具.系统库和设置. ...
- 一款基于 .NET8 + Vue 开源、免费、跨平台的企业级在线考试系统
前言 今天大姚给大家分享一款基于 .NET8 + Vue 开源.免费(AGPL-3.0开源协议).跨平台的企业级在线考试系统:XBLMS. 项目介绍 XBLMS是一款基于 .NET8 + Vue 开源 ...
- Phi小模型开发教程：用C#开发本地部署AI聊天工具，只需CPU，不需要GPU，3G内存就可以运行，不输GPT-3.5
大家好,我是编程乐趣. 行业诸多大佬一直在说:"2025年将是AI应用元年",虽然说大佬的说法不一定对,但AI趋势肯定没错的. 对于我们程序员来说,储备AI应用开发技能,不管对 ...
- ReentrantLock实现机制
掌握Reentrantlock 具体结构 下文Reentrantlock简称RL,阅读之前强烈建议读一下AQS源码解析: https://www.cnblogs.com/seamount3/p/186 ...
- 并发编程 - 线程同步（六）之锁lock
通过前面对Interlocked类的学习,相信大家对线程同步机制有了更深的理解,今天我们将继续需要另一种同步机制--锁lock. lock是C#语言中的关键字,是线程同步机制的一种简单的互斥锁实现方式 ...
- P4774 [NOI2018] 屠龙勇士 题解
传送门 题解 思路 由题目可知,一条龙被攻击 \(x\) 次并回复若干次后生命值恰好为 \(0\) 则死亡,可以得出如下式子: \[\large ATK_i \cdot x \equiv a_i(\m ...
- [JOI 2020 Final] 火事 题解
给一篇题解.(下面这张图是从 luogu 上粘贴的,因为不太会画图) 其中纵坐标为 \(t\),横坐标为 \(a_i\). 发现同颜色块只有平行四边形和直角梯形(等腰直角三角形)两种情况. 可以将直角 ...