css属性选择器

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 */

35、文字秒表:-webkit-text-stroke:宽度 颜色

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

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

css属性选择器,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。