邵长安的个人博客

CSS选择器

选择器 例子 例子描述
       .class       .intro 选择 class="intro" 的所有元素。
.intro      
     {      
     background-color:yellow;      
     }
       #id       #firstname 选择 id="firstname" 的所有元素。
#firstname      
     {      
     background-color:yellow;      
     }
       *       * 选择所有元素。
*      
     {      
     background-color:yellow;      
     }
       element       p 选择所有 <p> 元素。
p      
     {      
     background-color:yellow;      
     }
       element,element       div,p 选择所有 <div> 元素和所有 <p> 元素。
h1,p      
     {      
     background-color:yellow;      
     }
       element element       div p 选择 <div> 元素内部的所有 <p> 元素。
div p      
     {      
     background-color:yellow;      
     }
       element>element       div>p 选择父元素为 <div> 元素的所有 <p> 元素。
div>p      
     {      
     background-color:yellow;      
     }
       element+element       div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
div+p      
     {      
     background-color:yellow;      
     }
       [attribute]       [target] 选择带有 target 属性所有元素。
a[target]      
     {      
     background-color:yellow;      
     }      
     注释：对于 IE8 及更早版本的浏览器中的 [attribute]，必须声明 <!DOCTYPE>。
       [attribute=value]       [target=_blank] 选择 target="_blank" 的所有元素。
