CSS知识全解

目录

一.CSS3三种关联方式

行内样式表

内部样式表

外部样式表

CSS优先级

扩展

二.CSS选择器

通用选择器

标签选择器

类选择器

ID选择器

后代选择器

子代选择器

交集选择器

并集选择器

伪类选择器

选择器的优先级

三.CSS常用文本属性

字体

字号

字体颜色

文本属性

四.其他常用属性

列表常用属性

超链接样式属性

五.CSS过渡与变换

transition:过渡属性

transform:变化属性

六.CSS动画

@keyframes创建关键帧动画

使用animation调用关键帧动画

七.盒子

IE盒模型

切换盒模型

八.盒属性

margin外边距

border边框

padding内边距

overflow内容溢出控制

outline外围线

box-shadow盒子阴影

border-radius边框圆角

border-image图片边框

九.浮动

clear清楚浮动

子盒子浮动造成父盒子高度塌陷

十.定位

relative相对定位

absolute绝对定位

fixed固定定位

使用定位实现元素的绝对居中

十一.z-index

作用

使用要求

z-index:auto与z-index:0的异同

z-index相同(处于同一平面的定位元素)的层叠关系

十二.网页布局

网页布局方式

响应式的实现方式

固定布局概念

流体布局概念

弹性布局详细

基本概念

作用于容器的属性

作用于项目的属性

补选择器大全


一.CSS3三种关联方式

行内样式表

就是将 CSS 代码放置在 HTML 代码内部

<a href="#" style="color:red;font-size:10px;">日用百货</a>

特点:

  1. 将CSS代码与HTML代码糅合一起,不利于后期维护
  2. 可以单独定义某个元素的样式,灵活多变
  3. 优先级高,单不推荐

内部样式表

内部样式表也称为内嵌样式表,是指 CSS 代码内嵌到 HTML 代码中

二者处于同一个文件中,通常 CSS 代码放置在 HTML 代码的标签内部。

<head>    
<meta charset="UTF-8">      
 <title>内部样式</title>  
  <style>        
div {            
   width: 100px;           
   height: 100px;            
   background-color: red;      
  }   
 </style>
</head>
<body>              
    <div>    
    </div>
</body>

特点:

  1. 写在<head>标签中,一定程度把CSS代码于HTML代码进行了分离
  2. 无法应用于其他HTML文件,实现样式复用
  3. 优先级低于行内样式表

外部样式表

外部样式表是指 CSS 代码完全独立出来,单独放置在扩展名为.css 的文件中,在 HTML文件中,将 CSS 文件引入进来,形成关联

<head>    <title>Document</title>     <link rel="stylesheet" href="./he.css"></head>

<link>标签属性:

  1. rel 属性:声明被链接文档与当前文档的关系,必写
  2. type 属性:被链接文档的类型,可写
  3. href 属性:被链接文档的地址,必写。

特点:

  1. 与内部样式表一样,写在<head>标签
  2. 实现了CSS代码与HTML代码的彻底分离,方复用,与后期维护
  3. 优先级低于内部样式
  4. 开发推荐

CSS优先级

       CSS优先级是指当CSS声明发生冲突时,即将在两个不同位置,对同一HTML标签进行同样的CSS属性定义,

但取值不同。

       优先采用的属性值通常是按就近原则来进行取值,即行级样式表>内部样式表>外部样式表

扩展

导入外部样式表的另一种方式

<head>    
<meta charset="UTF-8">   
 <style>        
@import url(./he.css);   
 </style>
</head>
<body>    
   <div>    
   </div>
</body>

区别:

  1. <link>是HTML标签,import不是
  2. <link>可以链接各种形式的文件,import只能导入CSS
  3. <link>使用的是链接的方式,相当于桥梁,import使用的导入,导入到HTML文档中
  4. <link>边加载网页边链接,import在加载网页完毕后才导入

二.CSS选择器

