CSS选择器小结

在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选择器小结的更多相关文章

CSS选择器学习小结
关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(# ...
【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器
[网络爬虫入门04]彻底掌握BeautifulSoup的CSS选择器广东职业技术学院欧浩源 2017-10-21 1.引言目前,除了官方文档之外,市面上及网络详细介绍BeautifulSoup ...
CSS&JS小结
回顾:html: 作用:展示文件标签: <html> <head> <title></title> </head> <body> ...
day--43 HTML标签和CSS基本小结
HTML标签和CSS基本小结一:常用标签 01:块标签 p,h1--h6 ,hr ,div 02:内联标签 b,i,u,s 小提示:块标签可以嵌套内置元素或者某些块级元素,但内联元素不能包含块级元素 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
css选择器
常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...
dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
CSS选择器的权重与优先规则？
我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用 ...
css选择器的使用详解
-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选 ...

随机推荐

Python-socket网络编程
一.计算机网络多台独立的计算机用网络通信设备连接起来的网络.实现资源共享和数据传递.比如,我们之前的学过的知识可以将D盘的一个文件传到C盘,但如果你想从你的电脑传一个文件到我的电脑上目前是做不到的; ...
【Hibernate框架】关联映射（一对一关联映射）
一.整理思路: 之前,小编总结过Mybatis的关联映射,接下来,再来总结一下hibernate的相关的关联映射,直接上图: 这张图,就是小编整理总结整个Hibernate的关联映射的一个大致思路. ...
ABP集合贴（转）
ABP集合贴本文背景公司最近规划的新框架准备基于ABP来搭建,自从在阳铭博客看到ABP框架的介绍后,就一直持续关注着,但还没真正在实际项目中直接使用ABP,只是自己做了一些学习和Demo.ABP所 ...
【转】UML图与软件开发过程那点关系
首先,软工文档, 软工文档,也就是计划,设计,描述,使用软件的一些文件,它最大的特点就是固定不变,用来给不同的人和计算机来阅读.在期间,文档起到了桥梁的作用,看这张图很形象: 在这里在看一下国家统一规 ...
调用0A中断输入字符串数据段的DUP定义
;这是自动生成的代码模板 STACKS SEGMENT STACK ;堆栈段 DW DUP(?) ;注意这里只有128个字节 STACKS ENDS DATAS SEGMENT ;数据段 STRING ...
2016-2-1 Servlet细节
Servlet的一些细节(韩顺平老师视频讲解)(1)由于客户端是通过URL地址访问web服务器中的资源,所以Servlet程序想要被外界访问,必须把servlet程序映射到一个URL地址上.这个工作在 ...
【原】iOS学习之图片拉伸处理（类似qq的气泡）
原理是拉伸里面的内容,将边保护起来方法1: ①[image resizableImageWithCapInsets:UIEdgeInsetsMake(, , , )]; ②[image resiza ...
js遍历json
function test1(){ var json = [{name:'wang',age:22,sex:1},{name:'tang',age:25,sex:1},{name:'yuan',age ...
Android应用-听听
听听是一款记歌词音乐播放器android应用. 功能特点:1.搜索网络歌词.2.本地音乐分类播放.3.离线保存网络歌词.4.页面整洁干净,风格清新. 下载APP 屏幕截图:
gulp的基本使用
gulp 了解首先我们了解一下什么是gulp, gulp是前端自动化构建工具,在开发过程中很多重复的任务,我们都可以正确的使用gulp来完成,gulp基于nodejs,使用gulp可以做很多事情例 ...

CSS选择器小结

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

随机推荐

热门专题