CSS3 - 新增选择器

最新推荐文章于 2024-04-20 14:10:04 发布
最新推荐文章于 2024-04-20 14:10:04 发布
阅读量498 收藏 1
点赞数
分类专栏： # CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46025031/article/details/104460056
版权

1. 伪类选择器

1.1 结构（位置）#### 结构（位置）伪类选择器
  • :first-child 选取属于其父元素的首个子元素的指定选择器
  • :last-child 选取属于其父元素的最后一个子元素的指定选择器
  • :nth-child(n/even/odd) 匹配属于其父元素的第n个子元素，不论元素的类型
  • :nth-last-child(n/even/odd) 选择器匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n 可以是数字、关键词或公式
even 是选择所有偶数 == 2n
odd 是选择所有奇数 == 2n + 1
如果直接给 n ，就是选择所有
如果是 4n ，结果就是4，8，12。。。

li:first-child {
				color: red;
			}
			li:nth-child(2) {
				color: blue;
			}
			li:last-child {
				color: green;
			}
</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>


li:nth-child(even) { 
				 /*even 选择所有的偶数行，同理，odd是选择所有的奇数行*/
				background-color: skyblue;
			}

！[在这里插入图片描述]（https://img-blog.csdnimg.cn/20200223210724479.jpg）

1.2 目标伪类选择器

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target {
		color: red;
		font-size: 30px;
}

2. 属性选择器

挑选标签带有某些特殊属性的选择器，称为属性选择器。