CSS选择器是指对CSS选择要修饰的元素

通用选择器

写法:

* {      }

作用:

     选中页面中的所有标签,一般用于定义最通用的属性,设置默认值

优先级:

    最低

标签选择器

写法:

HTML标签名 {    }

作用:

    选择页面中所有的对应标签

优先级:

   高于通用选择器

类选择器

写法:

.类 {    }

调用:

    在需要改变的样式的标签上,使用class="选择器名称"调用对应选择器

作用:

   修改所有调用选择器的标签

优先级:

   高于标签选择器

注意:

  1. 类名称是可以随意取名的,但是不能以数字开头
  2. 类名称表示一定意义
  3. 当页面需要对多个元素应用相同样式,则采用类选择器
  4. 类选择器可以应用不同标签

ID选择器

写法:

#id名称{    }

作用:

   在需要改变样式的标签上,使用id="选择器名称"调用对应选择器

优先级:

 大于类选择器

注意:

  1. id是唯一的,同一页面不能出现多个相同的id定义
  2. id名称要求与类选择器相同
  3. 通常当页面中有唯一样式时,采用id选择器

后代选择器

写法:

选择器1 选择器2 选择器3 .... {    }div .li {       }

class="li"可以是div的子代,也可以是后代

子代选择器

写法:

选择器1>选择器2>选择器3....{    }div>ul {    }

ul必须是div的直接子代,孙代以后不选中

交集选择器

写法:

选择器1选择器2....{    }

选择器之间没有分隔符

元素必须同时具备选择器1&选择器2...才生效

并集选择器

写法:

选择器1,选择器2,....{    }

选择器之间用逗号分隔

元素只要具备选择器1或者选择器2...即可生效

伪类选择器

写法:

选择器名称:伪类状态{    }

伪类状态:

  1. link未访问状态
  2. visited已访问状态
  3. hover鼠标指向时,即悬停在元素上方时
  4. active激活选定状态(鼠标点下去没松开)
  5. focus获得焦点时,(input常用)

超链接多种伪类共存时的顺序如下:

link---->visited---->hover----> active

选择器的优先级

  1. 第一原则“近者优先”,最内层选择器永远比外层优先
  2. 当作用于同一层时,可以根据选择器优先级权重进行计算
  3. 当优先级权重完全相同时,写在后面的选择器覆盖前面的选择器
  4. !important 将当前CSS语句提升至最高权重,不推荐使用

三.CSS常用文本属性

字体

  • font-family:字体族,设置字体

       常用三种属性:

  • font-style:设置字体样式

       常用二种属性:

       正常normal       斜体italic

  • font:缩写形式

缩写形式:

font-style、font-weight、font-size/line-height、font-family

字体样式、字体粗细、字号/行高、字体族

注意:

  1. 使用时必须严格按照上述顺序
  2. 多个样式之间用空格分隔,且font-size/line-height 必须作为一对,用/分隔
  3. font-size 和font-family 必须指定,其他样式不指定将采用默认样式

font:      italic       bold 75%/1.8      'Microsoft Yahei', sans-serif; 

字号

  • font-weight

       设置字体粗细

       bold加粗,lighter细体,或者填写100~900 (400为正常,700为加粗)

  • font-size

       设置字体大小

       属性值通常为px或%,大多数浏览器默认16px

字体颜色

  •  color    

设置字体颜色

  1. 直接写颜色的英文名
  2. 十六进制写法
  3. rgb写法
  • opacity

设置透明度

注意:

   使用opacity时当前元素以及子元素均会透明;

而使用rgba调整时,只会使当前元素透明,不会改变子元素透明度

文本属性

line-height

属性值表达:

  1. 像素单位
  2. 纯数值,正常行高的倍数
  3. 百分数,正常行高的百分数

经典案例:

      height:100px      line-height:100px

  设置行高等于高度,则当前元素中文字垂直居中

text-align

