2.新增选择器 CSS3新增样式属性 |
您所在的位置：网站首页 › css3中新增属性选择器为 › 2.新增选择器 CSS3新增样式属性 |
2.新增选择器 CSS3新增样式属性
|
1、CSS3的兼容情况
CSS3给开发人员带来了很多有趣的功能，同时也为用户提供了更好的用户体验。但是，这一切并不是所有的浏览器都完全支持。目前主流的浏览器都采用了私有属性的形式来支持CSS3属性，以便让用户体验CSS3的新特性。 下面介绍这些私有属性： Webkit引擎浏览器使用“-webkit-”作为私有属性，像Safari和Chrome浏览器。 Gecko引擎浏览器使用“-moz-”作为私有属性，像Firefox浏览器。 Presto引擎浏览器使用“-o-”作为私有属性,像Opera浏览器。 Trident引擎浏览器使用“-ms-”作为私有属性，只有IE8以上支持,像IE浏览器。 css: -webkit-transition:1s; -moz-transition:1s; -o-transition:1s; transition:1s; 2、新增选择器 2.1 选择相邻兄弟如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器, h1 + p { margin-top:50px; } 2.2 匹配选择器匹配所有在#div元素之后的同级p元素。 div ~ p { background-color: #f00; } 2.3 属性选择器 选择器描述[attribute]用于选取带有指定属性的元素。[attribute=value]用于选取带有指定属性和值的元素。[attribute^=value]匹配属性值以指定值开头的每个元素。[attribute$=value]匹配属性值以指定值结尾的每个元素。[attribute*=value]匹配属性值中包含指定值的每个元素。[attribute~=value]用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。[attribute|=value]用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符。 Document /* [a] 用于选取带有指定属性的元素 */ /* [属性名] */ /* [class]{ color: red; } */ /* [data-index]{ color: red; } */ /* [选择器类型='属性值'] 用于选取带有指定属性和值的元素*/ /* [属性名=’属性值] */ /* [data-index='2']{ color: red; } */ /* [class='box2']{ color: red; } */ /* [attribute^=value] 匹配属性值以指定值开头的每个元素 */ /* [class^='b']{ color: red; } */ /* [attribute$=value] 匹配属性值以指定值结尾的每个元素 （字符也可以）*/ /* [class$='3']{ color: red; } */ /* [attribute*=value] 匹配属性中包含指定值的每个元素*/ /* 含有某个字符 */ /* [class*='d'] { color: red; } */ /* [attribute~=value] 用于选取属性值中（包含）指定词汇的元素 ，还可以空格为分隔符*/ /* [class~='box'] { color: red; } */ /* [attribute |=value] 用于选取带有指定值（开头）的属性值的元素 ，还可以连接符为分隔符*/ [class|='box'] { color: red; } box box2 box box3 box1 box2 box3 box-4box5box_4 box6 box-1 box-2 box-3 2.4 结构性伪类选择器 2.4.1 整体结构类型:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。 :last-child 匹配的是某父元素的最后一个子元素，可以说是结构上的最后一个子元素。 2.4.2 标签结构类型:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。 :last-of-type 匹配某个父元素中最后一个某一类型的元素。 2.4.3 指定子元素的序号:nth-child(n) 对指定序号的子元素设置样式（从前往后数）。参数可以是数字（1、2、3）、关键字（odd、even）、公式（2n、2n+3 :使用公式时,n从0开始），参数的索引起始值时1，而不是0。 :nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。 :nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数）。参数同上。 :nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素（从后往前数）。参数同上 2.4.4 其他伪类选择器:root：将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就是整个“html”部分。 :empty 指定当元素内容为空白时使用的样式。 :not(selector)排除selector选择器选中的元素，不对它们应用样式解析。 :target 对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效。 2.5 文本选择伪元素::selection指定当前元素处于选中状态部分的样式。只能向选择器应用少量CSS属性：color、background等。 2.6 表单中使用的状态伪类选择器:disabled 指定当前元素处于不可用状态时的样式。 :enabled 指定当前元素处于可用状态时的样式。 :checked 指定表单中单选框或复选框处于选中状态时的样式 2.7 权重!important > 行内样式>ID选择器 > 类选择器|伪类|属性选择器 > 标签> 通配符 > 继承 > 浏览器默认属性 2.8 内容追加伪元素::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素) ::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素) a:before{ content: ''; position: absolute; left: 0; top: 0; background-color: #fff200; width: 100%; height: 100%; /* 背景图盖住文字 */ z-index: -1; transform-origin:bottom left; transform: rotate(-90deg); transition: all 1s; } a::after{ content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; /* background-color: #351435; */ background-color: blue; z-index: -1; transform: rotateY(-90deg); transition: all 1s; } 2.9 JS新增的选择器querySelector(''); querySelectorAll(''); Document1 2 3 4 5 // 不用加下标 //获取一个元素 // document.querySelector() // 获取多个元素 // document.querySelectorAll() var box =document.querySelector('.box'); console.log(box); var input =document.querySelector('[type="radio"]'); console.log(input); // 获取的所有的p var p = document.querySelectorAll('p'); console.log(p) 3. CSS3新增样式属性 3.1 background-image多重背景
渐变配色推荐网站: 渐变配色工具(180种渐变背景) CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义 3.2.1 线性渐变 .content { /* 线性渐变 background-image:line-gradient(to 方位 , 颜色1 ，颜色2 。。。。。。。。) */ width: 100px; height: 100px; background-image: linear-gradient(to left,black,white); background-image: linear-gradient(to left top,red, pink ); } 3.2.2 径向渐变径向渐变由它的中心定义。 语法 background-image: radial-gradient(shape size at position, start-color, ..., last-color);shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。 /* background-image:redial-gradient(circle 圆形，或者ellipse 表示椭圆形，默认值是 ellipse。 颜色1 颜色2、、、、、) */ /* 从中间为圆心往外扩 */ .content{ width: 200px; height: 200px; /* border: 1px solid red; */ background-image: radial-gradient(circle,red,white); background-image: radial-gradient(circle,#fbc2eb,#a6c1ee); border-radius: 50%; } 3.3 background-size背景缩放其参数设置如下： a) 可以设置长度单位(px)（img大小一样）或百分比（设置百分比时，参照盒子的宽高） b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多 c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。 background-image: url('images/gyt.jpg'); background-size: 300px 100px; /* background-size: contain; */ /* background-size: cover; */ 3.4 CSS3的opacity 属性(透明)opacity: value|inherit; 值描述value规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。inherit应该从父元素继承 opacity 属性的值。 3.5 CSS3的filter(滤镜) 属性filter 属性定义了元素(通常是 filter: grayscale(100%) | blur(px); 值描述grayscale将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；blur(px)给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。3.6 hsla() 函数 表示色相-饱和度-亮度（Hue-saturation-lightness）模式。 .box { width: 200px; height: 200px; /* hsla 表示`色相-饱和度-亮度`（Hue-saturation-lightness）模式。 */ /* hsla(颜色值0-360, 饱和度0%-100%,亮度0%-100%, 透明度0-1) */ background-color: hsla(0, 100%, 50%, 1); } 3.7 calc() 函数calc() 函数用于动态计算长度值。 calc(expression) calc(expression) 值描述expression必须，一个数学表达式，结果将采用运算后的返回值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则 3.8 box-sizing盒模型属性盒模型分为 ： W3C标准盒模型 和 IE盒模型 1.W3C标准盒子（content-box）： 在这种盒模型下，是指块元素box-sizing属性为content-box的盒模型。 我们所说的元素的 width ，实际上只包含 content 盒子总宽度 = margin + border + padding + width 2.IE盒子（border-box）： 又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。 在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border 盒子总宽度= margin + width |
【本文地址】
今日新闻 |
推荐新闻 |