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"> ...
随机推荐
- java线上问题跟踪工具Arthas的第一次使用
Arthas 是一款线上监控诊断产品,通过全局视角实时查看应用 load.内存.gc.线程的状态信息,并能在不修改应用代码的情况下,对业务问题进行诊断,包括查看方法调用的出入参.异常,监测方法执行耗时 ...
- Jenkins+Coverage的代码覆盖率集成实践
Jenkins+Coverage的代码覆盖率集成实践 一.工具介绍 Jenkins: Jenkins是一个开源的.基于Java开发的持续集成工具,它可以帮助开发人员自动化构建.测试和部署软件项目. C ...
- 操作系统发展历史与Linux
操作系统发展历史与Linux 随着计算机技术的迅猛发展,操作系统作为计算机系统的核心软件,经历了从单一到多样.从封闭到开放的演变过程.从最初的批处理系统,到分时操作系统的兴起,再到个人计算机操作系统的 ...
- FLink自定义Kafka Source，处理后转发给下一个kafka topic
一.依赖配置 pom文件:https://www.cnblogs.com/robots2/p/16048648.html kafka单机版安装:https://www.cnblogs.com/robo ...
- AI之Ollama
介绍 什么是llama LLaMA(Large Language Model Meta AI)是Meta开发的大规模预训练语言模型,基于Transformer架构,具有强大的自然语言处理能力.它在文本 ...
- C# 如何解决文件写权限不可访问
原文链接 实际业务中,我们可能会遇到我们的安装包将程序安装在C盘Program Files目录下后,有些文件要修改或者新增会导致拒绝访问的异常.但是我们又不想把数据放临时文件夹AppData中,那么如 ...
- [SDOI2015] 序列统计 题解
乘法并不容易用 FFT 或 NTT 维护,考虑在模意义下化乘为加. 化乘为加主要有两种方法:\(\log\) 和 \(\gamma\)(指标),由于在取模意义下,所以使用后者. 那剩下的部分就是快速幂 ...
- CF145C Lucky Subsequence 题解
首先,我们对这个幸运数进行分析,发现: \(10^9\) 以内只有 \(1023\) 个幸运数,即 \(\sum\limits_{i=0}^92^i\) 个. 考虑对幸运数和非幸运数分类讨论. 幸运数 ...
- Typecho 如何开启 HTTPS
一般来说,我们直接开启 HTTPS 就行,开启后进去网站后台修改网站的 URL 即可. 但是我昨天发现,我的工具箱迁移服务器之后,前台看着是很正常的,但是后台的登陆页面引入的依然的 http 标头,所 ...
- Typecho防黑安全加固-修改后台路径
删除安装文件 成功安装后删除install.php文件.install/文件夹. 修改后台地址 把admin修改为黑客猜不到的名字,例如pipixia,防止黑客穷举密码. 修改admin文件夹名称 修 ...