设置块级元素中文字的水平对齐方式

letter-spacing

设置字符间距,即字与字之间的间距

text-decoration

文本修饰属性

属性:

  1. underline        下画线
  2. line-through    删除线
  3. overline          上画线
  4. none               不做修饰
  • overflow(overflow-x和overflow-y)

控制超出范围文本的显示方式

属性:

  1. auto        自动显示
  2. scroll      始终显示滚动条
  3. hidden    超出范围文本隐藏,可以通过overflow-x和overflow-y分别设置水平催着方向的隐藏

text-overflow

设置多余文字的显示方式

属性:

  1. clip 裁剪文本
  2. ellipsis 使用省略号代替多余文字

white-space

设置元素内的空白符怎样处理

属性:

  1. normal 默认,空白被忽略
  2. nowrap 设置中文行末不断行显示
  3. pre 空白被保留

案例:

      如何让每行多余文字显示省略号?

white-space:nowrap;        如果是中文,需设置行末不断行       overflow:hidden;            设置控件超出范围text-overflow:ellipsis;     设置多余文本省略号显示

text-shadow

  1. 水平阴影距离         必写       数值越大     阴影右移
  2. 垂直阴影距离         必写       数值越大     阴影下移
  3. 阴影模糊距离         可写       数值越大     阴影模糊
  4. 阴影颜色                可写       默认黑色

可对文本同时设置多个阴影,每个阴影效果之间以逗号分隔开

text-indent

首行缩进,可以使用像素值调整段落文字的首行缩进大小

text-indent:32px; // 首行缩进 32px,默认字体大小 16px 的情况下,将首行缩进两个字

text-stroke

设置文字描边

四.其他常用属性

列表常用属性

 html部分 
<ul>       
  <li>1</li>       
  <li>2</li>       
  <li>3</li>       
  <li>4</li>       
  <li>5</li>       
  <li>5</li>       
  <li>6</li>   
</ul>   
  css部分   
  ul li {    
    list-style-image : url(./03男性角色.png);   
 }  

 

超链接样式属性

a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被单击的链接 */

五.CSS过渡与变换

transition:过渡属性

简写顺序:

property、duration、timing-function、delay

属性介绍:

  1. ease:(逐渐变慢)默认值。
  2. linear:(匀速)。
  3. ease-in:(加速)。
  4. ease-out:(减速)。
  5. ease-in-out:(加速然后减速)。

transform:变化属性

  • transform定义元素向2D或3D变化

  • transform-origin改变转换元素位置

transform-origin 设置旋转元素的基点位置,2D 转换元素可以改变元素的 X 轴和 Y 轴

对于 3D 转换元素还可以更改元素的 Z 轴。

属性值:

  1. x-axis,可以使用的值有:left、right、center、**px、百分比
  2. y-axis,可以使用的值有:left、right、center、**px、百分比
  3. z-axis,可以使用的值有:**px

六.CSS动画

@keyframes创建关键帧动画

基础语法:

@keyframes 动画名称{    阶段 1{CSS 样式}    阶段 2{CSS 样式}    阶段 3{CSS 样式}}

二种写法

  1. 每一个阶段用百分比表示
  2. 使用from和to表示从某阶段到某阶段

使用animation调用关键帧动画

div{    
 /* 让 div 调用这个关键帧动画,5s 完成所有动画效果*/     animation: 动画名称 5s;
}

属性:

  1. animation         简写属性
  2. animation-name      规定动画名称
  3. animation-duration      规定完成动画的时间
  4. animation-timing-function      规定动画的速度曲线
  5. animation-delay      规定动画何时开始
  6. animation-iteration-count         规定动画播放次数
  7. animation-direction      规定动画算法反向播放
  8. animation-play-state    规定动画算法是否运行
  9. animation-fill-mode     规定对象动画时间之外的状态

七.盒子

 content   内容

padding   内边距

border      边框

margin     外边距

