CSS3总结(1)

最新推荐文章于 2021-08-03 19:23:37 发布

juzipchy

最新推荐文章于 2021-08-03 19:23:37 发布

阅读量319

点赞数 1

本文链接：https://blog.csdn.net/juzipchy/article/details/53494340

版权

CSS3选择器：属性选择器

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

    p{height:30px;border:1px solid #000;}    
    p[hello]{background:red;}

   <p hello="leo">leo</p>
    <p hello="dp">杜鹏</p>
    <phello="zM">子鼠</p>
    <p hello="xm">小美</p>

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

    p[hello=leo]{background:red;}

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

    p[miaov~=old]{background:red;}
    <p hello="leo old">leo</p>

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

    p[hello^=g]{background:pink;}

    <p hello="bleo old">leo</p>
    <p hello="gxm">小美</p

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

    p[hello$=M]{background:#CC0;}

    <p miaov="bdp">杜鹏</p>
    <p hello="bzM">子鼠</p>
    <p hello="gXM">小美</p>

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

    p[hello*=d]{background:#C3C;}

     <p hello="bleo old">leo</p>
    <p hello="bdp">杜鹏</p>
    <p hello="bzM">子鼠</p>
    <p hello="gxm">小美</p>

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

    p[hello|=b]{background:#C3C;}

    <p hello="b-leo">leo</p>
    <p hello="bleo">杜鹏</p>
    <p hello="b-leo">子鼠</p>
    <p hello="g-xm">小美</p>
    <p hello="b">无名氏</p>

CSS3选择器：结构性伪类

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

  p:nth-child(1){background:red;}

  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <p>p4</p>
  <p>p5</p

p1背景变成红色

p:nth-child(1){background:red;}

<h1>p1<h1>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p

p1的背景不变色

p:nth-child(1) 找p标签父级下的第一个子元素，并且这个元素还得是p标签，不是p标签不做任何操作

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

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

p:nth-of-type(2){background:red;}

<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>

p2背景色变红

p:nth-of-type(2) 找p标签父级下的第二个p元素

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

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

p:empty{background:red;}

<p></p>

7.E:first-child 表示E元素中的第一个子节点
8.E:last-child 表示E元素中的最后一个子节点
9.E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
10.E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
11.E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
12.E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

CSS3选择器：伪类

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

<style>
div{width:300px;height:200px;background:#000; font:50px/200px "微软雅黑"; color:#fff; text-align:center; display:none;}
div:target{ display:block;}
</style>
</head>
<body>
<a href="#div1">div1</a>
<a href="#div2">div2</a>
<a href="#div3">div3</a>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>

2.E:disabled 表示不可点击的表单控件

3.E:enabled 表示可点击的表单控件

input{width:100px;height:30px; color:#000;}
input:enabled{ color:red;} 
input:disabled{ color:blue;}

<input type="text" value="请输入" disabled />

4.E:checked 表示已选中的checkbox或radio
5.E:first-line 表示E元素中的第一行
6.E:first-letter 表示E元素中的第一个字符
7.E::selection表示E元素在用户选中文字时
8.E::before 生成内容在E元素前
9.E::after 生成内容在E元素后

10.E:not(s) 表示E元素不被匹配

h1:not(.h2){ background:Red;}

<h1>h1</h1>
<h1 class="h2">h1</h1>

11.E~F表示E元素毗邻的F元素

p~h1{ background:Red;}

<h1>h1</h1>
<p>p</p>
<h1>h1</h1>
<h1>h1</h1>

12.content 属性

<style>
p{width:300px;border:1px solid #000;font:12px/30px "宋体";padding:10px;}
p:first-line{ background:red;}
p:first-letter{ font-size:30px;}
p::selection{background:#F60;color:#690;}
p:before{ content:"hello"; display:block; border:1px solid #000;}
p:after{ content:"world"; display:block; border:1px solid #000;}

<body>
<p>前端开发的世界从未有过无声的寂静前端开发的世界从未有过无声的寂静前端开发的世界从未有过无声的寂静前端开发的世界从未有过无声的寂静前端开发的世界从未有过无声的寂静前端开发的世界从未有过无声的寂静</p>
</body>

新增颜色模式

rgba
r       Red       红       0-255
g      Green       绿       0-255
b      Blue       蓝       0-255
a       Alpha       透明       0-1
例如：rgba(0,0,0,0.5)；

文字阴影

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;
先渲染后面的，再渲染前面的
几个好玩的例子
层叠：

color:red; 
font-size:100px; 
font-weight:bold; 
text-shadow:2px 2px 0px white, 4px 4px 0px red;

光晕：

color:white; 
font-size:100px; 
text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

火焰文字：

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;

新增文本功能

direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从右向左排列
注意要配合unicode-bidi 一块使用

p{width:300px;border:1px solid #000;font:14px/30px "宋体";direction:rtl;unicode-bidi:bidi-override;}

<p>hello world!</p>

text-overflow 定义省略文本的处理方式
clip：无省略号
Ellipsis：省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)

p{width:300px;border:1px solid #000;font:14px/30px "宋体"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

<p>hello world！hello world！hello world！hello world！hello world！hello world！hello world！</p>

自定义文字

格式：

@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