学习笔记 css3--选择器&新增颜色模式&文本相关

Css3 选择器 --属性选择器

E[attr]只使用属性名，但没有确定任何属性值，
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写 E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的（注意：这个方法会把attr的属性值当做一个整体字符串处理，即如果有多个值，中间用空格隔开，空格也算作'value的一部分'）
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的（注意：这个方法会把attr的属性值当做一个整体字符串处理，即如果有多个值，中间用空格隔开，空格也算作'value的一部分'）
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 li{height:30px; border:1px solid #000;margin:5px 0;}

 li[name]{ background:red;}

 li[name = 'title1']{background:black}

 li[name ~= 'val4']{background:pink}

 li[name ^= 'val3']{background:gray}

 li[name $= ' val4']{background:green}

 li[name *= '1val3']{background:blue}

 li[name |= 'v']{background:yellow}

 </style>

 </head>

 <body>

 <ol>

     <li></li>

     <li name="val1"></li>

     <li></li>

     <li name="val2"></li>

     <li></li>

     <li name='title1'></li>

     <li></li>

     <li name='val3 val4'></li>

     <li></li>

     <li name='val3val4'></li>

     <li></li>

     <li name='val1val3val4'></li>

     <li></li>

     <li name='v-3'></li>

     <li></li>

     <li name='v'></li>

 </ol>

 </body>

 </html>

Css3 选择器 –结构性伪类

E:nth-child(n) 表示E父元素中的第n个字节点
　　p:nth-child(odd){background:red}/*匹配奇数行*/
　　p:nth-child(even){background:red}/*匹配偶数行*/
　　p:nth-child(2n){background:red}

注意：n起始是0；第一个子元素的下标是1；

E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E的父元素中只有个一个子节点，且子节点的类型为E。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中子节点E的数量有且只有一个。注意：子节点不包含文本节点

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 li,p{height:30px; border:1px solid #000;margin:5px 0;}

 li:nth-child(2n+1){background: red}

 li:nth-last-child(2){background: yellow}

 li:nth-of-type(3){background:grey}

 li:empty{background: black;}

 li:first-child{background: blue;}

 li:last-child{background: blue;}

 p:first-of-type{background: green;}

 div div:last-of-type{background:green;}

 p span:only-child{background:pink;}

 strong:only-of-type{background:orange}

 </style>

 </head>

 <body>

 <ol>

     <li>&nbsp;</li>

     <li>&nbsp;</li>

     <li>&nbsp;</li>

     <li></li>

     <li>&nbsp;</li>

     <li>&nbsp;</li>

     <li>&nbsp;</li>

     <li>&nbsp;</li>

     <li>&nbsp;</li>

     <li>&nbsp;</li>

 </ol>

 <div>

     <p><span>1</span></p>

     <div>div</div>

     <p><span></span></p>

     <div>div</div>

     <p><span>p3</span></p>

     <p><span></span></p>

     <p></p>

     <div>div</div>

     <strong>strong</strong>

 </div>

 </body>

 </html>

Css3 选择器 --伪类

E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配（s可以是css基本的选择器，例如#id，.class，tag）
E~F表示E元素毗邻的F元素

新增颜色模式

rgba

r Red 红 0-255

g Green 绿 0-255

b Blue 蓝 0-255

a Alpha 透明 0-1

Hsl(基本用不到，因为太专业了。。)

H Hue 色调任意数值

S saturation 饱和度

0%-100%

L Lightness 亮度 0%-100%

文字阴影

text-shadow：x y blur color, …

参数 x 横向偏移

y 纵向偏移

blur 模糊距离

color 阴影颜色

文本阴影如果加很多层，会很卡很卡很卡

阴影叠加 text-shadow:2px 2px 0px red, 2px 2px 4px green;
先渲染后面的，再渲染前面的

文字相关内容

文字描边
-webkit-text-stroke:宽度颜色

新增文本功能

Direction 定义文字排列方式(全兼容)

Rtl 从右向左排列

Ltr 从右向左排列

注意要配合unicode-bidi 一块使用

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

p{ width:400px; border:1px solid #000;direction:rtl;unicode-bidi:bidi-override;}

</style>

</head>

<body>

<p>独家：美国与数千公司合作获取情报</p>

</body>

</html>

Text-overflow 定义省略文本的处理方式

clip 无省略号

Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

p{ width:300px;border:1px solid #000; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

</style>

</head>

<body>

<p>元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。</p>

</body>

</html>

自定义文字

格式

@font-face {

    font-family: ‘miaov';

    src: url('111-webfont.eot');

    src: url('111-webfont.eot?#iefix') format('embedded-opentype'),

         url('111-webfont.woff') format('woff'),

         url('111-webfont.ttf') format('truetype'),

         url('111-webfont.svg#untitledregular') format('svg');

    font-weight: normal;

    font-style: normal;

}

转换字体格式生成兼容代码
http://www.fontsquirrel.com/fontface/generator

学习笔记 css3--选择器&新增颜色模式&文本相关的更多相关文章

[CSS3] 学习笔记-CSS3选择器详解（一）
1.属性选择器在CSS3中,追加了3个属性选择器,分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. <!doctype html> ...
IT兄弟连 HTML5教程 CSS3属性特效新增颜色模式
对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分.网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式.随着CSS3的出现以及越来越多的浏览器对它的 ...
JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器和并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
Redis学习笔记八：集群模式
作者:Grey 原文地址:Redis学习笔记八:集群模式前面提到的Redis学习笔记七:主从复制和哨兵只能解决Redis的单点压力大和单点故障问题,接下来要讲的Redis Cluster模式,主要是 ...
并发编程学习笔记(9)----AQS的共享模式源码分析及CountDownLatch使用及原理
1. AQS共享模式前面已经说过了AQS的原理及独享模式的源码分析,今天就来学习共享模式下的AQS的几个接口的源码. 首先还是从顶级接口acquireShared()方法入手: public fin ...
Android Studio 学习笔记(一)环境搭建、文件目录等相关说明
Android Studio 学习笔记(一)环境搭建.文件目录等相关说明引入对APP开发而言,Android和iOS是两大主流开发平台,其中区别在于 Android用java语言,用Android ...
CSS学习笔记(1):选择器
一.元素选择器 HTML文档元素就是最基本的选择器如: <!DOCTYPE html> <html lang="en"> <head> < ...
CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...

随机推荐

StringList 自定义快速排序
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...
OS X EI Capitan 10.11.4中sudo无法起作用的解决方法
mac升级到OSX EI Capitan 10.11.4后sudo命令无法起作用,执行任何操作总是显示Operation denied.这是因为在10.11.4中引入了Rootless机制,即就算是R ...
Tomcat学习笔记 - 错误日志 - Tomcat部署项目或修改xml配置出现无法保存的情况（拒绝访问）
原因分析:(windows下) 可能有人会发现在编辑好 tomcat-users.xml 文件后无法保存,原因是使用的用户没有权限修改文件,可能是把 Tomcat 发行包放到了一个需要管理员权限才能修 ...
css3实现手机qq空间菜单按钮
工作之余写的一个类似于QQzone的菜单效果先上截图: 图一为点击按钮前界面: 图二为点击按钮后的界面下面上代码:  <style type=" ...
Starship Troopers（HDU 1011 树形DP）
题意: 给定n个定点和m个士兵,n个定点最终构成一棵树,每个定点有一定x个bugs和y个value,每20个bug需要消耗一个士兵,不足20也消耗一个,然后最终收获y个value,只有父节点被占领后子 ...
win7 Oracle 11g安装及安装中遇到的问题
根据自己的系统从oracle官方下载安装包,官方地址:http://www.oracle.com/index.html win7的oracle 11g 安装包(2个): http://223.20.2 ...
Android自学学习资料
最近在自学Android编程,在网上看了一些博客和视频教程,觉得比较好的分享一下,继续学习,gangbade~ 国外android官网总是出现连不上的情况,如果你不想FQ的话,这里github上可以直 ...
HtmlAgilityPack - 简介
HtmlAgilityPack是.net下的一个HTML解析类库.支持用XPath来解析HTML.这个意义不小,为什么呢?因为对于页面上的元素的xpath某些强大的浏览器能够直接获取得到,并不需要手动 ...
Unattended Setup Software Components (无人值守安装软件组件)
原文 http://social.technet.microsoft.com/Forums/windows/en-US/d4ad85b4-8342-4401-83ed-45cefa814ec5/una ...
【剑指offer】面试题23：从上往下打印二叉树
题目: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: bfs,队列. 注意,队列最后不要忘了pop(). 代码: /* struct TreeNode { int val; stru ...

学习笔记 css3--选择器&新增颜色模式&文本相关

学习笔记 css3--选择器&新增颜色模式&文本相关的更多相关文章

随机推荐

热门专题