标准盒模型

一个元素所占据的总宽度= width + padding(左右)+ border(左右)+ margin(左右)

IE盒模型

一个块元素的总宽度= width + margin(左右)(即 width 已经包含了 padding 和 border)

切换盒模型

设置box-sizing

  1. content-box   采用标准模式,默认
  2. border-box    采用怪异模式

八.盒属性

margin外边距

属性

简写形式的 margin 可以有 1~4 个值。

写一个数值:上、下、左、右四个方向数值相等。

写两个数值:第一个数等于上下外边距,第二个数等于左右外边距。

写三个数值:上、右、下边距,左边默认等于右边。

写四个数值:上、右、下、左 4 个方向的边距。

当设置 margin: 0 auto; 时,代表块级盒子在父容器中水平居中。

多个盒子之间的外边距影响

行内盒子水平排放的外边距

结论:水平排放的盒子,水平间距是 margin 的累加

 块级盒子垂直排放的外边距

结论:垂直排放的盒子,垂直间距是合并的(去最大值)

 父子盒子的垂直外边距合并

 未设置子盒子的上外边距时

 设置子盒子的上外边距时

解决方法:

  1. 父盒子添加 overflow:hidden
  2. 父盒子添加 padding
  3. 父盒子添加 border

border边框

属性:

  1. border-style       为元素设置边框的样式
  2. border-width      为元素的边框设置宽度
  3. border-color      设置四条边框的颜色
  4. border               简写,无序

padding内边距

overflow内容溢出控制

属性:

  1. Visible(默认值):内容不会被修剪,会呈现在元素框之外
  2. auto:                     根据内容多少选择显示滚动条,文字多的时候显示滚动条。
  3. scroll:                    无论文字多少,都会显示垂直和水平两个滚动条。
  4. hidden:                  超出区域的文字直接隐藏,无法看到

outline外围线

外围线的属性写法与边框相同

外围线不会占用空间,会盖住周围的文字

box-shadow盒子阴影

属性:

  1. X 轴阴影距离:必写,可正可负,正值右移,负值左移。
  2. Y 轴阴影距离:必写,可正可负,正值下移,负值上移。
  3. 阴影模糊半径:可写,只能为正,默认值为 0。数值越大,阴影越模糊。
  4. 阴影扩展半径:可写,可正可负,默认值为 0。数值增大,阴影扩大;数值减小,阴影缩小。
  5. 阴影颜色:可写,默认为黑色。
  6. 内外阴影:可写,可选值:inset(内阴影),不选默认为外阴影。

border-radius边框圆角

八属性值

border-radius: 40px 30px 20px 10px/40px 30px 20px 10px

代码含义:

“/”前后各有四个值,依次对应的是左上角、右上角、右下角、左下角。

而“/”前表示四顶点沿 X 轴移动的距离,“/”后表示四顶点沿 Y 轴移动的距离。

border-image图片边框

  1. 图片路径(border-image-source)
  2. 图片切片宽度(border-image-slice)
  3. 边框宽度(border-image-width)
  4. 图片重复方式(border-image-repeat)
  5. 简写方式(border-image)

九.浮动

float 属性使元素脱离了常规文档流而表现为向右或向左浮动,由于浮动的元素不在文档流中,所以在文档流中浮动的元素就像不存在一样,其周围的元素也会重新排列。

属性:

  1. left
  2. right
  3. none

clear清楚浮动

对不想浮动的元素使用

浮动只能打破文档流,不能打破文字流,所以文字不会动

属性:

  1. left
  2. right
  3. both

子盒子浮动造成父盒子高度塌陷

解决方法:

  1. 在父元素中添加一个新的元素,为新元素设置 clear:both
  2. 为父元素添加 overflow: hidden 属性
  3. 为父元素添加伪类:after,对伪类设置 clear:both

十.定位

