第七十节，css选择器
css选择器
学习要点：
1.选择器总汇
2.基本选择器
3.复合选择器
4.伪元素选择器
本章主要探讨 HTML5中 CSS选择器，通过选择器定位到想要设置样式的元素。目前CSS选择器的版本已经升级至第三代，即 CSS3选择器。CSS3选择器提供了更多、更丰富的选择器方式，主要分为三大类。
一．选择器总汇
本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下：
选择器 名称 说明 CSS版本
* 通用选择器 选择所有元素 2
<type> 元素选择器 选择指定类型的元素 1
#<id> id选择器 选择指定 id属性的元素 1
.<class> class选择器 选择指定 class属性的元素 1
[attr]系列 属性选择器 选择指定 attr属性的元素 2 ~ 3
s1,s2,s3... 分组选择器 选择多个选择器的元素 1
s1 s2 后代选择器 选择指定选择器的后代元素 1
s1 > s2 子选择器 选择指定选择器的子元素 2
s1 + s2 相邻兄弟选择器 选择指定选择器相邻的元素 2
s1 ~ s2 普通兄弟选择器 选择指定选择器后面的元素 3
::first-line 伪元素选择器 选择块级元素文本的首行 1
::first-letter 伪元素选择器 选择块级元素文本的首字母 1
::before 伪元素选择器 选择元素之前插入内容 2
::after 伪元素选择器 选择元素之后插入内容 2
二．基本选择器
使用简单且频率高的一些选择器归类为基本选择器。
1.通用选择器
解释：“*”号选择器是通用选择器，功能是匹配所有 html元素的选择器包括<html>和<body>标签。可以使用如下元素标记测试效果：
<style type="text/css">
* {
border: 1px solid red;
}
</style> <p>段落</p>
<b>加粗</b>
<span>无</span>
通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用。
2.元素选择器
<style type="text/css">
p {
color: red;
}
</style> <p>段落</p>
解释：直接使用元素名称作为选择器名即可。
3.ID选择器
<style type="text/css">
#abc {
font-size: 20px;
}
</style> <p id="abc">段落</p>
解释：通过对元素设置全局属性 id，然后使用#id值来选择页面唯一元素。
4.类选择器
<style type="text/css">
.abc{
border: 1px solid red;
}
</style> <b class="abc">加粗</b>
<span class="abc">无</span>
解释：通过对元素设置全局属性 class，然后使用.class值选择页面一个或多个元素。
也可以使用“元素.class值”的形式，限定某种类型的元素。
b.abc{
color: #ff272d;
}
<b class="abc">段落</b>
<b class="abc">加粗</b>
<span class="abc">文本</span>
类选择器还可以调用多个样式，中间用空格隔开进行层叠。
.abc{
color: #ff272d;
}
.def{
font-size: 20px;
}
<b class="abc">段落</b>
<b class="abc">加粗</b>
<span class="abc , def">文本</span>
5.属性选择器，通过一些标签属性来控制
超链接属性选择器，所需 CSS2版本
[href]{
color: #ff272d;
}
<a href="http://www.baidu.com">百度</a>
<p><a href="http://www.haosou.com">好搜</a></p>
解释：属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。
匹配属性值的属性选择器，通过一个属性里的一个属性值来控制，所需 CSS2版本
[type="text"]{
background-color: #fe1c23;
}
<input type="text">
<input type="password">
属性值开头匹配的属性选择器，也就是属性值开头匹配规则才能控制，所需版本 CSS3
[href^="http"] {
color: orange;
}
<a href="http://www.jxiou.com">百度</a>
<a href="www.haosou.com">好搜</a>
属性值结尾匹配的属性选择器。也就是属性值结尾匹配规则才能控制，所需版本 CSS3
[href$=".com"] {
color: orange;
}
<a href="http://www.jxiou.cn">百度</a>
<a href="http://www.haosou.com">好搜</a>
属性值包含指定字符的属性选择器。也就是标签属性值包含了指定的字符就受控制，所需版本 CSS3
[href*="jxiou"] {
color: #fe1c23;
}
<a href="http://www.jxiou.cn">百度</a>
<a href="http://www.haosou.com">好搜</a>
属性值具有多个值时，匹配其中一个值的属性选择器。所需版本 CSS2
[class~="edf"] {
font-size: 50px;
}
<p class="abc">这是一段文本</p>
<p class="edf">这是另外一段文本</p>
属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器，所需版本 CSS2
[lang|="en"] {
color: red;
}
<p class="abc">这是一段文本</p>
<p class="edf">这是另外一段文本</p>
<i lang="en-us">HTML5</i>
三．复合选择器
将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。
1.分组选择器
解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID选择器、类选择器、属性选择器混合使用。
p,b,i,span {
color: red;
}
<p>这是一段文本</p>
<b>这是另外一段文本</b>
<i>HTML5</i>
2.后代选择器
解释：选择<p>元素内部所有<b>元素。不在乎<b>的层次深度。当然，后代选择器也可以混合使用 ID选择器、类选择器、属性选择器。
p b {
color: red;
}
<p>这是另外<b>一段</b>文本</p>
<i>HTML5</i>
3.子选择器
解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择。
ul > li{
border: 1px solid red;
}
<ul>
<li>我是儿子
<ol>
<li>我是孙子</li>
<li>我是孙子</li>
</ol>
</li>
<li>我是儿子</li>
<li>我是儿子</li>
</ul>
4.相邻兄弟选择器
解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。
p + b {
color: red;
}
<p>这是一段文本</p>
<b>这是另外一段文本</b>
5.普通兄弟选择器
解释：普通兄弟选择器匹配和第一个元素后面的所有元素。
p ~ b {
color: red;
}
<p>这是一段文本</p>
<span>文本</span>
<b>这是另外一段文本</b>
四．伪元素选择器
伪选择器分为两种第一种是下节伪类选择器，还有一种就是伪元素选择器。这两种选择器特性上比较容易混淆，在 CSS3中为了区分，伪元素前置两个冒号（::），伪类前置一个冒号（:）。
1.::first-line块级首行
解释：块级元素比如<p>、<div>等的首行文本被选定。如果想限定某种元素，可以加上前置 p::first-line。
p::first-line {
color: red;
}
<p>当梁宇方决意不出席铂尔曼酒店十五周年庆酒会的时候，他的父亲，也是酒店董事长的梁泽，以及总经理梁宇青，正殷殷期盼着能够在这个酒会上正式将他介绍出来。无心接班的宇方竟然藏身在马场和分别六年的爱马Sky驰骋草原。宇青的突然现身马场令他无所遁行，就这样被压回了酒店准备亮相。但宇方仍不甘示弱，仍伺机逃跑… 小歌星杜允儿来到酒店接周年庆的暖场演唱，向天微义不容辞同行来帮忙，两人仓皇找着</p>
2.::first-letter块级首字母
解释：块级元素的首行字母。
::first-letter {
color: red;
}
<p>dfhhfewiogiweoghpwghoiwhg</p>
3.::before文本前插入
解释：在文本前插入内容。
a::before {
content: '点击-';
}
<a href="http://www.baidu.com">这里</a>
4.::after文本后插入
解释：在文本后插入内容。
a::after {
content: '-请进';
}
<a href="http://www.baidu.com">这里</a>
::selection解释：当选择文字时触发选择。CSS3版本下的选择器。
::selection{
color: red;
}
<p>dfeihfhfowiqhfwqhfwpoqfjwqhf</p>
伪类选择器
学习要点：
1.伪类选择器总汇
2.结构性伪类选择器
3.UI伪类选择器
4.动态伪类选择器
5.其他伪类选择器
本章主要探讨HTML5中CSS选择器中的伪类选择器，和伪元素选择器一样，面向某种共同特征来选择元素。
一．伪类选择器总汇
伪类选择器分为四种类型：结构性伪类、UI伪类、动态伪类和其他伪类选择器，具体如下：
选择器 名称 说明 CSS版本
:root 根元素选择器 选择文档中的根元素 3
:first-child 子元素选择器 选择元素中第一个子元素 2
:last-child 子元素选择器 选择元素中最后一个子元素 3
:only-child 子元素选择器 选择元素中唯一子元素 3
:only-of-type 子元素选择器 选择指定类型的唯一子元素 3
:nth-child(n) 子元素选择器 选择指定N个子元素 3
:enabled UI选择器 选择启用状态的元素 3
:disabled UI选择器 选择禁用状态的元素 3
:checked UI选择器 选择被选中input勾选元素 3
:default UI选择器 选择默认元素 3
:valid UI选择器 验证有效选择input元素 3
:invalid UI选择器 验证无效选择input元素 3
:required UI选择器 有required属性选择元素 3
:optional UI选择器 无required属性选择元素 3
:lin 动态选择器 未访问的超链接元素 1
:visited 动态选择器 已访问的超链接元素 1
:hover 动态选择器 悬停在超链接上的元素 2
:active 动态选择器 激活超链接上的元素 2
:foucs 动态选择器 获取焦点的元素 2
:not 其他选择器 否定选择的元素 3
:empty 其他选择器 选择没有任何内容的元素 3
:lang 其他选择器 选取包含lang属性的元素 2
:target 其他选择器 选取URL片段标识指向元素 3
二．结构性伪类选择器
结构性伪类选择器能够根据元素在文档中的位置选择元素。这类元素都有一个前缀（:）。
1.根元素选择器
解释：匹配文档中的根元素，基本不怎么用，因为总是返回<html>元素。
:root{
border: 1px solid red;
}
<p>文本</p>
2.子元素选择器
解释：选择第一个子元素。
ul > li:first-child {
color: red;
}
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
解释：选择最后一个子元素。
ul > li:last-child {
color: red;
}
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
解释：选择只有一个子元素的那个子元素。
ul > li:only-child {
color: red;
}
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<ul>
<li>列表1</li>
</ul>
解释：选择只有一个指定类型的子元素的那个子元素。也就是一个元素下的子元素只有一个的匹配
div > p:only-of-type {
color: red;
}
<div>
<p>这是段落</p>
<p>这是另外一段落</p>
</div>
<div>
<p>这是段落</p>
<span>这是一个区域</span>
</div>
3.:nth-child(n)系列
解释：选择子元素的第二个元素。
ul > li:nth-child(2) {
color: red;
}
<ul>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
</ul>
解释：选择子元素倒数第二个元素。
ul > li:nth-last-child(2) {
color: red;
}
<ul>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
<li>列表1</li>
</ul>
解释：选择特定子元素的第二个元素。
div > p:nth-of-type(2) {
color: red;
}
<div>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</div>
解释：选择特定子元素的倒数第二个元素。
div > p:nth-last-of-type(2) {
color: red;
}
<div>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
<p>这是一个段落</p>
</div>
二．UI伪类选择器
UI伪类选择器是根据元素的状态匹配元素。用于表单的属性值
解释：:enabled选择启用状态的表单元素。如输入框为启用状态的
input:enabled{
border: 1px solid red;
}
<form>
<input type="text" disabled> //禁用输入框
<input type="text">
</form>
:disabled解释：选择禁用状态的元素。如输入框为disabled禁用状态的
input:disabled{
border: 1px solid red;
}
<form>
<input type="text" disabled>
<input type="text">
</form>
:checked解释：选择勾选的input元素。
input:checked{
background-color: #fe1c23;
}
<form>
<input type="checkbox">
<input type="checkbox" checked="checked"> <!--默认勾选-->
</form>
:default解释：从一组类似的元素中选择默认元素。比如input被勾选的即默认的。
input:default{
display: none;
}
<form>
<input type="checkbox">
<input type="checkbox" checked="checked"> <!--默认勾选-->
</form>
:valid和:invalid解释：输入验证合法与不合法显示时选择的元素。
/*合法*/
input:valid {
border: 1px solid #3cff26;
}
/*不合法*/
input:invalid {
border: 1px solid #ff272d;
} <form>
<input type="text" required>
<input type="text" required>
<button>提交</button>
</form>
:required和:optional解释：根据是否具有required属性选择元素。 也就是必填项和非必填项控制
/*必填*/
input:required {
border: 1px solid #ff1822;
}
/*非必填*/
input:optional {
border: 1px solid #3cff26;
} <form>
<input type="text" required>
<input type="text">
<button>提交</button>
</form>
三．动态伪类选择器 ,控制超链接
动态伪类选择器根据条件的改变匹配元素。
:link和:visited
解释：:link 表示未访问过的超链接，:visited表示已访问过的超链接。
a:link {
color: red;
}
a:visited {
color: orange;
}
<a href="http://www.baidu.com">百度</a>
<a href="http://www.360.com">360</a>
:hover
解释：表示鼠标悬停在超链接上。
a:hover {
color: #19ff48;
}
<a href="http://www.baidu.com">百度</a>
<a href="http://www.360.com">360</a>
:active
解释：表示鼠标按下激活超链接时。
a:active {
color: #ff272d;
}
<a href="http://www.baidu.com">百度</a>
<a href="http://www.360.com">360</a>
:focus解释：表示获得焦点时。也就是文本框鼠标点击等待输入文本时
input:focus {
border: 8px solid red;
}
<input type="text">
四．其他伪类选择器
:not解释：否定选择器，反选。
a:not([href*="baidu"]) {
color: red;
}
<a href="http://www.baidu.com">baidu</a>
<a href="http://www.360.com">360</a>
<a href="http://www.jxiou.com">叫卖录音网</a>
:empty解释：匹配没有任何内容的元素。
p:empty{
border: 8px solid red;
}
<b>加粗</b>
<p></p>
<b>加粗</b>
:lang 解释：选择包含lang属性，属性值前缀为en的元素。和属性选择器匹配结果一致。也就是设置语言的选择器
:lang(en){
color: red;
}
<b>加粗</b>
<p lang="en-us">html5</p>
<b>加粗</b>
:target 解释：定位到锚点时，选择此元素。定位到锚点是受控制
:target{
color: red;
}
<a id="jx">锚点</a>
第七十节，css选择器的更多相关文章
- 第三百七十节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页
第三百七十节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索结果分页 逻辑处理函数 计算搜索耗时 在开始搜索前:start_time ...
- Html学习之十（CSS选择器的使用--伪类选择器）
伪类选择器 一.基于a标签. 1.:hover 选择鼠标滑过的超链接元素 2.:active 选择鼠标单击中的超链接元素 3.:link 选择未被访问的超链接元素 4.:visited 选择已经被访问 ...
- HTML 网页开发、CSS 基础语法——十二.CSS选择器
选择器 基础选择器:标签选择器,id选择器,类选择器,通配符选择器 高级选择器:后代选择器,交集选择器,并集选择器 1. 标签选择器: • 优点:可以选中所有的同名标签,设置所有同名标签的公共样式. ...
- 第五十六 css选择器和盒模型
1.组合选择器 群组选择器 #每个选择为可以位三种基础选择器任意一个,用逗号隔开,控制多个. div,#div,.div{ color:red } 后代(子代)选择器 .sup .sub{ 后代 } ...
- 第二百七十节，Tornado框架-生成验证码图片，以及验证码结合Session验证
Tornado框架-生成验证码图片,以及验证码结合Session验证 第一.生成验证码图片 生成验证码图片需要两个必须模块 1.python自带的random(随机模块) 2.Pillow()图像处 ...
- 第一百七十节，jQuery，事件对象，event 对象，默认行为，冒泡
jQuery,事件对象,event 对象,默认行为,冒泡 学习要点: 1.事件对象 2.冒泡和默认行为 JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器 ...
- 第三百四十节，Python分布式爬虫打造搜索引擎Scrapy精讲—css选择器
第三百四十节,Python分布式爬虫打造搜索引擎Scrapy精讲—css选择器 css选择器 1. 2. 3. ::attr()获取元素属性,css选择器 ::text获取标签文本 举例: extr ...
- 第八十六节，html5+css3pc端固定布局,网站结构,CSS选择器,完成导航
html5+css3pc端固定布局,网站结构,CSS选择器,完成导航 页面采用1280的最低宽度设计,去掉滚动条为1263像素. 项目是PC端的固定布局,会采用像素(px)单位. 网站结构语义 在没有 ...
- 第三百七十九节，Django+Xadmin打造上线标准的在线教育平台—xadmin的安装
第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装 xadmin介绍 xadmin是基于Django的admin开发的更完善的后台管理系统,页面基于Bootstr ...
随机推荐
- 用C++实现的八皇后问题
我是一个C++初学者,控制台实现了一个八皇后问题. 代码如下: //"八皇后问题"V1.0 //李国良于2017年1月11日编写完成 #include <iostream&g ...
- 向python3进发
在Python2.x中,交互输入有input和raw_input两种方法 input-----------tmd是个坑,就别用 raw_input------把输入无论是Int或str都当做是str处 ...
- delphi用TAdoStoredProc调用存储过程，兼容sql2005、2008、2014的远程事务问题
delphi7写的程序,在sql2000里没问题,调用sql2008.2014里的存储过程时,如果存储过程里操作了大量数据,很容易会莫名其妙的自己撤销掉,但是程序还识别不到,认为还在正常执行.今天尝试 ...
- JAVA上连接ubuntu14.04上的Hbase
对于新手来说,连接虚拟机上的Hbase有点繁琐,而且网上的配置不太适合初学者,今天我就整理了一下,希望对你们有帮助,第一次发博客. 1.首先去官网下载Hbase的压缩包.我这里用的是1.2.1 htt ...
- nohup及/dev/null使用
1.nohup ----后台执行,执行记录默认输出到当前目录下的nohup.out文件 nohup find /etc -name passwd 2./dev/null介绍 把/ ...
- 采用Jenkins搭建持续集成环境
Jenkins介绍 Jenkins是一个CI工具.它可以根据设定持续定期编译,运行相应代码:运行UT或集成测试:将运行结果发送至邮件,或展示成报告... 这样做的最终目的是: 让项目保持健康的状态.如 ...
- vim - 自动补齐
OmniComplete是基于ctags的,所以要先安装ctags 到http://www.vim.org/scripts/script.php?script_id=2358下载cpp_src.tar ...
- Java 并发 线程属性
Java 并发 线程属性 @author ixenos 线程优先级 1.每当线程调度器有机会选择新线程时,首先选择具有较高优先级的线程 2.默认情况下,一个线程继承它的父线程的优先级 当在一个运行的线 ...
- 关于CGI、FastCGI和PHP-FPM的关系
1.CGI是干嘛的? CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. web server(比如说nginx)只是内容的分发者.比如,如果请求/index.h ...
- sqlserver 操作xml
1.xml.exist 输入为XQuery表达式,返回0,1或是Null.0表示不存在,1表示存在,Null表示输入为空 2.xml.value 输入为XQuery表达式,返回一个SQL ...