HTML5+CSS3从入门到精通 CSS3选择器详解-职坐标

HTML5+CSS3从入门到精通 CSS3选择器详解

沉沙 2018-07-25 来源：阅读 1288 评论 0

摘要：本篇教程探讨了CSS3选择器的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了CSS3选择器的相关内容，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

一、基本选择器

基本选择器是css中使用最频繁、最基础，也是css中最早定义的选择器。

通配符选择器
通配符选择器用来选择所有元素，也可以选择某个元素下的所有元素。
例如：类名为demo下的所有元素
.demo *{ background-color:red; }

二、层次选择器

层次选择器通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。

E+F和E~F的区别是E和F都是同辈元素，E+F选择的是E元素后面的一个兄弟元素，E~F选择的是E元素后面的所有兄弟元素。

三、动态伪类选择器

css3的伪类选择器可以分成六种：动态伪类选择器、目标伪类选择器、语言伪类选择器、UI状态伪类选择器、结构伪类选择器和否定伪类选择器。

动态伪类并不存在于HTML中，只有当用户和网站交互时才能体现出来，动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种是用户行为伪类。

锚点伪类的设置须遵守的规则："link-visited-hover-active"。

四、目标伪类选择器

目标伪类选择器":target"用来匹配文档的URI中某个标识符的目标元素。URI中的标识符通常会包含一个井号（#），后面带有一个标识符名称，例如"#contact"。在Web页面中，一些URL拥有片段标识符，由一个井号后跟一个锚点或元素ID组合而成，可以链接到页面的某个特定元素。"target"伪类选择器选取链接的目标元素，然后供定义样式。

注意：目标伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效。

示例代码：
css部分

/* Add some spacing */ul, div {

margin-bottom: 10px;

}

/* Default block styles */ div {

padding: 10px;

border: 1px solid #eaeaea;

border-radius: 5px;

}

/* Change its appearance when it's matched */ div:target {

border-color: #9c9c9c;

box-shadow: 0 0 4px #9c9c9c;

}

html部分

<ul>

<li><a href="#id1">Block 1</a></li>

<li><a href="#id2">Block 2</a></li>

<li><a href="#id3">Block 3</a></li>

<li><a href="#id4">Block 4</a></li></ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. </p></div>

<p>Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>

<p>Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p></div>

<p>Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas. </p></div>

tabs效果
高亮显示区块
幻灯片效果

五、语言伪类选择器

语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从css指定。

为文档指定语言有两种方法：

（1）如果使用HTML5，可以直接设置文档的语言

<!DOCTYPE HTML><html lang="en-US">

(2)手工在文档中指定lang属性，并设置对应的语言值

<body>

语法：

E:lang(language)表示选择匹配E的所有元素，且匹配元素指定了lang属性，而且其值为language。
示例：

/*英文（en-US)版本的引文q效果*/:lang(en){

quotes:'"' '"';

}:lang(en) q{

background:red;

}/*法文（fr)版本的q效果*/:lang(fr){quotes: '<<' '>>';

}:lang(fr) q{

background:green;

}

也可以通过这种方法为不同语言版本的网站相关元素设置不同的样式，例如改变网站页面的字号、设置不同的背景图片等。

六、UI元素状态伪类选择器

UI元素状态伪类选择器主要用于form表单元素上，以提高网页的人机交互、操作逻辑以及页面的整体美观，使表达页面更具个性与品味，使用户操作页面表单更便利和简单。

UI元素状态伪类选择器语法

UI元素的状态一般包括启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。

示例代码：

/*表单元素获得焦点效果*/textarea:focus,input[type="text"]:focus,input[type="password"]:focus{

border-color:rgba(82,168,236,0.8);

outline: 0;

outline:thin dotted \9;

box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),

0 0 8px rgba(82,168,236,0.6);

}/*禁用的input,select,textarea表单元素效果*/input[disabled], /*等效于input：disabled*/select[disabled], /*等效于select：disabled*/textarea[disabled] /*等效于textarea:disabled*/

{

cursor:not-allowed;

background-color:#eee;

border-color:#ddd;

}/*禁用的单选按钮和复选按钮效果*/input[type="radio"][disabled], /*等效于input[type="radio"]:disabled*/input[type="checbox"][disabled], /*等效于input[type="checkbox"]:disabled*/

{

background-color:transparent;

}

七、结构伪类选择器

结构伪类都是基于HTML文档结构树的，也称作文档对象模型（DOM）。文档树是HTML页面的层级结构，由元素、属性和文本组成。

结构伪类选择器语法

结构伪类选择器的n是什么

参数n可以是整数（1、2、3、4）、关键字（odd、even），还可以是公式（2n+1、-n+5），参数n的起始值是1，不是0。

结构伪类选择器的参数按常用的情况划分为七种情形：

（1）参数n为具体的数值

这个数值可以是任何大于0的正整数，例如：:nth-child(3)。

（2）参数n为表达式n*length

选择n的倍数，其中n从0开始计算，而length为大于0的整数。例如：:nth-child(2n)。

