在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的。

网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得整个样式表结构非常混乱。为了减少class的使用频度,需要尽可能的使用选择器来指定元素。而且使用选择器还可以定义很多规则,这样也可以减少重复定义class的代码量。

在CSS3中,主要有以下几种选择器:属性选择器、结构性选择器、UI状态选择器、通用兄弟元素选择器。下面分别介绍一下:

(一)属性选择器

顾名思义,属性选择器就是根据各种属性来选定目标的。通常我们还会结合通配符来使用属性选择器。表达式为:[attr=val] {样式内容},常用通配符有以下3个:

1) [ attr*=val ] 返回'attr'属性中包含val字符串的所有元素。如[id*=section]可选中#section1、#subsection,不能选中sec-tion。

2) [ attr^=val ] 返回'attr'属性以val字符串开头的所有元素。如[id*=section]可选中#section1、不能选中#subsection。

3) [ attr$=val ] 返回'attr'属性以val字符串结尾的所有元素。如[id*=section]可选中#subsection、不能选中#section1。

属性选择器规则简单,但是使用非常灵活多变,恰当使用可以对代码起到很好的精简。

(二)结构性选择器

在CSS中,除了我们自定义的类选择器外,还有CSS已经定义好的选择器,如a元素上的a:link, a:visited, a:hover, a:active这些状态伪类。可以结合类来使用,表达式:选择器 类名:伪类/伪元素{样式内容}。在CSS中结构性选择器如下(引自http://www.w3school.com.cn/):

选择器 例子 例子描述 CSS
first-line p:first-line 选择每个 <p> 元素的首行。 1
:first-letter p:first-letter 选择每个 <p> 元素的首字母。 1
:before p:before 在每个 <p> 元素的内容之前插入内容。 2
:after p:after 在每个 <p> 元素的内容之后插入内容。 2
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。 3
:target #news:target 选择当前活动的 #news 元素。 3
:not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。 3

这里选一些常用的有内容的选择器来说一下。

1)befor和after选择器:通常会配合content使用,在被选元素内(添加到该元素内的innerHTML)的前后添加content。

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>各种选择器</title>
<style type="text/css">
h2:after {
content: "(在后面添加文字,可以指定样式)";
color: blue;
}
</style>
</head>
<body>
<p>显示效果:</p>
<div id="main">
<h2>第一个标题</h2>
<p>第1个段落</p>
<h2>第二个标题</h2>
<p>第2个段落</p>
<h2>第三个标题</h2>
<p>第3个段落</p>
</div>
</body>
</html>

如果有某些元素不加的话,可以为他们设置一个类,设置其content为none即可。h2.noadd:after { content: none; }

此外,content还可以是图片url(pathname.png),不用img标签而用content的好处可以不用编写大量img标签,常用于购物单上的新货品,文章列表中的新文章等。

看到content的作用,当然大家都能想到他的一个重要用途就是为项目增加序号了,添加序号需要两步:在content中指定couter,然后在目标元素的样式表中定义couter属性,比如couter-increment和counter-reset

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>各种选择器</title>
<style type="text/css">
h2:before { content: '第'counter(hcouter)'项'; color: red;}
h2 { counter-increment: hcouter; counter-reset: pcouter;}
p:before { content: '第'counter(pcouter)'段'; color: blue;}
p { counter-increment: pcouter; }
</style>
</head>
<body>
<span>显示效果:</span>
<div id="main">
<h2>第一个标题</h2>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h2>第二个标题</h2>
<p>段落</p>
<p>段落</p>
</div>
</body>
</html>

在嵌套中要注意的是需要在子项目前设置counter-reset: 来为下级项目号重置couter,否则上文中的第2标题下的段落就从4开始了。

2)target:使用target选择器来对页面中的target元素(ID被设置为页面中的超链接来使用)指定样式,样式只有在用户点击了该链接,并且跳转到target元素后起作用。

3):nth-child(n),:nth-of-type(n):child与type的区别在于,child在统计子元素时是不分类型的,而type是区分类型的。举个栗子:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>各种选择器</title>
<style type="text/css">
h2:nth-child(2) { background-color: blue; }
h2:nth-child(3) { background-color: grey; }
</style>
</head>
<body>
<h2>第一个标题</h2>
<p>第1个段落</p>
<h2>第二个标题</h2>
<p>第2个段落</p>
<h2>第三个标题</h2>
<p>第3个段落</p>
</body>
</html>

页面显示:

我们本意是要设置第2第3个<h2>标签的背景色,而浏览器给出的结果却把第二个h2改成了灰底,第3个h2完全没作用。这是因为在统计h2父元素的child时是不分类型的,所以<p>也被算了进去。这样的话,h2:child(2)就成了“<p>第1个段落</p>”,h2:child(3)就是“<h2>第二个标题</h2>”了。

为了解决这个问题,我们可以使用:nth-of-type(n)来指定元素类型就可以得到想要的结果了。

 <style type="text/css">
h2:nth-of-type(2) { background-color: blue; }
h2:nth-of-type(3) { background-color: grey; }
</style>

