1、position用法技巧，2、CSS 属性 选择器，3、CSS 选择器
CSS 媒体类型
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。
媒体类型
一些 CSS 属性只设计了某些媒体。例如 voice-family 属性是专为听觉用户代理。其他一些属性可用于不同的媒体类型。例如， font-size 属性可用于屏幕和印刷媒体，但有不同的值。屏幕和纸上的文件不同，通常需要一个更大的字体，sans-serif 字体比较适合在屏幕上阅读，而 serif 字体更容易在纸上阅读。
@media 规则
@media 规则允许在相同样式表为不同媒体设置不同的样式。
在下面的例子告诉我们浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。请注意，font-weight 在屏幕上和纸上设置为粗体：
实例
@media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} }
其他媒体类型
注意：媒体类型名称不区分大小写。
| 媒体类型 | 描述 |
|---|---|
| all | 用于所有的媒体设备。 |
| aural | 用于语音和音频合成器。 |
| braille | 用于盲人用点字法触觉回馈设备。 |
| embossed | 用于分页的盲人用点字法打印机。 |
| handheld | 用于小的手持的设备。 |
| 用于打印机。 | |
| projection | 用于方案展示，比如幻灯片。 |
| screen | 用于电脑显示器。 |
| tty | 用于使用固定密度字母栅格的媒体，比如电传打字机和终端。 |
| tv | 用于电视机类型的设备 |
CSS 属性 选择器
具有特定属性的HTML元素样式
具有特定属性的HTML元素样式不仅仅是class和id。
注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。
属性选择器
下面的例子是把包含标题（title）的所有元素变为蓝色：
[title] { color:blue; }
属性和值选择器
下面的实例改变了标题title='runoob'元素的边框样式:
实例
[title=runoob] { border:5px solid green; }
尝试一下 »
属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
实例
[title~=hello] { color:blue; }
可以理解为约等于
下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
实例
[lang|=en] { color:blue; }
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
表单样式
属性选择器样式无需使用class或id的形式:
实例
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } input[type="button"] { width:120px; margin-left:35px; display:block; }
CSS 属性选择器 *=, |=, ^=, $=, *= 的区别
先上总结:
"value 是完整单词" 类型的比较符号: ~=, |=
"拼接字符串" 类型的比较符号: *=, ^=, $=
1.attribute 属性中包含 value:
[attribute~=value] 属性中包含独立的单词为 value，例如：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />
[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：
[title~=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
2.attribute 属性以 value 开头:
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
[lang|=en] --> <p lang="en"> <p lang="en-us">
attribute^=value] 属性的前几个字母是 value 就可以，例如：
CSS 选择器
CSS选择器用于选择你想要的元素的样式的模式。
"CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。
| 选择器 | 示例 | 示例说明 | CSS |
|---|---|---|---|
| .class | .intro | 选择所有class="intro"的元素 | 1 |
| #id | #firstname | 选择所有id="firstname"的元素 | 1 |
| * | * | 选择所有元素 | 2 |
| element | p | 选择所有<p>元素 | 1 |
| element,element | div,p | 选择所有<div>元素和<p>元素 | 1 |
| element element | div p | 选择<div>元素内的所有<p>元素 | 1 |
| element>element | div>p | 选择所有父级是 <div> 元素的 <p> 元素 | 2 |
| element+element | div+p | 选择所有紧接着<div>元素之后的<p>元素 | 2 |
| [attribute] | [target] | 选择所有带有target属性元素 | 2 |
| [attribute=value] | [target=-blank] | 选择所有使用target="-blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
| [attribute|=language] | [lang|=en] | 选择一个lang属性的起始值="EN"的所有元素 | 2 |
| :link | a:link | 选择所有未访问链接 | 1 |
| :visited | a:visited | 选择所有访问过的链接 | 1 |
| :active | a:active | 选择活动链接 | 1 |
| :hover | a:hover | 选择鼠标在链接上面时 | 1 |
| :focus | input:focus | 选择具有焦点的输入元素 | 2 |
| :first-letter | p:first-letter | 选择每一个<P>元素的第一个字母 | 1 |
| :first-line | p:first-line | 选择每一个<P>元素的第一行 | 1 |
| :first-child | p:first-child | 指定只有当<p>元素是其父级的第一个子级的样式。 | 2 |
| :before | p:before | 在每个<p>元素之前插入内容 | 2 |
| :after | p:after | 在每个<p>元素之后插入内容 | 2 |
| :lang(language) | p:lang(it) | 选择一个lang属性的起始值="it"的所有<p>元素 | 2 |
| element1~element2 | p~ul | 选择p元素之后的每一个ul元素 | 3 |
| [attribute^=value] | a[src^="https"] | 选择每一个src属性的值以"https"开头的元素 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 |
| [attribute*=value] | a[src*="runoob"] | 选择每一个src属性的值包含子字符串"runoob"的元素 | 3 |
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 |
| :only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | 3 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
| :root | :root | 选择文档的根元素 | 3 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） | 3 |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） | 3 |
| :enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
| :checked | input:checked | 选择每个选中的输入元素 | 3 |
| :not(selector) | :not(p) | 选择每个并非p元素的元素 | 3 |
| ::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
| :read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
| :read-only | :read-only | 用于匹配设置 "readonly"（只读） 属性的元素 | 3 |
| :optional | :optional | 用于匹配可选的输入元素 | 3 |
| :required | :required | 用于匹配设置了 "required" 属性的元素 | 3 |
| :valid | :valid | 用于匹配输入值为合法的元素 | 3 |
| :invalid | :invalid | 用于匹配输入值为非法的元素 | 3 |
[lang^=en] --> <p lang="ennn">
3.attribute 属性以 value 结尾:
[attribute$=value] 属性的后几个字母是 value 就可以，例如：
a[src$=".pdf"]
1、position用法技巧，2、CSS 属性 选择器，3、CSS 选择器相关推荐
- css 选择href属性值,巧用CSS属性值正则匹配选择器(小技巧)
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
- 图标选择器_【小技巧】巧用CSS属性值正则匹配选择器
属性值正则匹配选择器包括下面3种: [attr^="val"] [attr$="val"] [attr*="val"] 这3种属性选择器是字 ...
- css属性 margin right,css margin-right属性怎么用
css margin-right属性定义及用法 在css中,margin-right属性是使用来设置元素的右外边距,属性值可以是负数.如果我们需要同时设置元素的上下左右的外边距,我们可以使用margi ...
- 网页中的盒模型css属性,详解CSS中的Box Model盒属性的使用
页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ).请看 Chrome DevTools 里的截图: 可以显而易见的看出盒模型由 4 部分组成.从内到外分别是: ...
- css 窗口模式,如何：使用“CSS 属性”窗口
如何:使用"CSS 属性"窗口 11/15/2012 本文内容 您可以使用**"CSS 属性"**窗口来查看并修改级联样式表 (CSS) 样式属性. 对于 We ...
- html里面textfield属性,StyleableTextField的CSS属性htmlText
我有一个显示非常基本的HTML的StyleableTextField.要格式化HTML,我目前使用AS3中声明的样式表. 这工作正常,但设计师编辑颜色和东西效率相当低,所以我需要将这些标签包含在我的主 ...
- DOM进阶之CSS属性操作
CSS操作属性,指的是使用JavaScript来操作一个元素的CSS样式.在JavaScript中,CSS属性操作同样有两种, 获取CSS属性值 设置CSS属性值 1.获取CSS属性值 语法: get ...
- JQuery中的CSS属性及操作
目录 1.JQuery中的css()方法 1) 返回 CSS 属性 2) 设置 CSS 属性 3) 设置多个 CSS 属性 2.JQuery的CSS操作 3.JQuery的class操作 1.JQue ...
- html5属性单词,常用的CSS属性的英文单词总结及用法、解释
在div css制作中常用的CSS属性的英文单词介绍.解释与css样式用法总结.这些单词无需一定要记住会拼写,但是要求看见他们就能认识他们并知道他们的属性及用法,这里有个记住他们属性的技巧就是多制作和 ...
- CSS基础选择器（标签选择器、类选择器、多类名选择器、 id选择器、通配符选择器、属性选择器）
CSS基础选择器 选择器种类 标识 优缺点 标签(元素) div 快速为某一类标签统一样式,但不能设计差异化样式 类 .one-letter 为元素对象定义单独或者相同的样式 ID #app 同一个页 ...
最新文章
- GIT之git常用配置和操作
- Go 变量及基本数据类型2
- 长沙计算机中级职称分数公布,大家所期待的2020年湖南省长沙中级职称评审公示...
- 【2016年第6期】基于大数据的移动互联网主动运维理论和实践进展
- ZZULIOJ 1092: 素数表(函数专题）
- 企业平均每年遭遇9起有针对性攻击
- 记录一下ListItem类的常用的方法
- Linux集群和自动化维1.1.1 什么是HTTP 1.1
- ExtJS2.0实用简明教程——可编辑表格EditorGridPanel
- 十种排序算法总结（冒泡、插入、选择、希尔、归并、堆、快速，计数，桶，基数）
- [Pytorch系列-71]：生成对抗网络GAN - 图像生成开源项目pytorch-CycleGAN-and-pix2pix - 使用预训练模型训练pix2pix模型
- 任天堂游戏 html5,明年的预备阵容！任天堂承诺却还没出的作品
- 获取FPGA芯片序号
- PID调谐方法：根据开环响应特性调谐（一）
- 春招进行时：简历信息安全危机
- 如何写.bat批处理文件
- 锂离子电池是由什么组成的
- 《罗马革命》豆瓣 9.1 从恺撒大帝到屋大维
- Voyager CEO谈为什么加密货币监管将促进大规模采用(上篇)
- 组态王读mysql数据库_组态王6.55连接MySql数据库（笔记）