（3）参数n为表达式n+length

选择大于或等于length的元素，例如：:nth-child(n+3)。

（4）参数n为表达式-n+length

选择小于或等于length的元素，例如：:nth-child(-n+3)。

（5）参数n为表达式n*length+b

其中b是想设置的偏移值，表示隔length个元素选中第n*length+b个元素，例如：:nth-child(2n+1)。

（6）参数n为关键词odd

选择系列中的奇数元素，其效果等同于:nth-child(2n-1)和:nth-child(2n+1)。

（7）参数n为关键词even

选择系列中的偶数元素，其效果等同于:nth-child(2n)。

:nth-child与:nth-last-child的区别：

:nth-child和:nth-last-child两个选择器的使用方法和所起的作用是一样的，用来选择某父元素中的特定子元素，同时所有的子元素不分类型，而且所有出现的子元素都会按文档流的先后顺序来排序。

· :nth-child选择器选择的子元素是从第一个子元素开始算起；

· :nth-last-child选择器选择的子元素是从最后一个子元素开始算起。

:nth-child和:nth-of-type的区别：

· :nth-child选择的是某父元素的子元素，这个子元素并没有指定确切的类型，同时满足两个条件时才能有效果，其一是子元素，其二此子元素刚好处在那个位置；

· :nth-of-type选择的是某父元素的子元素，并且这个子元素是指定类型。

:nth-of-type和:nth-last-of-type的区别

都是用来选择某父元素中指定类型的子元素。

· :nth-of-type选择某类型的子元素是从前往后排序计算；

· :nth-last-of-type选择的某类型子元素是从后向前排序计算。

八、否定伪类选择器

否定选择器:not()是css3的新增选择器，类似于jQuery中的:not()选择器，主要用来定位不匹配的该选择器的元素。

语法：E:not(F)匹配所有除元素F外的E元素。

例1：选择页面中所有元素，除了footer元素之外
:not(footer){...}

例2：给表单所有input定义样式，除了submit按钮之外
input:not([type=submit]){...}

九、伪元素

伪元素可用于定位文档中包含的文本，但无法在文档树中定位。伪类一般反映无法在CSS中轻松或可靠地检测到的某个元素属性或状态；伪元素表示DOM外部的某种文档结构。

CSS3中对伪元素进行了一定的调整，在以前的基础上增加一个冒号，双冒号与单冒号在CSS3中主要用来区分伪类和伪元素。

（1）伪元素::first-letter

::first-letter用来选择文本块的第一个字母，通常用于给文本元素添加排版细节，例如下沉字母或首字母。

例：制作首字下沉效果

p:first-child::first-letter{

float:left;

color:#903;

padding:4px 8px 0 3px;

font:75px/60px Georgia;

}

（2）伪元素::first-line

::first-line用来匹配元素的第一行文本，可以应用一些特殊的样式，给文本添加一些细微的区别。

例：制作首行文字效果

p:last-child::first-line{

font:italic 16px/18px Georgia;

color:#903;

}

最后一个段落的第一行文字显示为红色斜体。

（3）伪元素::before和::after

::before和::after不是指存在于标记中的内容，而是可以插入额外内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。要为伪元素生成内容，还需要配合content属性。

（4）伪元素::selection

::selection用来匹配突出显示的文本。

/*Webkit,Opera9/5+,IE 9+*/::selection{

background:颜色值;

color:颜色值;

}/*Mozilia Firefox*/::-moz-selection{

background:颜色值;

color:颜色值;

}

伪元素::selection仅接受两个属性，一个是background，另一个是color。

十、属性选择器

CSS3属性选择器列表

CSS3常见的通配符

本文由职坐标整理并发布，了解更多内容，请关注职坐标WEB前端HTML5/CSS3频道！

html5+css3从入门到精通pdf 精通html5和css3 html5css3从入门到精通视频教程

本文由 @沉沙发布于职坐标。未经许可，禁止转载。

喜欢 | 0

不喜欢 | 0

看完这篇文章有何感觉？已经有0人表态，0%的人喜欢快给朋友分享吧~

后参与评论

加入IT交流圈

JAVA工程师交流群 +加入

大数据架构师交流群 +加入

人工智能Python交流群 +加入

WEB/H5前端交流群 +加入

WEB前端 直通车

索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈

海同师资推荐更多>>

黄骈联系TA

认证System Analyst，System Architect

程光淼联系TA

精通C、C++等语言、智能芯片开发

热门就业培训班更多>>

【零基础】人工智能+Python全栈开发课程

HTML5/CSS330天热搜词更多>>

html5+css3从入门到精通源码精通html5和css3 html5css3教程下载 html5+css3从入门到精通pdf html5经典实例 html5+css3从入门到精通如何 html5 css3入门 html5css3从入门到精通视频教程 html5 css3入门到精通 html5css3教程 html5教程技巧 html5零基础教程 html5+css3 html5可以做什么 html5+css3从入门到精通下载 html5从入门到精通来自微博html5版是什么 html5教程当当 html5从入门到精通pdf html5个人简历模板