【CSS3新增加的(CSS属性选择器 + 结构伪类选择器 + 伪类选择器 + 浏览器前缀 + 新增加的属性)】

最新推荐文章于 2023-04-02 12:44:09 发布

yx-02

最新推荐文章于 2023-04-02 12:44:09 发布

阅读量154

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/YANG_helloworld/article/details/122013413

版权

CSS属性选择器

1/ E[attr] 希望选择有某个属性的元素，而不论属性值是什么例如：a[href]{color:red;}

2/ E[attr=”value”] 除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素例如: a[href=”www.baidu.com”]{color:red;}

3/ E[attr^=”value”]

指定了属性，并且指定了属性值，属性值是以value开头的例如：a[title^=“text”] {color: red;}

  E[attr$=”value”]

指定了属性，并且指定了属性值，属性值是以value结尾的例如：a[title$=“text”] {color: red;}

想要用css的属性选择器,必须html先有属性,才能用用该属性选择器的标签有 a input img等.

css结构伪类选择器

1/ E:fisrt-child
作为父元素的第一个子元素的元素E。与E:nth-child(1)等同

2/ E:last-child
作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

3/ E F:nth-child(n) even是偶数 odd是奇数(2n+1是odd效果,都是奇数变)
选择父元素E的第n个子元素F。:nth-child(length)、:nth-child(n)、:nth-child(nlength)、:nth-child(n+length)、:nth-child(-n+length)、:nth-child(nlength+1)

ul li:nth-child(3)
意思是指定ul下的第三个子元素是li的时候变换样式.
这里的n是指从0开始的数列(可以是n 2n 3n等)
-2n+10可以写,但是结果不能为负数

4/ :nth-last-child()
选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

5/ :only-child
选择的元素是它的父元素的唯一一个子元素；

6/ :first-of-type
选择一个上级元素下的第一个同类子元素

7/ :last-of-type
选择一个上级元素的最后一个同类子元素

8/ :nth-of-type()
选择指定的元素，类似于:nth-child，不同的是他只计算选择器中指定的那个元素。

9/ :nth-last-of-type()
选择指定的元素，从元素的最后一个开始计算

10/ :only-of-type
选择一个元素是它的上级元素的唯一一个相同类型的子元素

11/ :empty
选择的元素里面没有任何内容

12/ :root
选择文档的根元素

css伪类选择器

1/ UI状态伪类选择器
input:enabled{ 可用状态下的样式}
input:disabled{ 禁用状态下的样式}
input:checked{ 选中状态下的样式}

2/ 否定伪类选择器
:not() 除了什么什么可以让你定位不匹配该选择器的元素

3/ 目标伪类选择器
:target 选择器可用于选取当前活动的目标元素。
使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

:target主要修饰的是锚点里面的id所在对象的样式,默认的时候看不到,当点击调转页面过去后才有样式

css浏览器前缀

1/ -ms- -ms-box-shadow
IE浏览器专属的CSS属性需添加-ms-前缀

2/ -moz- -moz-box-shadow
所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加
-moz-前缀

3/ -o- -o-box-shadow Opera浏览器专属的CSS属性需添加-o-前缀

4/ -webkit- -webkit-box-shadow 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀

浏览器内核:
IE内核或者MSHTML或者trident
代表浏览器是IE, 不开源,只能Windows系统用

Gecko
代表:火狐开源的,可以跨平台使用

webkit
代表浏览器苹果浏览器,早期谷歌

presto
代表浏览器是欧明浏览器

Blink
最新的谷歌和欧明浏览器

css3优雅降级渐进增强

.transition { /渐进增强写法从小到大/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
} 越来越好的叫渐进增强

.transition { /优雅降级写法从大到小/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
} 逐渐兼顾小地方的叫优雅降级

css新增加的属性

1/ 文字阴影 text-shadow 文本阴影默认颜色时字体颜色
p{
text-shadow: 10px 10px 5px red;
}
p{
text-shadow: 10px 10px 5px red,2px -9px 5px yellow;
}
依次是水平阴影距离,垂直阴影距离,(这两个可以给负值) 模糊度阴影颜色
多个阴影之间用逗号隔开

2/ 盒子阴影 box-shadow 盒子阴影默认颜色黑色
p{
box-shadow: 10px 10px 5px 3px red inset;
}

        p{
            box-shadow: 10px 10px 5px red,2px -9px 5px  yellow;
          }

依次是水平阴影距离,垂直阴影距离,(这两个可以给负值) 模糊度延伸半径阴影颜色内阴影
多个阴影之间用逗号隔开

3/ CSS3的圆角
border-radius 设置圆角
border-radius ：20px/30px; 如果反斜杠符号“/”存在，“/”前面的值是设置元素圆角的水平方向半径，“/”后面的值是设置元素圆角的垂直方向的半径；
border-radius ：30px; 如果没有“/”，则元素圆角的水平和垂直方向的半径值相等

想要单独切一个圆角:border-top-left:100px; 左上 border-bottom-right:100px; 右下
加方向词的写法只能切正圆,切椭圆可以.
(加方向词的时候记得垂直的方向词在水平方向词前面)