属性:

  1. relative              相对定位
  2. absolute            绝对定位
  3. fixed                  固定定位
  4. static                 没有定位,默认

以上三种定位方式均使用 top、left、bottom、right 调整位置。

当 left 和 right 同时存在,left 生效;当 top 和 bottom 同时存在,top 生效。

relative相对定位

  1. 相对于自己原来在文档流中的位置定位,当不指定 top、left 等定位值时,不会改变元素位置。
  2. 相对定位元素仍会占据原有文档流中的位置,而不会释放。

absolute绝对定位

  1. 相对于第一个非 static 的祖先元素(即使用了 relative、absolute、fixed 定位的祖先元素)进行定位。
  2. 如果所有祖先元素均未定位,则相对于浏览器左上角定位。
  3. 使用 absolute 的元素会从文档流中完全删除,原有空间释放不再占据。

fixed固定定位

固定定位是一种特殊的绝对定位,它与普通绝对定位的区别是无论父元素是否定位,子元素如果采用固定定位,都将相对于浏览器左上角定位,且固定在指定位置,不随浏览器滚动条的滚动而滚动。

使用定位实现元素的绝对居中

前提:块级元素

  1. 设置父子均为定位元素
  2. 对子元素设置

十一.z-index

作用

设置定位元素的层叠顺序

使用要求

  1. 必须是定位元素
  2. 需要考虑父容器的约束

如果父容器没有设置z-index或者设置为 z-index:auto,则子容器不受约束

如果父容器设置了z-index,则子容器层叠顺序以父容器z-index为准

(此时子元素的z-index只能调整自己与其他子元素之间的层叠顺序)

z-index:auto与z-index:0的异同

z-index:auto与z-index:0处于同一平面

z-index:auto不会约束子元素的层次

z-index相同(处于同一平面的定位元素)的层叠关系

后来者居上,即写在后面的元素在上一层

十二.网页布局

网页布局方式

  1. 固定布局
  2. 流体布局
  3. 弹性布局

响应式的实现方式

响应式布局没有固定的要求,只要能实现计算机站与手机站的不同效果显示,都可以称为响应式网站。

  1. 媒体查询
  2. 流体布局
  3. 弹性布局
  4. 通过 JavaScript、JQuery 进行判断来显示不同的布局页面
  5. Bootstrap 等第三方框架。

固定布局概念

 固定像素

假定使用1024px*768px分辨率

流体布局概念

 固定百分比宽度

弹性布局详细

基本概念

  • 容器与项目

容器(box): 需要添加弹性布局的父元素

项目(item):弹性布局容器中的每一个子元素,成为项目

  • 主轴与交叉轴

主轴   :在弹性布局中,通过属性规定水平或垂直方向为主轴

交叉轴:与主轴垂直的另一方向,称为交叉轴

注意:

  1. 给父容器添加 display: flex/inline-flex;属性,即可使容器内容采用弹性布局显示,而不遵循常规文档流的显示方式
  2. 容器添加弹性布局后,仅仅是容器中的项目采用弹性布局,而容器本身在文档流中的定位方式依然遵循常规文档流
  3. display:flex; 容器添加弹性布局后,显示为块级元素。
  4. display:inline-flex; 容器添加弹性布局后,显示为行级元素。
  5. 将父容器设为弹性布局后,子项目的 float、clear 和 vertical-align 属性将失效,但position 属性依然生效。

案例

<body>    
    <div id="box">        
        <div class="item1">1</div>
        <div class="item2">2</div>        
        <div class="item3">3</div>        
        <div class="item4">4</div>            
     </div>
</body>
<style>    
#box{      
  width: 200px;      
  height: 200px;      
  background-color: yellow;      
  display: flex;  
} 
#box div{      
   width: 50px;      
   height: 50px;      
   background-color: blue;      
   color: white;      
   font-size: 20px; 
}

 未添加弹性布局将采用常规文档流

 添加弹性布局将打破常规文档流,不再按照常规文档流的上下排列,默认成了一行显示