<style>
			div[class] {  / *选择出所有带有类属性的盒子 */
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="one">1</div>
		<div>2</div>
		<div>3</div>
		<div class="four">4</div>
		<div class="one1">5</div>
		<div class="2one">6</div>
	</body>
  • div [class]：选出所有带有类属性的盒子
  • div [class = one]：选出 class == one 的盒子
  • div [class ^ = one]：选出所有one开头的盒子，即一个，one1。2one不能选择
  • div [class $ = one]：选出所有one终结的盒子，即one，2one
  • div [class * = one]：选出所有带有one的盒子，即one，one1， 2one

3. 伪元素选择器

  1. E :: first-letter文本的第一个单词或字（如中文，日文，韩文等）
  2. E :: fiest-line文本第一行
  3. E :: selection可更改替代文本的样式
p::first-letter {  /*选择第一个字*/
				font-size: 30px;
			}
			p::first-line {  /*选择第一行,并随着浏览器窗口的缩放改变*/
				color: red;
			}
			p::selection {  /*选择文字时的状态*/
				background-color: skyblue;
				color: yellow;
			}

  1. E ::之前和E ::之后

在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，并且必须要结合内容属性使用。

/* <div>123</div> */
			div::before {  /*必须带一个属性 content*/
				/*其实before是一个盒子,并且是行内的*/
				content: "0";		
				width: 20px;
				height: 20px;	
				background-color: red;
				display: block;
			}
			div::after {
				content: "4";
			}


伪元素:before和:after添加的内容替换为inline element；这个两个伪元素的内容属性，表示伪元素的内容，设置:before和:after时必须设置其content属性，否则伪元素就不起作用。

“:” 与 “::” 区别在于区分伪类和伪元素。

伪元素: 不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

在清除浮动里，也有提及伪元素

4. 背景缩放

通过background-size设置背景图片的尺寸，就像设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

  1. 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

  2. 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

  3. 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

  4. 如果background-size只有一个值，后面一个值默认为auto，等比例缩放

  5. percentge 以父元素的百分比来设置背景图的宽高，第一个值宽，第二个值高，只有一个
    值，后面一个值默认为auto

background-image: url('images/01.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

5. 多背景

以逗号分隔可以设置多背景，可用于自适应布局。

  1. 一个元素可以设置多重背景图像。
  2. 每组属性间使用逗号分隔。
  3. 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
  4. 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，防止被叠加
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
​

6. 凹凸文字

body {
        	background-color: #ccc;
        }
		div {
			color: #ccc;
			font: 700 80px "微软雅黑";
		}
		div:first-child {
			/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
			text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
		}
		div:last-child {
			/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */
			text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
		}

<body>
		<div>凸</div>
		<div>凹</div>
</body>

7. CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

  1. box-sizing: content-box 盒子大小为 width + padding + border
    content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

  2. box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

div {
				width: 296px;
				height: 180px;
				position: relative;
				border-radius: 10px;
				overflow: hidden;
			}
			div:hover::after {
				content: "";
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				border: 10px solid rgba(255,255,255,0.5);
				box-sizing: border-box;
			}

在这里插入图片描述

8. 过渡

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

过度动画：从一个状态渐渐地过渡到另一个状态

帧动画：通过一帧一帧地画面按照固定顺序和速度播放，如电影胶片

语法格式：

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

如果有多组属性变化，还是用逗号隔开。

属性描述
transition简写属性，用于在一个属性中设置四个过渡属性
transition-property规定应用过渡地CSS属性的名称
transition-duration定义过渡效果花费的时间。默认是0。单位必须写
transition-timing-function规定过渡效果的时间曲线。默认是“ease”
transition-delay规定过渡效果何时开始。默认是0

如果想要所有的属性都变化过渡，写一个all就可以。

运动曲线速度
linear匀速
ease逐渐慢下来
ease-in加速
ease-out减速
div {
			width: 200px;
			height: 100px;
			background-color: pink;
			/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
			transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
			/* transtion 过渡  这句话写到div里面而不是 hover里面 */
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */
			width: 600px;
			height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

过渡颜色：

div {
				width: 100px;
				height: 100px;
				background-color: blue;
				transition: all 2s;
			}
			div:hover {
				background-color: yellow;
			}

9. 2D变形 transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

9.1 移动 translate(x, y)

translate 移动平移

如：使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

css translate(50px,50px);

注意：

  1. 中间用“,”隔开！
    2.仅水平/垂直方向移动时，X/Y要大写

可以改变元素的位置，x、y可为负值：

  • translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
  • translateX(x)仅水平方向移动（X轴移动）
  • translateY(y)仅垂直方向移动（Y轴移动）

如：实现定位的盒子水平居中

div {
				position: absolute;
				background-color: pink;
				width: 200px;
				height: 200px;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				/* translate x为-50%,他跟父亲没关系,是走自己盒子宽度的一半
				  			 y为-50%,他跟父亲没关系,是走自己盒子高度的一半 */
			}
9.2 缩放 scale(x, y)

如：使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放

transform:scale(0.8,1); /* 宽度变为原来的80%，高度不变 */
transform:scale(0.8); /* 高度省略，默认和宽度一起缩放，都是0.8 */

可以对元素进行水平和垂直方向的缩放：

  • scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
  • scaleX(x)元素仅水平方向缩放（X轴缩放）
  • scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

9.3 旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

如：顺时针旋转45°：

transform:rotate(45deg);

注意单位是 deg 度数

9.4 transform-origin 调整元素转换变形的原点

transform-origin 可以调整元素转换变形的原点。

 div {
		 transform-origin: left top;
		 transform: rotate(45deg);
 }  /* 改变元素原点到左上角，然后进行顺时旋转45度 */

如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。

div {
		transform-origin: 10px 10px;
		transform: rotate(45deg);
}  /* 改变元素原点到x 为10  y 为10，然后进行顺时旋转45度 */
9.5 倾斜 skew(deg, deg)

使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

如：通过skew方法把元素水平方向上倾斜30度，处置方向保持不变

transform:skew(30deg,0deg);

10. 3D变形 transform

3d x y z

简单记住他们的坐标：

x左边是负的，右边是正的

y 上面是负的， 下面是正的

z 里面是负的， 外面是正的

10.1 rotateX()

就是沿着 x 立体旋转.

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}
10.2 rotateY()

沿着y轴进行旋转

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}
10.3 rotateZ()

沿着z轴进行旋转

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

11. 透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

  • 透视原理： 近大远小 。
  • 浏览器透视：把近大远小的所有图像，透视在屏幕上。
  • perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

11.1 translateZ(z)

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。

11.2 translate3d(x,y,z)

x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

12. backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

翻转盒子：

			* {
				margin: 0;
				padding: 0;
			}
			body {
			}
			div {
				width: 224px;
				height: 224px;
				position: relative;
			}
			div img {
				position: absolute;
				top: 0;
				left: 0;
				transition: all 2s;
			}
			div:hover img {
				transform: rotateY(180deg);
			}
			div img:last-child {
				backface-visibility: hidden;
			}

翻转盒子

13. 动画 animation

animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向。

语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

下列表格列出了 @keyframes 规则和所有动画属性

属性描述
@keyframe规定动画
animation所有动画的简写属性，除了animation-play-state属性
animation-name规定 @keyframe 动画的名称
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是0
animation-timing-function规定动画的速度曲线。默认是“ease”
animation-delay规定动画何时开始。默认是0
animation-iteration-count规定动画的播放次数。默认是1
animation-direction规定动画是否在下一周期逆向地播放。默认是“normal”
animation-play-state规定动画是否正在运行或暂停。默认“running”
animation-fill-mode规定对象动画时间之外的状态

关于几个值，除了名字、动画时间、延时有严格顺序要求之外，其他随意。

@keyframes 动画名称 { /*声明动画 关键帧*/
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

animation-iteration-count:infinite;  无限循环播放
animation-play-state:paused;   暂停动画
animation-directon:alternate;   动画轮流反向播放

举例：

div {
			width: 100px;
			height: 100px;
			background-color: pink;
			position: absolute;
			left: 0;
			/*调用动画*/
			/*animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/
			animation: move 3s ease 0s; 			
} 	
 @keyframes move {  /*声明动画 关键帧*/ 			
			from {
				left: 0;
            background-color: pink;
			}
			to {
				left: 500px;
				background-color: yellow;
			} 			
}

在这里插入图片描述

14. 伸缩布局

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

  • 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

  • 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

  • 方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

<style>
			section {
				width: 80%;
				height: 150px;
				margin: 100px auto;
				display: flex;   /*父亲添加伸缩布局*/
			}
			section div {
				height: 100%;
				flex: 1;   /*孩子的份数 各占一份*/
			}
			section div:nth-child(1) {
				background-color: red;
				flex: 2;  /*红占两份,蓝绿各一份*/
			}
			section div:nth-child(2) {
				background-color: blue;
			}
			section div:nth-child(3) {
				background-color: green;
			}
		</style>
	</head>
	<body>
		<section>
			<div>1</div>
			<div>2</div>
			<div>3</div>
		</section>
	</body>


伸缩情况下：
伸缩布局

各属性详解

1. flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

  • min-width 最小值 min-width: 280px。 最小宽度 不能小于 280。
  • max-width: 1280px 最大宽度 不能大于 1280
min-width: 500px;  /* 当窗口宽度缩到500px就禁止压缩了，最小宽度就是500px */

2. flex-direction调整主轴方向（默认为水平方向）

  • flex-direction: column 垂直排列
  • flex-direction: row 水平排列

3. justify-content调整主轴对齐（水平对齐）

子盒子如何在父盒子里面水平对齐

值描述白话文
flex-start默认值。项目位于容器的开头。让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end项目位于容器的结尾。让子元素从父容器的后面开始排序但是盒子顺序不变
center项目位于容器的中心。让子元素在父容器中间显示
space-between项目位于各行之间留有空白的容器内。左右的盒子贴近父盒子，中间的平均分布空白间距
space-around项目位于各行之前、之间、之后都留有空白的容器内。相当于给每个盒子添加了左右margin外边距

4. align-items调整侧轴对齐（垂直对齐）

子盒子如何在父盒子里面垂直对齐（单行）

值描述白话文
stretch默认值。项目被拉伸以适应容器。让子元素的高度拉伸适用父容器（子元素不给高度的前提下)
center项目位于容器的中心。垂直居中
flex-start项目位于容器的开头。垂直对齐开始位置 上对齐
flex-end项目位于容器的结尾。垂直对齐结束位置 底对齐

5. flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

值描述
nowrap默认值。规定灵活的项目不拆行或不拆列。 不换行，则 收缩（压缩） 显示 强制一行内显示
wrap规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

6. flex-flow是flex-direction、flex-wrap的简写形式

flex-flow: flex-direction  flex-wrap; /* 排列方向 是否换行 */

中间用空格隔开。

例如：

display: flex;
/* flex-direction: row;
flex-wrap: wrap;   这两句话等价于下面的这句话*/
flex-flow: column wrap;  /* 两者的综合 */

7. align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

值描述
stretch默认值。项目被拉伸以适应容器。
center项目位于容器的中心。
flex-start项目位于容器的开头。
flex-end项目位于容器的结尾。
space-between项目位于各行之间留有空白的容器内。
space-around项目位于各行之前、之间、之后都留有空白的容器内。

8. order控制子项目的排列顺序，正序方式排序，从小到大

用css 来控制盒子的前后顺序。 用order 就可以

用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0

order: 1;

15. 文字阴影

text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

前两项是必须写的。 后两项可以选写。

16. 优雅降级和渐进增强

渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：渐进增强是向上兼容，优雅降级是向下兼容。

建议一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题。

17. 浏览器前缀

浏览器前缀浏览器
-webkit-Google Chrome, Safari, Android Browser
-moz-Firefox
-o-Opera
-ms-Internet Explorer, Edge
-khtm-lKonqueror

18. 背景渐变

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。

线性渐变:

语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；

background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；
如：第一种格式

div {
				width: 300px;
				height: 100px;
				background: -webkit-linear-gradient(top,red,pink);
			}


第二种格式：

div {
				width: 300px;
				height: 100px;
				background: -webkit-linear-gradient(top,red 0%,pink 50%,orange 100%);
			}

友人A ㅤ
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 新增选择器的实例
01-19
结构(位置)伪类选择器（CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论...
css3高级选择器使用方法
09-25
CSS3高级选择器是CSS3新增的一系列功能强大的选择器，极大地增强了CSS的样式匹配能力，使得开发者能够更精准地定位和控制网页元素的样式。本文将深入探讨CSS3的属性选择器、结构性伪类选择器以及伪元素选择器。 ...
html5新增选择器
aiwu9318的博客
06-22 145
分享点html5的学习笔记，比较基础，突然发现通过写博客来记笔记有很多优点呢，平常记得笔记比较简单，复习起来比较吃力，看自己的博客理解起来还比较轻松，而且只有真正理解了才能表达清楚让别人看懂，还锻炼语言表达能力呢，所以有条件就多写点东西吧 选择器 1 querySelector(如果是一组元素，只能获取到一组中的第一个元素) document.query...
html新增的选择器,HTML5新增的选择器
weixin_39805387的博客
06-10 105
除了传统的document.getElementById,document.getElementsByName,document.getElementsByTagName外，HTML5中新增了2个更好用的选择器，分别是：document.querySelector：返回第一个找到的元素；document.querySelectorAll:返回找到的所有元素。示例：有一个表格，鼠标放上去的时候变色，...
手把手教您学习CSS的scale属性
最新发布
weixin_54454406的博客
04-20 1078
学会CSS的scale属性
HTML5新增的几种选择器详解
Zijeak的博客
02-02 1188
1.基本选择器 1.1 子元素选择器 只能选择某元素的子元素 父元素>子元素 1.2 相邻兄弟元素选择器 选择紧接在另一元素后的元素，而且他们具有相同的父元素 元素+兄弟相邻元素 <!DOCTYPE html> <html> <head> <title>练习网页</title> <style type="text/cs...
html5新增选择器,HTML5-新增特性
weixin_39900830的博客
06-03 53
1、新增的语义化标签：header footer nav section等等2、为什么要使用语义化标签：便于开发者阅读写出更优雅的代码的同时让浏览器的爬虫和机器更好地解析。3、input表单属性：placeholdautofocusautocompleterequiredmultiplepatterninput元素的type(类型)：submit 提交 将form里的内容提交到后端emai...
HTML基础知识（八）——H5新增选择器
weixin_48683052的博客
10-15 1223
一、基础选择器 1、通配符选择器[*] 2、d选择器 3、class选择器（类选择器） 4、标签选择器（元素选择器） 5、属性选择器 [attribute]：用于选取带有指定属性的元素 [attribute=value：用于选取带有指定元素和值的元素] [attribute~=value]：用于选取属性值中包含指定词汇的元素。 [attribute|=value]：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 ...
两种CSS3伪类选择器详细介绍
12-13
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
详解CSS3选择器的使用方法汇总
12-13
一 通用选择器1 *{}通配选择符(CSS2)：适合所有...CSS3新增的通用选择器：同级元素通用选择器：1 通用选择器E~F{}：匹配的是E元素之后的同级F元素匹配E后边所有的F，EF同级。只要F在E的后边，E只是作为一个参考。E~
html5新增选择器,CSS3新增属性选择器
weixin_36429702的博客
06-03 174
CSS选择器大致可分为三类：基本选择器、属性选择器和伪类选择器。大家都知道，选择器主要是用来确定html的树形结构中的DOM元素节点。每个学习使用CSS的人都是从基本选择器开始的，自然而然就运用自如了吧，像通配符选择器(＊)、类选择器(.className)、ID选择器(#IDName)、元素选择器(ul、li等)等等，这里就不赘述了。而属性选择器早在CSS2中就被引入了，其主要作用就是通过选择带...
使用HTML5和CSS3开发电子商务网站
12-20
使用HTML5和CSS3开发电子商务网站,使用HTML5和CSS3开发电子商务网站
HTML5入门(css3+js api+html新标签)
01-05
本文档介绍了html5的新特性,包括html标签,css3,以及新的js api
HTML5以及CSS3demo
05-09
H5新特性以及结合C3的小demo，有利于更好的学习H5开发
css3新增选择器+属性
weixin_45457515的博客
08-03 386
1：c3属性前缀 CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。 chrome 、Safiri 浏览器 ： -webkit- FireFox : -moz- IE: -ms- opera : -o- 先写标准的CSS3属性,在写css3属性 2：c3选择器 (1)毗邻选择 和兄弟选择器 /* E1 + E2 毗...
HTML5新增的Css选择器、伪类
zzyonepiece的专栏
08-07 2502
p[name^=“my”]{font-size:14px} 选择器 ^= 讲规则应用到所有 name属性以“my”开头的元素标签 p[name$=“my”]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性以“my”结尾的元素标签 p[name*=“my”]{font-size:14px} 选择器 $= 讲规则应用到所有 name属性包含“my”结尾的元素上
css3新增选择器
weixin_45847162的博客
04-19 76
属性选择器 E[att^=“val”]：匹配属性值“val”以指定开头的每个元素 E[att$=“val”]：匹配属性值“val”以指定结尾的每个元素 E[att*=“val”]：匹配属性值“val”中包含指定值的每个元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
CSS3属性justify-content
cqzdmm的博客
03-26 685
使用 justify-content首先需引入flex布局如 display: flex; justify-content: space-between; //两边居中 justify-content:属性定义了项目在主轴上的对齐方式。(也就是X轴) 它可取5个值： flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔
CSS3世界
Just for fun的专栏
09-26 377
三、CSS边框 盒子阴影 四、CSS3背景 五、CSS3文本 六、CSS3颜色特性 七、盒模式 八、伸缩布局盒模式 9、CSS3多列布局          ...
css3新增的选择器
07-27
CSS3新增了许多选择器，以下是其中一些常用的选择器： 1. 属性选择器：可以根据元素的属性值来选择元素，例如`[attribute=value]`、`[attribute^=value]`、`[attribute$=value]`等。 2. 伪类选择器：用于选择元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值