CSS3
- css3属性选择器
- 根据属性名查找某个标签(E[attr]),代码如下
-
<style> p {height: 30px; border: 1px solid black;} // 查找含有属性test的p标签 p [test] {background: red;} </style> <body> <p test="dhl">dhl</p> <p test="xb">xiaobei</p> </body>
- 查找某个属性名为固定值的某个标签(E[attr="value"]),测试代码如下:
-
<style> p {height: 30px; border: 1px solid black;} // 查找test属性值为dhl的p标签 p [test="dhl"] {background: red;} </style> <body> <p test="dhl">dhl</p> <p test="xb">xiaobei</p> </body>
- E[attr~="value"] 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表包含了一个value词,而且等号前面的"~"不能不写,详细代码如下:
-
<style> p {height: 30px; border: 1px solid black;} // 查找含有属性test,并且属性值列表中含有young的p标签 p [test~="young"] {background: red;} </style> <body> <p test="dhl young">dhl</p> <p test="xb">xiaobei</p> </body>
- E[attr^="value"]指定了属性名,并且具有属性值,属性值是以value开头的,测试代码如下:
-
<style> p {height: 30px; border: 1px solid black;} // 查找含有属性test,并且属性值以"girl"开头的p标签 p [test^="girl"] {background: red;} </style> <body> <p test="gjrldhl">dhl</p> <p test="boyxb">xiaobei</p> </body>
- E[attr$="value"]指定了属性名,并且具有属性值,属性值是以value结尾的,测试代码如下:
-
<style> p {height: 30px; border: 1px solid black;} // 查找含有属性test,并且属性值以"dhl"结尾的p标签 p [test$="dhl"] {background: red;} </style> <body> <p test="gjrldhl">dhl</p> <p test="boyxb">xiaobei</p> </body>
- E[attr*="value"] 指定了属性名,并且有属性值,而且属性值中包含了value,测试代码省略
- E[attr|="value"] 指定了属性名,并且属性值为value或者以"value-"开头的值
- css3结构性伪类
- E:nth-child(n),表示E父元素中的第n个子节点,测试代码如下:
-
<style> p {height: 30px; border: 1px solid black;} p: nth-child(1) {background: red;} </style> <body> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </body>
- E:nth-child(even),表示E父元素中的偶数子节点,odd表示奇数子节点;
- E:nth-child(2n),2n-1, 3n,,,
- p:nth-child(2)找到p标签父级下的第二个子元素,并且这个元素还得是p标签,如果不是p标签,则不生效
- E:nth-last-child(2),表示E的父元素的所有子节点中的倒数第二个
- E:nth-of-type(2) {background: red}找到p标签父元素下的第二个p标签
- E:nth-last-of-type(n),表示E的父元素的所有子节点倒数第n个
- E:first-child E元素父节点的第一个子节点
- E:empty 表示E元素没有子节点,注意:子节点中包含文本节点
- E:only-of-type表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E
- css3选择器-伪类
- E:target表示当前的URL片段的元素类型,这个元素必须是E,代码如下:
-
<style> div {width: 200px; height: 200px; background: black; font:50px/200px "微软雅黑"; color: #fff; text-align:center; display:none;} div:target {display:block;} </style> <body> <a href="#div1">div1</a> <a href="#div2">div2</a> <div id="div1"></div> <div id="div2"></div> </body>
- E:disabled表示不可点击的表单控件,E:enabled表示可点击的表单控件
-
<style> input{width:100px;height:200px; color:#000;} input:enabled {color;red;} input:disabled {color:blue;} </style> <body> <input type="text" value="请输入" disabled /> </body>
- E~F表示与E毗邻的F元素
-
<style> p~h1{background: red;} </style> <body> <h1>h</h1> // p标签之后的两个h1标签均变为红色 <p>p1</p> <h1>red</h1> <h1>red</h1> </body>
- 文本相关的伪类:E:first-line表示E元素中的第一行,E:first-letter:表示E元素中的第一个字符, E::selection表示E元素在用户选中文字时
-
<style> p {widht: 300px; height: 300px; border: 1px solid black; font: 10px "微软雅黑"; padding: 10px;} p: first-line{ background: red;} p: first-letter{font-size: 30px;} p::selection{background#F60; color: #690;} <style> <body> <p>hahaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </body>
- E::before生成内容在E元素前,E::after生成内容在E元素后
- E:(not)排除掉某一项,讲解代码如下:
-
<style> h1:not(.h2){background: red;} </style> <body> <h1>h1</h1> <h1 class="h2>h1</h1> <h1>h1</h1> </body>
- css3新增颜色模式
- rgba: r:red, g: green, b: blue, a:alpha(可以解决一个问题:单纯的给某个标签设置透明度造成里面的全部都透明度改变了,所以可以通过rgba来改变透明度)
- 文字阴影:text-shadow: 0 0 10px red; 分别是水平方向,垂直方向,模糊程度,颜色
- 多层阴影: text-shadow: 0 0 10px blue, 10px 10px 10px green;
- text-shadow: x y blur color; x:横向偏移, y:纵向偏移,blur: 模糊距离, color: 阴影颜色
- 文字方向: direction: rtl; 一定要配合unicode-bidi使用,即:unicode-bidi:bidi-override;
- 省略文本的处理方式: text-overflow: clip(无省略号)ellipse(省略号);注意配合:overflow:hidden和white-space:nowrap一起使用;
- 自定义文字,转换字体格式生成兼容代码:http://www.fontsquirrel.com/fontface/generator
-
@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; }
来源:https://www.cnblogs.com/blingblingstar/p/4871295.html