作用于容器的属性

  • flex-direction主轴方向(项目排列方向)

属性:

  1. row(默认值)   主轴为水平,方向从左到右
  2. row-reverse       主轴为水平,方向从右到左
  3. column                主轴为垂直,方向从上到下
  4. column-reverse   主轴为垂直,方向从下到上
  • flex-wrap控制换行

属性:

  1. nowrap(默认):      不换行。当容器宽度不够时,每个项目会被挤压宽度。
  2. wrap:                        换行显示,并且第一行在容器最上方。
  3. wrap-reverse:           换行显示,并且第一行在容器最下方。
  • flex-flow缩写形式

该属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap

  • justify-content主轴对齐

规定项目在主轴线上的对齐方式

  1. flex-start(默认值):项目位于主轴起点。
  2. flex-end:项目位于主轴终点。
  3. center:居中。
  4. space-between:两端对齐,项目之间的间隔都相等(开头和最后的项目,与父容器边缘没有间隔)。
  5. space-around:每个项目两侧的间隔相等。同时项目之间的间隔比项目与边框的间隔大一倍(开头和最后的项目,与父容器边缘有一定的间隔)
  • align-itmes交叉轴单行对齐

属性:

  1. flex-start:与交叉轴的起点对齐。
  2. flex-end:与交叉轴的终点对齐。
  3. center:与交叉轴的中点对齐。
  4. baseline:根据项目的第一行文字的基线对齐(文字的行高、字体大小会影响每行的基线)。
  5. stretch(默认值):如果项目未设置高度或设为 auto,则将占满整个容器的高度。
  • align-content交叉轴多行对齐

该属性规定每一行或每一列在另一方向上的对齐方式,即主轴在交叉轴的对齐方式。只有一行或一列时,该属性无效

  1. flex-start:与交叉轴的起点对齐。
  2. flex-end:与交叉轴的终点对齐。
  3. center:与交叉轴的中点对齐。
  4. space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  5. space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  6. stretch(默认值):如果项目未设置高度或设为 auto,则将占满整个容器的高度(占满整个交叉轴)。

作用于项目的属性

  • order项目排序

该属性规定项目的排列顺序,使用整数设置,数值越小越靠前,可以为负值。

未设置的项目默认为0

  • flex-grow项目放大比

该属性规定项目的放大比例,默认为 0,即如果存在剩余空间,也不放大。

第一个子项目设置flex-grow:1,其他为0,则第一个子项目占据剩余空间

  • flex-shrink项目缩小比

属性规定项目的缩小比例,默认为 1,即父容器宽度不足,子项目将缩小

第一个子项目设置flex-shrink:0,其他为2,则第一个子项目不被压缩,其他子项目压缩更严重

  • flex-basis伸缩基准值

如果主轴为水平,则设置这个属性后,相当于设置了项目的宽度,原宽度将失效。

  • flex缩写形式

该属性是 flex-grow、flex-shrink 和 flex-basis 的简写,默认值为 flex:0 1 auto。

后两个属性可选,除默认值外,还有 none(0 0 auto)和 auto(1 1 auto)两个快捷设置值。

  • align-self自身对齐

属性定义单个项目自身在交叉轴上的排列方式,可以覆盖掉容器上的 align-items 属性

补选择器大全

.class

.intro

选择 class="intro" 的所有元素。

.class1 ,  .class2

.name1 , .name2

选择 class 属性中同时有 name1 和 name2 的所有元素。

.class1  .class2

.name1 .name2

选择作为类名 name1 元素后代的所有类名 name2 元素。

#id

#firstname

选择 id="firstname" 的元素。

*

*

选择所有元素。

element

p

选择所有

元素。

element.class

p.intro

选择 class="intro" 的所有

元素。

element,element

div, p

选择所有 元素和所有

元素。

element element

div p

