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"> ...
随机推荐
- SQL统计数据之总结
一.查询SQL SELECT t1.规则编号 AS 编码, t1.规则描述 AS 名称, SUM( CASE WHEN t3.DATA_SOURCES = '00' THEN 1 ELSE 0 END ...
- Redis学习笔记之Jedis
Jedis语法总结 Jedis是Java代码操作Redis的工具包,里面封装了操作Redis的方法 Jedis jedis = new Jedis(String ip , String port) 1 ...
- IdentityServer网页登陆-登陆原理
前言 现代程序开发中身份验证.授权是一件非常非常复杂的事情(各种登陆方式.各种授权需求.各种跳转跳.各种加解密,搞得得头皮发麻),因为事情本身复杂,所以没把这件事理清楚之前,无论你用什么语言.什么框架 ...
- Spring IOC实现原理，源码深度剖析！
Spring容器高层视图 Spring 启动时读取应用程序提供的Bean配置信息,并在Spring容器中生成一份相应的Bean配置注册表,然后根据这张注册表实例化Bean,装配好Bean之间的依赖关系 ...
- kali 2019-04版安装问题
在这里主要解决的是kali的undercover mode 存在BUG,切换后出现无法还原.或还原失败的情况. 如果要解决的是中文乱码.kali桌面种类与安装和kali桌面切换的问题,直接看最底部的连 ...
- linux：项目上线
服务器选择 项目上线服务器必须是外网服务器 真实服务器 成本过高.多用于测试 云服务器 阿里云.腾讯云.百度云.华为云.盛大云.新浪云.亚马逊云等 官网:阿里云 1.注册/登录后 2.支付成功即可![ ...
- moectf2023 web wp
gas!gas!gas! 直接跑脚本 import requests session=requests.Session() url="http://127.0.0.1:14447" ...
- day05-面向对象编程：基础语法
Java面向对象:类的基础语法 [ 任务列表 ] 1.面向对象快速入门 2.什么是面向对象 3.类的基础语法--构造器 4.类的基础语法--this关键字 5.类的基础语法--封装 6.类的基础语法- ...
- 使用xtrabackup对MySQL8.0.34进行备份和恢复
Percona XtraBackup 是一款开源的.用于 MySQL 和 MariaDB 的热备份工具,它可以在不停止数据库服务的情况下进行全量或增量备份,并且能够快速恢复数据.以下从特点.安装.备份 ...
- 我把deepseek等大模型接入了微信公众号，打造个人AI助手
前言 最近deepseek大模型可是火出了圈,给国产大模型公司点赞.于是乎去deepseek试了一下效果,奈何太多人使用了,问两句来一句 "服务器繁忙,请稍后再试",体验感实在太差 ...