a[target=_blank]      
     {      
     background-color:yellow;      
     }      
     注释：对于 IE8 及更早版本的浏览器中的 [attribute]，必须声明 <!DOCTYPE>。
       [attribute~=value]       [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。
[title~=flower]      
     {      
     background-color:yellow;      
     }      
     注释：对于 IE8 及更早版本的浏览器中的 [attribute~=value]，必须声明 <!DOCTYPE>。
       [attribute|=value]       [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。
[lang|=en]      
     {      
     background-color:yellow;      
     }      
     注释：对于 IE8 及更早版本的浏览器中的 [attribute|=value]，必须声明 <!DOCTYPE>。
       :link       a:link 选择所有未被访问的链接。
a:link      
     {      
     background-color:yellow;      
     }
       :visited       a:visited 选择所有已被访问的链接。
a:visited      
     {      
     background-color:yellow;      
     }
       :active       a:active 选择活动链接。
a:active      
     {      
     background-color:yellow;      
     }
       :hover       a:hover 选择鼠标指针位于其上的链接。
a:hover      
     {      
     background-color:yellow;      
     }
       :focus       input:focus 选择获得焦点的 input 元素。
input:focus      
     {      
     background-color:yellow;      
     }      
     注释：如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。
       :first-letter       p:first-letter 选择每个 <p> 元素的首字母。
p:first-letter      
     {      
     font-size:200%;      
     color:#8A2BE2;      
     }
       :first-line       p:first-line 选择每个 <p> 元素的首行。
p:first-line      
     {      
     background-color:yellow;      
     }
       :first-child       p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。
p:first-child      
     {      
     background-color:yellow;      
     }      
     注释：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。
       :before       p:before 在每个 <p> 元素的内容之前插入内容。
p:before      
     {      
     content:"台词：";      
     }      
     注释：对于在 IE8 中工作的 :before，必须声明 DOCTYPE。
       :after       p:after 在每个 <p> 元素的内容之后插入内容。
p:after      
     {      
     content:"台词：";      
     }      
     注释：对于在 IE8 中工作的 :after，必须声明 DOCTYPE。
       :lang(language)       p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。
p:lang(en)      
     {      
     background:yellow;      
     }      
     注释：对于在 IE8 中工作的 :lang，必须声明 DOCTYPE。
       element1~element2       p~ul 选择前面有 <p> 元素的每个 <ul> 元素。
p~ul      
     {      
     background:#ff0000;      
     }
       [attribute^=value]       a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。
div[class^="test"]      
     {      
     background:#ffff00;      
     }
       [attribute$=value]       a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
div[class$="test"]      
     {      
     background:#ffff00;      
     }
       [attribute*=value]       a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
div[class*="test"]      
     {      
     background:#ffff00;      
     }
       :first-of-type       p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:first-of-type      
     {      
     background:#ff0000;      
     }
       :last-of-type       p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:last-of-type      
     {      
     background:#ff0000;      
     }
       :only-of-type       p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-of-type      
     {      
     background:#ff0000;      
     }
       :only-child       p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:only-child      
     {      
     background:#ff0000;      
     }      
     注释：Internet Explorer 不支持 :only-child 选择器。
       :nth-child(n)       p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
p:nth-child(2)      
     {      
     background:#ff0000;      
     }      
     注释：Internet Explorer 不支持 :nth-child() 选择器。
       :nth-last-child(n)       p:nth-last-child(2) 同上，从最后一个子元素开始计数。
p:nth-last-child(2)      
     {      
     background:#ff0000;      
     }
       :nth-of-type(n)       p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
p:nth-of-type(2)      
     {      
     background:#ff0000;      
     }
       :nth-last-of-type(n)       p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。
p:nth-last-of-type(2)      
     {      
     background:#ff0000;      
     }
       :last-child       p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。
p:last-child      
     {      
     background:#ff0000;      
     }
       :root       :root 选择文档的根元素。
:root      
     {      
     background:#ff0000;      
     }
       :empty       p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
p:empty      
     {      
     background:#ff0000;      
     }
       :target       #news:target 选择当前活动的 #news 元素。
p:target      
     {      
     border: 2px solid #D4D4D4;      
     background-color: #e5eecc;      
     }      
     注释： Internet Explorer 8 以及更早的版本不支持 :target 选择器。
       :enabled       input:enabled 选择每个启用的 <input> 元素。
input[type="text"]:enabled      
     {      
     background-color: #ff0000;      
     }
       :disabled       input:disabled 选择每个禁用的 <input> 元素
input[type="text"]:disabled      
     {      
     background-color: #dddddd;      
     }
       :checked       input:checked 选择每个被选中的 <input> 元素。
input:checked      
     {      
     background-color: #ff0000;      
     }      
     注释：本例只在 Opera 中正确地工作！
       :not(selector)       :not(p) 选择非 <p> 元素的每个元素。
:not(p)      
     {      
     background-color: #ff0000;      
     }
       ::selection       ::selection 选择被用户选取的元素部分。
::selection      
     {      
     color:#ff0000;      
     } ::-moz-selection      
     {      
     color:#ff0000;      
     }
2016年3月30日 | 发布:holyan | 分类:css | 评论:0

把Ajax返回值存入变量

范例：

//返回一个异步结果

function getAjax(url,strtype,strvalue){

var xmlhttp;

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

2016年3月29日 | 发布:holyan | 分类:javascript | 评论:0

CSS+DIV遮罩层

CSS部分

/*遮罩层*/

.black_overlay{ 

z-index:100;

display: block; 

position: fixed; 

2016年3月29日 | 发布:holyan | 分类:html | 评论:0

ByVal与ByRef的区别

ByVal 与 ByRef(默认值)

这两个是子过程的参数传递时,指定参数按什么传递的

ByVal(按值传递)

ByRef(按地址传递)

具体这样来理解:

过程中的参数列表,我们称形参

调用过程时的参数列表,我们称实参


在调用时,我们要将实参的值传递给形参,这样过程才能拿这些数据参与计算并实现一些功能

那么在传递的过程中,就存在这两种传递方式

传值时(ByVal),是先给形参开辟一个临时地址,将实参的内容传入这个临时地址,这样,传递后,形参与实参是在两上不同的地址中,也就是说他们是相互独立的

2016年2月25日 | 发布:holyan | 分类:asp | 评论:0

input中type=date的时间比较、默认值设置

<input type="date">获取到的时间格式为2016-01-02，系统时间的格式为2016/1/7。

如果时间不进行转化，那么系统判断2016-01-02  > 2016/1/7，这是错误的。

需要进行时间格式化。函数为CDate()

例子：

<%

date1=#2015-01-06#

date1=CDate(date1)

%>

日期增加一天：

2016年2月25日 | 发布:holyan | 分类:asp | 评论:0

asp强制声明变量

Option Explicit 语句

强制要求显式声明脚本中的所有变量。 


说明

如果使用 Option Explicit，该语句必须出现在脚本的任何其他语句之前。


使用 Option Explicit 语句时，必须使用 Dim、Private、Public 或 ReDim 语句显式声明所有变量。如果试图使用未经声明的变量名，则会出现错误。


提示 可用 Option Explicit 避免拼错已存在的变量名称。对于作用范围不清楚的变量，使用此语句可避免发生混淆。

2016年2月25日 | 发布:holyan | 分类:asp | 评论:0