选择 元素内的所有

元素。

element>element

div > p

选择父元素是 的所有

元素。

element+element

div + p

选择紧跟 元素的首个

元素。

element1~element2

p ~ ul

选择前面有

元素的每个

  • 元素。

[attribute]

[target]

选择带有 target 属性的所有元素。

[attribute=value]

[target=_blank]

选择带有 target="_blank" 属性的所有元素。

[attribute~=value]

[title~=flower]

选择 title 属性包含单词 "flower" 的所有元素。

[attribute|=value]

[lang|=en]

选择 lang 属性值以 "en" 开头的所有元素。

[attribute^=value]

a[href^="https"]

选择其 src 属性值以 "https" 开头的每个 元素。

[attribute$=value]

a[href$=".pdf"]

选择其 src 属性以 ".pdf" 结尾的所有 元素。

[attribute*=value]

a[href*="w3schools"]

选择其 href 属性值中包含 "abc" 子串的每个 元素。

:active

a:active

选择活动链接。

::after

p::after

在每个

的内容之后插入内容。

::before

p::before

在每个

的内容之前插入内容。

:checked

input:checked

选择每个被选中的 元素。

:default

input:default

选择默认的 元素。

:disabled

input:disabled

选择每个被禁用的 元素。

:empty

p:empty

选择没有子元素的每个

元素(包括文本节点)。

:enabled

input:enabled

选择每个启用的 元素。

:first-child

p:first-child

选择属于父元素的第一个子元素的每个

元素。

::first-letter

p::first-letter

选择每个

元素的首字母。

::first-line

p::first-line

选择每个

元素的首行。

:first-of-type

p:first-of-type

选择属于其父元素的首个

元素的每个

元素。

:focus

input:focus

选择获得焦点的 input 元素。

:fullscreen

:fullscreen

选择处于全屏模式的元素。

:hover

a:hover

选择鼠标指针位于其上的链接。

:in-range

input:in-range

选择其值在指定范围内的 input 元素。

:indeterminate

input:indeterminate

选择处于不确定状态的 input 元素。

:invalid

input:invalid

选择具有无效值的所有 input 元素。

:lang(language)

p:lang(it)

选择 lang 属性等于 "it"(意大利)的每个

元素。

:last-child

p:last-child

选择属于其父元素最后一个子元素每个

元素。

:last-of-type

p:last-of-type

选择属于其父元素的最后

元素的每个

元素。

:link

a:link

选择所有未访问过的链接。

:not(selector)

:not(p)

选择非

元素的每个元素。

:nth-child(n)

p:nth-child(2)

选择属于其父元素的第二个子元素的每个

元素。

:nth-last-child(n)

p:nth-last-child(2)

同上,从最后一个子元素开始计数。

:nth-of-type(n)

p:nth-of-type(2)

选择属于其父元素第二个

元素的每个

元素。

:nth-last-of-type(n)

p:nth-last-of-type(2)

同上,但是从最后一个子元素开始计数。

:only-of-type

p:only-of-type

选择属于其父元素唯一的

元素的每个

元素。

:only-child

p:only-child

选择属于其父元素的唯一子元素的每个

元素。

:optional

input:optional

选择不带 "required" 属性的 input 元素。

:out-of-range

input:out-of-range

选择值超出指定范围的 input 元素。

::placeholder

input::placeholder

选择已规定 "placeholder" 属性的 input 元素。

:read-only

input:read-only

选择已规定 "readonly" 属性的 input 元素。

:read-write

input:read-write

选择未规定 "readonly" 属性的 input 元素。

:required

input:required

选择已规定 "required" 属性的 input 元素。

:root

:root

选择文档的根元素。

::selection

::selection

选择用户已选取的元素部分。

:target

#news:target

选择当前活动的 #news 元素。

:valid

input:valid

选择带有有效值的所有 input 元素。

:visited

a:visited

选择所有已访问的链接。