标签 功能介绍
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标签名的更多相关文章

  1. html+css学习总结

    HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...

  2. Javaweb 第1天 HTML和CSS课程

    HTML和CSS课程 今日大纲 ● 了解Java    Web开发 ● HTML常用标签 ● CSS的使用 ********************************************** ...

  3. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  4. Css技术入门笔记01

    在学习html的时候,html中的标签都具备了特定功能,或者含义,以及相应的样式效果.可是在有些时候我们可能仅仅希望使用 html标签把要显示的数据封装起来,而不需要任何的样式效果.这时就需要单独的标 ...

  5. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  6. css提取数据2个常用方法

    提取标签里的内容 所谓数据就是HTML里标签的内容,如下面红色字体,就是标签内容 <title>我只是个实验 - SCRAPY</title> 提取标签里的数据,标签可以是ti ...

  7. 第一周复习二 （CSS样式表及其属性）

    样式表三种写法 1内联写法:style直接写在标签内.个人感觉多用于个别标签,一般情况优先级较高 style="font-size:16px;" 2内嵌写法:写在<head& ...

  8. 关于HTML和Css的一些总结

    HTML HTML特点与基本结构 HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language). 超文本就是指页面内可以包含图片.链接 ...

  9. 前端三件套 HTML+CSS+JS基础知识内容笔记

    HTML基础 目录 HTML基础 HTML5标签 doctype 标签 html标签 head标签 meta标签 title标签 body标签 文本和超链接标签 标题标签 段落标签 换行标签 水平标签 ...

  10. 2018.3.29 div格式设置

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

随机推荐

  1. Docker 多平台打包错误

    1. Multi-platform build is not supported for the docker driver. 问题 因为 Docker 默认使用的 builder 不支持多架构构建镜 ...

  2. 一点区块链资料-copy

    1. 场景描述 (1)今天找资料,无意中看到15年底-16年初弄的关于区块链的资料,当时写了个交流汇报区块链的ppt,感觉挺好的,共享下,希望能帮助朋友们理解区块链. (2)背景:15年底,老板从朋友 ...

  3. MongoDB：使用场景简介

  4. [Java] Solon 框架的三大核心组件之一插件扩展体系

    1.Solon 的三大核心组件 核心组件 说明 Plugin 插件扩展机制 提供"编码风格"的扩展体系 Ioc/Aop 应用容器 提供基于注入依赖的自动装配体系 Context+H ...

  5. oracle数据导入导出，备份还原命令expdp&impdp(只导出元数据，不导出表数据，最全，最完善的步骤)

    感谢金龙鱼先生分享,原文来自https://blog.csdn.net/kou869929526/article/details/125791113 一,编码要求以及数据库版本要求 检查数据库版本(用 ...

  6. datagrip中调用oracle存储过程

    declare mess varchar2(300); begin P_DETAIL_PROC(参数1,...,mess); DBMS_OUTPUT.PUT_LINE(mess); end; P_DE ...

  7. 0425-字节输入流FileInputStream

    package A10_IOStream; import java.io.FileInputStream; import java.io.IOException; /* java.io.InputSt ...

  8. LangChain基础篇 (01)

    LangChain 是什么 Langchain 是一个开源框架,它允许开发人员将大型语言模型与外部的计算和数据源结合起来,是一个通过组合模块和能力抽象来扩展 LLM 的助手 为什么需要 LangCha ...

  9. HPC的基本概念

    本文分享自天翼云开发者社区<HPC的基本概念>,作者:它零食抱佛jio HPC(High Performance Computing)是一种高性能计算技术,它利用大规模并行处理器集群或超级 ...

  10. DeepSeek模型技术动态引行业关注，企业生产系统API迁移需审慎评估

    在当今数字化浪潮中,人工智能技术迅猛发展,各类模型如雨后春笋般涌现,而 DeepSeek 模型凭借其独特的优势,在人工智能领域迅速崭露头角,成为备受瞩目的新星. DeepSeek 模型由杭州深度求索人 ...