愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

CSS/CSS3选择器使用总结

一、元素选择器

元素选择器是用来直接选中标签,并对其格式进行定义的选择器,语法格式:

tagName { }

如:a { }div { }

二、属性选择器

属性选择器是用来选中具有特定属性和属性值的标签的,有:
1、[attr] 选中具有attr属性的元素
2、[attr='value'] 选中具有attr="value"属性的标签
3、[attr~='value'] 选中属性值里具有value的标签,如<div class="a b c">,使用div[class~='a']将选中该DIV
4、[attr|='value'] 选中属性值以-分隔的标签,如<div class="prefix-hello>,使用[class|='prefix']将选中
5、[attr^='value'] 属性值以value开头的
6、[attr$='value'] 属性值以value结尾的
7、[attr*='value'] 属性值包含value的
优先级规则:匹配规则越严格,优先级越高

三、其他选择器

1、ID选择器

语法:#idName { }
作用:选中id="idName的元素

2、class选择器

语法:.className { }
作用:选中所有class="className"的元素

3、包含选择器

语法:Selector1 Selector2 { }
作用:选中Selector1中符合Selector2的元素

4、子选择器

语法:Selector1 > Selector2 { }
作用:是选中Selector1直接子元素

5、兄弟选择器

语法:Selector1 ~ Selector2 { }
作用:选中符合Selector2且是Selector1兄弟节点的元素

6、组合选择器

语法:Selector1, Selector2, Selector3, ... { }
作用:逗号分隔的几个选择器都将共享同一样式定义

四、伪元素选择器

伪元素选择器,W3C标准规定采用::,但是为了兼容,仍然保留对:的解析。但是如果只需针对新的浏览器,应当使用::

1、::first-letter

对文本内容的第一个字符起作用(英文是第一个字母,中文是第一个汉字),注意:first-letter仅对块级元素起作用。如果要对行级元素起作用,则需要指定widthheight,或者设置position为absolute,或者使用display: block将其变为块级元素

2、::first-line

只对文本内容中的第一行起作用。同样地,first-linefirst-letter一样,仅仅对块级元素起作用,若需对行级元素起作用,做法参考first-letter的做法

3、::before/::after

结合与内容相关的属性使用,用于在指定对象的前面(后面)添加内容
内容相关的属性:
1)include-source,属性值应该为url(url)的形式,插入绝对或相对URL地址所对应的文档。但是目前尚未有浏览器支持该属性
2)content,要在后面插入的内容,如:

<style type="text/css">
#d::after { content: 'World'; }
</style>

<div id="d">Hello </div>

上例将显示为Hello World,属性值除了是字符串外,还可以是:

  • url(url)(插入图片)
  • open-quoteclose-quote,值分别对应于quotes中用空格隔开的两个值,如:
<style type="text/css">
#d { font-size: 20px; quotes: "《" "》" }
#d::before { content: open-quote; }
#d::after { content: close-quote; }
</style>

<div id="d">时间简史</div> <!-- 显示为《时间简史》-->
  • counter(计数变量) 配合counter-increment指定计数变量名称来显示编号(此外,可以使用counter-reset来重置计数变量),如:
<style type="text/css">
.d { font-size: 20px; counter-increment: listA }
.d::before { content: counter(listA) '. '; }
</style>

<div class="d">HTML</div>
<div class="d">CSS</div>
<div class="d">Javascript</div>

将显示为:

1. HTML
2. CSS
3. Javascript
  • counter(计数变量, list-type) 用法同上,但是可以以指定的list-type方式显示,取值为:decimal(阿拉伯数字,默认)、disc (实心圆)、circle(空心圆)、square(实心方块)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(不使用项目符号)等..


五、伪类选择器

1、结构性伪类选择器

  • Selector:root 匹配根元素,HTML文档中,根元素永远是<html>
  • Selector:first-child 元素符合Selector指定的特征,且元素是其父元素的第一个子元素,如:
<style type="text/css">
#c:last-child { color: #F00 }
/* 因为#c选中第三个p,且第三个p是父元素div的最后一个元素,所以被选中 */
</style>

<div class="p">
    <p id="a">A</p>
    <p id="b">B</p>
    <p id="c">C</p>
</div>
  • Selector:last-child 元素符合Selector指定的特征,且元素是其父元素的最后一个子元素
  • Selector:nth-child(n) 元素符合Selector指定的特征,且元素是其父元素的第n个子元素(n从1开始计数)
  • Selector:nth-last-child(n) 用法同上,但是是倒数第n个子元素
  • Selector:first-of-type 符合Selector指定的特征中的第一个元素
  • Selector:last-of-type 符合Selector指定的特征中的最后一个元素
  • Selector:nth-of-type(n) 符合Selector指定的特征中的第n个元素(n从1开始计数)
  • Selector:nth-last-of-type(n) 符合Selector指定的特征中的倒数第n个元素
  • Selector:only-of-type 符合Selector指定的特征的,且是唯一一个符合的
  • Selector:empty 符合Selector指定的特征的选择器,且其内部没有任何的子元素(包括文本)

注意:

上述中的n,除了可以是具体数值外,还可以是odd/even(第奇数个、第偶数个)、xn+y(表达式)这种特殊值

2、元素状态伪类选择器

  • Selector:link 未被访问前的元素(通常是超链接)
  • Selector:visited 已被访问过的元素(通常是超链接)
  • Selector:active 在鼠标点击与释放之间
  • Selector:hover 鼠标悬停时状态
  • Selector:focus 得到焦点时状态
  • Selector:enabled 当前处于可用状态
  • Selector:disabled 当前处于禁用状态
  • Selector:checked 当前处于选中状态
  • Selector:read-only 处于只读状态
  • Selector:read-write 处于读写状态的元素
  • Selector:default 页面打开时处于选中状态的元素
  • Selector::selection 内容被选中状态

3、其他伪类选择器

  • Selector:target 符合Selector特征,且是命名锚点目标的元素
  • Selector1:not(Selector2) 符合Selector1,但是不符合Selector2的元素


六、vendor前缀

vendor前缀是指定某浏览器专用的属性值(如有些属性,仅在个别浏览器上得到实现),常用的vendor前缀有:

  • -ms- 微软IE浏览器专属的属性前缀
  • -moz- 基于Gecko引擎的浏览器专属属性前缀(如Firefox浏览器)
  • -o- Opera浏览器专属的属性前缀
  • -webkit- 基于Webkit引擎的浏览器专属属性前缀(如Chrome、Safari)