另外(n)还可以参数化以实现循环模式,输入xn+y指定x个数为一个循环,y取1~x代表循环里的x种类型,如3n+1,3n+2,3n+3(可简写成3n)。当x=2的时候就是奇偶项了,可以用单词odd(奇数)even(偶数)表示,这个方法常用在列表或者表格背景色交替切换的场景。

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>各种选择器</title>
<style type="text/css">
ul.lis {
width: 140px;
padding: 10px;
margin: 0;
}
ul.lis li {
list-style-type: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
ul.lis li:nth-child(odd) { background-color: aquamarine; }
ul.lis li:nth-child(even) { background-color: burlywood; }
</style>
</head>
<body>
<span>显示效果:</span>
<div id="main">
<ul class="lis">
交替显示列表项目
<li>列表项目1,奇数项目背景色</li>
<li>列表项目2,偶数项目</li>
<li>列表项目3</li>
<li>列表项目4</li>
</ul>
</div>
</body>
</html>

(三)UI状态伪类选择器

CSS3还提供了11种UI元素状态伪类选择器,但各浏览器对UI元素状态选择器支持不同,如下图:

这些选择器很大一部分是专为PC端设置的,主要是用在一些动态表单中。从屏幕尺寸和交互体验上考虑,移动端页面中一次呈现的表单元素应该尽可能少,因为输入表单在移动端的体验是比较差的(其实PC端也差!)。所以,在不多的内容里面,不需要太多形式上的东西!

(四)通用兄弟元素选择器

使用格式:子元素1 - 子元素2 {样式内容}

返回的是子元素1后面的所有与元素1同级的子元素2。这里的选择规则有两个:元素1后面、同级的子元素2。

总结:选择器规则不多,用法也相当简单,难点在于如何选择适当的选择器组合。上述选择器的优势是精准定位,但同时扩充性就变差了,后续假如要更改结构增减元素的话,使用上述选择器就有可能出现问题了。

CSS选择器小结的更多相关文章

  1. CSS选择器学习小结

    关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(# ...

  2. 【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器

    [网络爬虫入门04]彻底掌握BeautifulSoup的CSS选择器 广东职业技术学院  欧浩源 2017-10-21 1.引言 目前,除了官方文档之外,市面上及网络详细介绍BeautifulSoup ...

  3. CSS&JS小结

    回顾:html: 作用:展示 文件标签: <html> <head> <title></title> </head> <body> ...

  4. day--43 HTML标签和CSS基本小结

    HTML标签和CSS基本小结一:常用标签 01:块标签 p,h1--h6 ,hr ,div 02:内联标签 b,i,u,s 小提示:块标签可以嵌套内置元素或者某些块级元素,但内联元素不能包含块级元素 ...

  5. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  6. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  7. dynamic-css 动态 CSS 库,使得你可以借助 MVVM 模式动态生成和更新 css,从 js 事件和 css 选择器的苦海中脱离出来

    dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...

  8. CSS选择器的权重与优先规则?

    我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...

  9. css选择器的使用详解

    -.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...

随机推荐

  1. iOS-语法syntax

    成员变量语法 定义的是外部可见的属性 #import <Foundation/Foundation.h> @interface People : NSObject @property (n ...

  2. VirusAnti_didiwei使用说明

    前言 前段时间说要写的一个专杀框架敌敌畏,后改为强撸敌敌畏,以彰显样本查杀时的气势,现在第一版已经完成了,如下图所示,使用的时候强烈建议控制台使用放大模式,这样就可以看见我花了半天才画好了logo , ...

  3. adt_sdk_tools介绍

    draw9patch.bat hierarchyviewer.bat traceview.bat

  4. 《转》Unity3D研究院编辑器之创建Lua脚本模板

    Unity里能创建 c#脚本模板,但是如果我想创建Lua脚本模板怎么办呢?拓展一下编辑器吧. 设置一下Lua脚本的模板地址 :  Assets/Editor/Lua/Template/lua.lua ...

  5. SpringMVC -- 注解

    @Entity -- 实体类@Table(name = "hat_province", catalog = "news") -- 对应的表name -- 表名c ...

  6. Oldboy-Homework-Week2.2

    一.关于Python全栈开发第二周所讲内容的回忆(上篇)6.列表(list).元组(tuple).字典(dictionary)7.字符串.及其字符串格式化输出8.for循环二.详细内容6.1列表:列表 ...

  7. haahah

    #DB ``` import os basedir = os.path.abspath(os.path.dirname(__file__))   SQLALCHEMY_DATABASE_URI = ' ...

  8. 微软官方提供的免费正版 Windows 8.1/Win10/7/XP/Vista 操作系统虚拟机镜像下载

    https://dev.windows.com/en-us/microsoft-edge/tools/vms/windows/

  9. SecurityContextHolder.getContext().getAuthentication() return null

    <security:http> <security:intercept-url pattern="/web/**" access="IS_AUTHENT ...

  10. yoman 创建generator

    yoman作为一个模板工具,能够创建自己的模板,下面具体介绍下. 首先 安装一个模板工具(npm install -g generator-generator),此工具会自动创建一些必要的文件.安装完 ...