CSS3-使用CSS选择器
<!-- 选择所有元素 --> <!-- * --> <style type = "text/css"> *{ border: thin black solid; padding: 4px; } </style> <!-- 根据类型选择元素 --> <!-- <元素类型> --> <style type = "text/css"> a,th{ border: thin black solid; padding: 4px; } </style> <!--根据类选择元素 --> <!-- .<类名> 或 <元素类型>.类名 --> <style type = "text/css"> .class2 span.class1{ border: thin black solid; padding: 4px; } </style> <!-- 选择多个类 span.class1.class2 --> <!-- 使用ID选择元素 --> <!-- #<ID值> --> <style type = "text/css"> #id{ border: thin black solid; padding: 4px; } </style> <!-- 根据属性选择元素 --> <!-- [属性] 或 <元素类型>[属性] --> <style type = "text/css"> [href]{ border: thin black solid; padding: 4px; } </style> <!-- 可为属性限定条件: css版本 --> <!-- [属性] 2 --> <!-- [属性="a"] 属性值为a 2 --> <!-- [属性^="a"] 属性值以a开头 3 --> <!-- [属性$="a"] 属性值以a结尾 3 --> <!-- [属性*="a"] 属性值含有a 3 --> <!-- [属性~="a"] 属性值其一个为a元素 2 --> <!-- [属性|="a"] 属性为连字符分割,其一a 2 --> <!-- 并集选择器 --> <style type = "text/css"> a , [lang|="en"]{ border: thin black solid; padding: 4px; } </style> <!-- 后代选择器 --> <!-- 选择所有后代 --> <style type = "text/css"> p span{ border: thin black solid; padding: 4px; } </style> <style type = "text/css"> #id td{ border: thin black solid; padding: 4px; } </style> <!-- 选择子元素 --> <!-- 选择直接子代 --> <style type = "text/css"> body > * > span , tr > th{ border: thin black solid; padding: 4px; } </style> <!-- 选择兄弟元素 --> <!-- 选择紧跟在其后的元素 --> <style type = "text/css"> p + a{ border: thin black solid; padding: 4px; } </style> <!-- 选择指定元素之后的元素 --> <style type = "text/css"> p ~ a { border: thin black solid; padding: 4px; } </style> <!-- 使用伪元素选择器 --> <!-- 使用 ::first-line 选择器,选择文本块的首行 --> <style type = "text/css"> ::first-line { background: grey; color: white; } </style> <style type = "text/css"> p::first-line{ border: thin black solid; padding: 4px; } </style> <!-- 使用 ::first-letter 选择器 --> <style type = "text/css"> ::first-letter{ border: thin black solid; padding: 4px; } </style> <!--使用 :before 和 :after 选择器 --> <!-- :before 在选中元素的内容之前插入内容 --> <!-- :after 在选中元素的内容之后插入内容 --> <style type = "text/css"> a:before{ content: "插入的内容"; } a:after { content: "插入的内容"; } </style> <!-- 使用CSS计数器 --> <!-- :before 和 :after 经常和CSS计数器一起使用 --> <style type = "text/css"> body { counter-reset: countername; } p:before { content: counter(countername)"."; counter-increment: countername; } </style> <!-- counter-reset: 为计数器设置名称和初始值; --> <!-- 例如: counter-reset: countername1 1 countername2 2; --> <!-- 使用counter(countername)使用计数器; --> <!-- 可改变数值格式: counter(countername, lower-alpha); --> <!-- counter-increment: 设置计数器增量; --> <!-- 例如 counter-increment: countername 2; -->
相关推荐
CSS基础-派生选择器,CSS入门必备资料
day03(CSS01-基础选择器+字体文本样式).rar
css-selector-tokenizer, 解析和 stringifies CSS选择器 CSS模块:CSS选择器标记器解析和 stringifies CSS选择器。import Tokenizer from "css-selector-tokenizer";let input = "a#content.act
postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...
使用自定义命名空间.a => .prefix .a每个CSS选择器添加前缀。 目录 安装 $ npm install postcss-prefix-selector 与PostCSS结合使用 const prefixer = require ( 'postcss-prefix-selector' ) // css to be ...
CSS选择器 什么是CSS选择器? CSS基础选择器 01 CSS基础选择器 要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。 CSS基础选择器 基础选择器: 针对...
CSS选择器-.pdf
1、了解了css的概念和特点,在网页中使用css的四种方式及选择器的语法格式及三 种选择器;标签选择器、类选择器和ID选择器。 2、掌握了CSSde 创建及管理方式和其中常用的属性,应用css+DIV进行页面布局的DIV标记,...
CSS3并不是一门语言,我们知道css是层叠样式表,是一种样式语言,是用来告诉浏览器如何渲染页面的。css3是css规范的最新版本,在css2.1上增加了很多强大的新功能,用来帮助开发人员解决一些问题。
该插件提供了使用大多数CSS变量功能(包括选择器级联和一些警告)的一种面向未来的方式,因为它只能看到CSS,而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm install postcss-css-variables --save-dev 目录 -- ...
postcss选择器解析器 选择器解析器,具有用于处理选择器字符串的内置方法。 安装 使用可以: npm install postcss-selector-parser 快速开始 const parser = require ( 'postcss-selector-parser' ) ; const ...
CSS选择器 xmind - 选择器分类(ID选择器,类选择器,标签选择器,通配选择器,属性选择器,伪类选择器)。 - 选择器关系(分组,后代,子元素,相邻兄弟,后续兄弟)。 - CSS特性(优先级,继承,层叠)。
本人清风,这次给大家分享本人学习的心得和笔记,记录点点滴滴,用的md格式,这是第一个,CSS选择器
python 12、web前端html,css 2-1_CSS介绍及使用、常用选择器介绍_Day02_AM.mp4
React组件的css选择器
使用标签选择器的语法格式 标签选择器名{属性:值;} <标签名>…标签名> 2 标签选择器 2 编写CSS使得表格显示下面的样式。 font-size:25px; color:red; font-size:30px; background-color:blue; 2 id选择器,可以为...
CSS3参考手册(css3语法使用查询手册)CHM版,可快速索引和搜索CSS3各种属性值以及具体的用法,说详细介绍有CSS3选择器的各方面知识,这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...
CSS3选择器--属性选择器;CSS3选择器简介;使用选择器可以方便的定位于指定的元素,而不用使用额外的class或id,通过这种方式也可以让我们的代码和样式更加简洁、灵活、易控制。;属性选择器;属性选择器;E[att^=value]...
:white_heavy_check_mark: 支持PostCSS v7或v8 一个插件,该插件为CSS样式添加了选择器,以限制它们对页面中父元素的影响。如何使用这个插件? 这些说明仅适用于此插件。 请参阅网站以获取框架信息。安装使用yarn ...