【前端技术文档】CSS选择器

整 理：徐秀、晋哲

时 间：2015-11-09

说 明：CSS各种选择器及其意义，以及常见选择器的用法，附CSS命名建议

  • 什么是CSS？

CSS是Cascading style sheets【层叠样式表】的缩写，用来控制DOM节点的表现样式。

  • CSS结构

CSS组成: selector{property:value;}

  • CSS的选择器

选择器是确定CSS样式控制范围的标识，由于添加样式元素。

选择器优先原则：1、就近原则；2、控制范围越小，权重越高；选择符权重：id：100；class：10；标签：1；一个选择器的权重等于各个层级的权重之和，如：

#container  .lists  ul  li.item { … }的权重:100+10 +1+1+10=122.

  1. 基础选择器
选择器 含义 示例
* 通用元素选择器，匹配任何元素 * { margin:0; padding:0; }
E 标签选择器，匹配所有使用E标签的元素 p { font-size:2em; }
.info和E.info class选择器，匹配所有class name是info的（E）元素 .info { background:#ff0; }
p.info { background:#ff0; }
#info和E#info id选择器，匹配所有id的name为info的(E)元素。 #info { background:#ff0; }
p#info { background:#ff0; }
  1. 组合选择器
选择器 含义 示例
E,F 群组选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 div,p { color:#f00; }
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 #nav li { display:inline; }
li a { font-weight:bold; }
E > F 子元素选择器，匹配所有E元素的子元素F,如果F下还有F，不受该样式影响;不影响E的孙子元素F。 .one > strong { color:#f00; }
E + F 毗邻元素选择器，匹配所有紧随E元素之后的第一个同级元素F .one + p { color:#f00; }
E~F 同级选择器，匹配E元素之后的所有同级元素F。 .two ~ ul{ list-style:none; }
  1. 属性选择器【ie8- 版本必须声明<!doctype>,否则(伪)属性、伪类选择器无效】
选择器 含义 示例
E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性中包含单词“val”的E元素，该单词必须独立，前后被空格隔开。 td[class~=”name”] { color:#f00; }
E[att|=val] 匹配所有att属性以”val”开头的E元素，且”val”后必须接连字符(“-”) p[lang|=en] { color:#f00; }
CSS3新增属性选择器
E[att^=”val”] 属性att的值以”val”开头的元素 div[id^="nav"] { background:#ff0; }
E[att$=”val”] 属性att的值以”val”结尾的元素 a[src$=".pdf"]
E[att*=”val”] 属性att的值包含”val”字符串的元素 a[src*="abc"]
  1. 伪类选择器
选择器 含义 示例
E:link 匹配所有未被点击的链接 a:link {color: #f00;text-decoration:underline; }
E:visited 匹配所有已被点击的链接 a:visited {color: #f00;text-decoration:none; }
E:active 匹配鼠标已经其上按下、还没有释放的E元素 a:active {color: #f00;text-decoration:none; }
E:hover 匹配鼠标悬停其上的E元素 a:hover {color: #0f0;text-decoration:none; }
E:focus 匹配获得当前焦点的E元素【ie9+】 input[type=text]:focus { color:#000; background:#ffe; }
input[type=text]:focus:hover { background:#fff; }[当input获得焦点且鼠标悬停在input上才获得该样式]
E:lang(c) 匹配lang属性等于c的E元素 q:lang(sv) { quotes: “\201D” “\201D” “\2019″ “\2019″; }
CSS3界面相关伪类
E:enabled 匹配表单中激活的元素【ie9+】 input[type="text"]:enabled { background:#ff0;}
E:disabled 匹配表单中禁用的元素【ie9+】 input[type="text"]:disabled { background:#ddd;}
E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元【目前只有Opera支持】 input[type="text"]:disabled { background:#ddd;}
E::selection 匹配用户当前选中的元素【火狐样式单独写；且只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline】 ::selection { color:#ff0; background:#222; outline:#f00; }
::-moz-selection { color:#ff0; background:#222; outline:#f00; }
CSS3结构性伪类
E:root 匹配文档的根元素，在HTML文档，根元素是唯一html :root { background:#ccc; }
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 p:nth-child(2) { color:#f00; }
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，最后一个编号为1 p:nth-last-child(2) { color:#f00; }
E:nth-of-type(n) 与:nth-child()作用类似，但仅匹配使用标签E的元素 p:nth-of-type(2) { color:#f00; }
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但仅匹配使用标签E的元素 p:nth-of-type(2) { color:#f00; }
E:first-child 匹配父元素的第一个子元素 p:first-child { font-style:italic; }
E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素。如果父级有多个子元素，那么样式不起作用
E:only-of-type 匹配父元素下使用E标签的唯一一个子元素，如果父级有多个标签为E的子元素，那么样式不起作用
E:empty 匹配一个不包含任何子元素标签为E的元素，【标签可省略】注意，文本节点也被看作子元素 :empty { background:#f00; }
CSS3反选伪类
E:not(s) 匹配不符合当前选择器的任何元素 :not(p) { border:1px solid #ccc; }
CSS3：target伪类
E:target 匹配文档中特定”id”点击后的效果[页面内部的锚链接指向的id]
  1. 伪元素选择器
选择器 含义 示例
E:first-line 匹配E元素的第一行 p:first-line { font-weight:bold; color;#600; }
E:first-letter 匹配E元素的第一个字母 .preamble:first-letter { font-size:1.5em; font-weight:bold; }
E:before 在E元素之前插入生成的内容 .cbb:before { content:”"; display:block;background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
E:after 在E元素之后插入生成的内容 a:link:after { content: ” (” attr(href) “) “; }
  • 常用选择器

1. :hover

1.1. 我们常用的锚链接(a:hover)鼠标悬停在链接上字体变色：

a:hover{color:#f00;text-decorate:none;}

1.2. :hover伪类不是a标签特有，几乎所有标签都有该伪类，且它的浏览器兼容­­性好。用:hover可以让一个区域在鼠标滑过显示不同的样式。

代码:
11
效果：1-2
2. :before /:after【注意：使用该类伪属性：必须写content:””;】
2.1.可以在清浮动起作用
2.2.制作对话框效果时对话框侧边的边角。
代码:
css代码:
ba-1
html代码：
ba-2
效果：
ba-3
2.3. 添加小图标，可以减少标签和类的使用。
代码：
ba-4
效果：
ba-5
这个例子中，使用伪属性:before和:after可以减少至少两个标签，两个类的编写。
2.4. 用content:"(" attr(href) ")" 获取锚链接指向的网址，即使链接改变不需要手动修改HTML页。
代码：
bq-7
效果：
ba-8
3. :first-child/:last-child
3.1. 比如在一个具有相同样式的一组元素里，第一个或最后一个元素与其它元素样式略有不同。（:first-child/:last-child用途类似，下面举例:first-child。）
代码：
2-1
效果：
2-2

【附】：CSS命名建议（从1.可读性和可维护性。2.易修改性。3.公共样式的复用性 三点出发考虑命名。）

  • 布局类：header, footer, container, main, content, aside, page, section
  • 包裹类：wrap, inner
  • 区块类：region, block, box
  • 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
  • 列表类：list, item, field
  • 主次类：primary, secondary, sub, minor
  • 大小类：s, m, l, xl, large, small
  • 状态类：active, current, checked, hover, fail, success, warn, error, on, off
  • 导航类：nav, prev, back,next, breadcrumb, forward, indicator, paging, first, last
  • 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
  • 星级类：rate, star
  • 分割类：group, seperate, divider
  • 等分类：full, half, third, quarter
  • 表格类：table, tr, td, cell, row
  • 图片类：img, thumbnail, original, album, gallery,logo
  • 语言类：cn, en
  • 论坛类：forum, bbs, topic, post
  • 方向类：up, down, left, right
  • 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading，joinus，vote，tab,banner,hot... 
  1. 单词组合命名，用连字符”-(减号)”连接，单词组合体现模块功能或者是模块内容。如: .article-hd（文章头部）;  .page-tt （页面标题）
  2. 特殊化class，可以采用前缀/后缀来命名。如: 用户页的页面标题用: . user -page-tt 。
  3. 对于公用样式，命名最好多体现其功能，如: sidebar/subnav/left-page… ，并降低其权重;对于相对稳定的样式，可以跟内容结合：如goods-name/goods-intro/user-info…。

CSS选择器HTML示例地址：
\\192.168.0.18\运维网络硬盘\y袁亮\p培训\前端文档临时存放\示例文件\CSS选择器示例

发表评论