简写:

     border-radius:一个值; 四个角都切,一样的圆角
     border-radius:两个值; 四个角都切,左上和右下值一样,右上和左下值一样
     border-radius:三个值; 四个角都切,左上一个值 右上和左下一个值  右下一个值
     border-radius:四个值; 四个角都切,左上 右上 右下 左下
     border-radius:100px 60px/20px 80px;指左上和右下 水平半径100px 垂直半径20px   
 右上和左下 水平半径60px  垂直半径80px
 带着/ 切得是椭圆,/前的都是水平半径,/后的都是垂直半径

控制单词换行的属性:
4/ word-break
自己决定自动换行的处理方法
word-break：normal:使用浏览器默认的换行规则。
word-break：keep-all:不允许中文字断开。
word-break：break-all:允许在单词内换行，可以强行截断英文单词，达到词内换行效果。

5/ word-wrap
用来标明是否允许浏览器在单词内进行断句
word-wrap：normal 默认值。
word-wrap：break-word：在长单词或 URL 地址内部进行换行。将内容在边界内换行（不截断英文单词换行）。

CSS设置中英文大小写的属性:

1/ text-transform
控制文本的大小写
text-transform ：capitalize；文本中的每个单词以大写字母开头。
text-transform ：uppercase；定义仅有大写字母
text-transform ：lowercase；定义无大写字母，仅有小写字母。
text-transform ：none；默认值

2/ font-variant
设置文本的大小写
font-variant：normal；默认值
font-variant：small-caps；浏览器会显示小型大写字母的字体

CSS3渐变效果

linear-gradient(线性渐变)
- 向下/向上/向左/向右/对角方向
  - 线性渐变 - 从上到下（默认情况下）:
    #grad {
    background-image: -webkit-linear-gradient(red, blue);
    background-image: -o-linear-gradient(red, blue);
    background-image: -moz-linear-gradient(red, blue);
    background-image: linear-gradient(red, blue);
    }
  - 线性渐变 - 从左到右:
    #grad {
    background: -webkit-linear-gradient(left, red , blue);
    background: -o-linear-gradient(left, red, blue);
    background: -moz-linear-gradient(left, red, blue);
    带浏览器前缀的写法:写方向词的不用to
    background: linear-gradient(to right, red , blue);
    不带前缀的写法: 写方向词要加个to
  - 线性渐变 - 对角:
    指定水平和垂直的起始位置来制作一个对角渐变;
    从左上角开始（到右下角）的线性渐变：
    #grad {
    background: -webkit-linear-gradient(left top, red , blue);
    background: -o-linear-gradient(left top, red, blue);
    background: -moz-linear-gradient(left top, red, blue);
    background: linear-gradient(to bottom right, red , blue);
  - 控制渐变的范围: 在颜色后面写百分比
    background: linear-gradient(red 50%, blue 80%);
    0~50%是纯红色 50%~80%是红绿渐变 80%~100%是纯绿色
  - 平铺渐变或重复渐变(repeating):
    background: repeating-linear-gradient(red 50%, blue 80%);
- 多个渐变一块用:
  background: repeating-linear-gradient(red 50%, blue 80%),repeating-linear-gradient(red 50%, blue 80%);
  中间用逗号隔开,先写的层次在上,后面的层次在下,一般先写的给透明度,要不然看不见后面的
- 带有指定的角度的线性渐变(deg):
  #grad {
  background: -webkit-linear-gradient(180deg, red, blue);
  background: -o-linear-gradient(180deg, red, blue);
  background: -moz-linear-gradient(180deg, red, blue);
  background: linear-gradient(180deg, red, blue);
  }
径向渐变
指带有指定角度的线性渐变
为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。(圆形circle ,写在最前面 background: radial-gradient(circle, red, yellow, green)😉
(默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。)
- 径向渐变 - 颜色结点均匀分布（默认情况下）
  #grad {
  background: -webkit-radial-gradient(red, green, blue);
  background: -o-radial-gradient(red, green, blue);
  background: -moz-radial-gradient(red, green, blue);
  background: radial-gradient(at left, red, green, blue);
  }
  方向也可以用像素表示
- 径向渐变 - 颜色结点不均匀分布
  #grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
  background: -o-radial-gradient(red 5%, green 15%, blue 60%);
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
  background: radial-gradient(red 5%, green 15%, blue 60%);
  }

CSS的重复渐变(repeating)

重复的线性渐变 repeating-linear-gradient() 函数用于重复线性渐变：
重复的径向渐变 repeating-radial-gradient()函数用于重复径向渐变：

CSS中背景相关的属性

background-size 背景图的大小

background-size：200px 100px;
或者
background-size:200% 100%;
或
background-size:cover;
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-size:contain;
保持背景图像本身的宽高比例不变进行缩放。
多个背景图书写用逗号隔开,先写的背景图图层在上
background:url(in.jpg) no-repeat,url(in.jpg) no-repeat blue 0px 0px /200px 200px;
如果需要多个背景图又需要背景颜色,简写的时候,颜色只能放在最后引入的背景图里面就行

调用iconfont网站字体图标:

1\ 先定义字体:

    @font-face{font-family:"" ; src:url(引入相关字体文件);}

2\ 调用该字体:

  谁需要该字体就给谁调用

3\ 主要在iconfont.cn平台