css属性选择器

浏览数：19 / 时间：2015年06月09日

1、E[attr]只使用属性名，但没有确定任何属性值

eg:

1 <style>
2 input[type]{border:5px solid red;}
3 </style>
4 </head>
5 <body>
6 <input type="text" />
7 <input type="password" />
8 </body>

2、E[attr="value"]指定属性名，并指定了该属性的属性值

eg：

<style>
input[type]{border:5px solid red;}
input[type=text]{width:200px;}
</style>
</head>
<body>
<input type="text" />
<input type="password" />
</body>

3、E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“?”不能不写

eg：

 1 <style>
 2 p{height:30px;border:1px solid #000;}
 3 p[miaov~=leo]{background:red;}
 4 </style>
 5 </head>
 6 <body>
 7 <p miaov="miaov leo">leo</p>
 8 <p miaov="miaov dupeng">dp</p>
 9 <p miaov="miaov zm">zm</p>
10 </body>

4、E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的

eg:

<style>
p{height:30px;border:1px solid #000;}
p[miaov^=miaov]{background:red;}
</style>
</head>
<body>
<p miaov="miaov-leo">leo</p>
<p miaov="miaov-dupeng">dp</p>
<p miaov="miaov-zm">zm</p>
</body>

5、E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的

eg、

<style>
p{height:30px;border:1px solid #000;}
p[miaov$=leo]{background:red;}
</style>
</head>
<body>
<p miaov="miaov-leo">leo</p>
<p miaov="miaov-dupeng">dp</p>
<p miaov="miaov-zm">zm</p>
</body>

6、E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value

eg、

<style>
p{height:30px;border:1px solid #000;}
p[miaov*=ao]{background:red;}
</style>
</head>
<body>
<p miaov="miaov-leo">leo</p>
<p miaov="miaov-dupeng">dp</p>
<p miaov="miaov-zm">zm</p>
</body>

<style>
a{ display:block;border:1px solid #000; font:14px/20px "宋体";}
a[href*=word]{ color:red;}
a[href$=pdf]{ color:yellow;}
a[href*=text]{ color:green;}
</style>
</head>
<body>
<a href="http://www.miaov.com/word/js.doc">妙味课堂</a>
<a href="http://www.miaov.com/pdf/js.pdf">妙味课堂</a>
<a href="http://www.miaov.com/text/js.text">妙味课堂</a>
</body>

7、E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）

eg、

 1 <style>
 2 p{height:30px;border:1px solid #000;}
 3 p[miaov|=miaov]{background:red;}
 4 </style>
 5 </head>
 6 <body>
 7 <p miaov="miaov-leo">leo</p>
 8 <p miaov="miaov-dupeng">dp</p>
 9 <p miaov="miaov-zm">zm</p>
10 <p miaov="miaov">zm</p>
11 <p miaov="miaov zm">zm</p>
12 <p miaov="zm-miaov">zm</p>
13 </body>

8、E:nth-child(n) 表示E父元素中的第n个字节点

p:nth-child(odd){background:red}/*匹配奇数行*/

p:nth-child(even){background:red}/*匹配偶数行*/

p:nth-child(2n){background:red}

9、E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

10、E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E

11、E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算

12、E:empty 表示E元素中没有子节点。注意：子节点包含文本节点

13、E:first-child 表示E元素中的第一个子节点

14、E:last-child 表示E元素中的最后一个子节点

15、E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的

16、E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

17、E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点

18、E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

19、E:target 表示当前的URL片段的元素类型，这个元素必须是E

20、E:disabled 表示不可点击的表单控件

21、E:enabled 表示可点击的表单控件

22、E:checked 表示已选中的checkbox或radio

23、E:first-line 表示E元素中的第一行

24、E:first-letter 表示E元素中的第一个字符

25、E::selection表示E元素在用户选中文字时

26、E::before 生成内容在E元素前

27、E::after 生成内容在E元素后

28、E:not(s) 表示E元素不被匹配

29、E~F表示E元素毗邻的F元素

30、Content 属性

31、-webkit-text-stroke:2px #000; 文字描边

eg、

<style>
.box{font-size:100px; text-align:center;color:red; -webkit-text-stroke:2px #000;}
</style>
</head>
<body>
<h1 class="box">妙味课堂</h1>
</body>

32、文字阴影 text-shadow：x y blur color, …

　　参数:

　　　　x 横向偏移

　　　　y 纵向偏移

　　　　blur 模糊距离

　　　　color 阴影颜色

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

最简单用法：

　　text-shadow:2px 2px 4px black

阴影叠加

　　text-shadow:2px 2px 0px red, 2px 2px 4px green;

火焰文字：

text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;

eg、

<style>
.box1{font-size:100px; text-align:center;color:red; text-shadow:2px 2px 0px white, 4px 4px 0px red;}
.box2{font-size:100px; text-align:center;color:#000; text-shadow:10px 10px 10px red,5px 5px 5px green,1px 1px 5px #000;}
</style>
</head>
<body>
<h1 class="box1">妙味课堂</h1>
<h1 class="box2">妙味课堂</h1>
</body>

33、文字排列方向

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

　　Rtl 从右向左排列

　　Ltr 从右向左排列

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

eg、

<style>
.box{width:200px;border:1px solid #000; direction:rtl;unicode-bidi:bidi-override; transition:0.5s;}
.box:hover{color:rgba(0,0,0,0); text-shadow:0 0 30px #000;}
</style>
</head>
<body>
<p class="box">妙味课堂</p>
</body>

34、自定于字体属性：

格式：

@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/tools/webfont-generator  */