CSS3 基础(1)——选择器详解
CSS3选择器详解
一、 属性选择器
在CSS3中，追加了三个属性选择器分别为：[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。
|
选择器 |
示例 |
描述 |
|
[attribute^=value] |
[src^="https"] |
选择每一个src属性的值以"https"开头的元素 |
|
[attribute$=value] |
[src$=".pdf"] |
选择每一个src属性的值以".pdf"结尾的元素 |
|
[attribute*=value] |
[src*="runoob"] |
选择每一个src属性的值包含子字符串"runoob"的元素 |
示例:
|
代码 |
说明 |
|
div[class^="test"]{background:#ffff00;} |
设置class属性值以"test"开头的所有div元素的背景颜色 |
|
[class^="test"]{background:#ffff00;} |
设置class属性值以"test"开头的所有元素的背景颜色 |
|
div[class$="test"]{background:#ffff00;} |
设置class属性值以"test"结尾的所有div元素的背景颜色 |
|
[class$="test"]{background:#ffff00;} |
设置class属性值以"test"结尾的所有元素的背景颜色 |
|
div[class*="test"]{background:#ffff00;} |
设置class属性值包含"test"的所有div元素的背景颜色 |
|
[class*="test"]{background:#ffff00;} |
设置class属性值包含"test"的所有元素的背景颜色 |
二、结构性伪类选择器（一）
|
选择器 |
示例 |
描述 |
|
结构性伪元素选择器 |
||
|
:first-letter |
p:first-letter |
选择每一个<P>元素的第一个字母 |
|
:first-line |
p:first-line |
选择每一个<P>元素的第一行 |
|
:before |
p:before |
在每个<p>元素之前插入内容 |
|
:after |
p:after |
在每个<p>元素之后插入内容 |
|
结构性伪类选择器：共同特征是允许开发者根绝文档中的结构来指定元素的样式 |
||
|
:root |
:root |
选择文档的根元素 |
|
:not(selector) |
:not(p) |
选择每个并非p元素的元素 |
|
:empty |
p:empty |
选择每个没有任何子级的p元素（包括文本节点） |
|
:target |
#news:target |
选择当前活动的#news元素（包含该锚名称的点击的URL） |
①每个<p>元素之后插入内容： p:after{ content:"- Remember this"; }
②设置HTML文档的背景色： :root{ background:#ff0000; }
:root选择器用匹配文档的根元素，在HTML中根元素始终是HTML元素。
③为每个并非<p>元素的元素设置背景颜色： :not(p) { background:#ff0000; }
④指定空的p元素的背景色： p:empty { background:#ff0000; }
:empty选择器选择每个没有任何子级的元素（包括文本节点）。
⑤:target选择器可用于当前活动的target元素的样式,只能用id标识
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>菜鸟教程(runoob.com)</title>
6 <style>
7 :target{
8 border: 2px solid #D4D4D4;
9 background-color: #e5eecc;
10 }
11 </style>
12 </head>
13 <body>
14 <h1>This is a heading</h1>
15 <p><a href="#news1">Jump to New content 1</a></p>
16 <p><a href="#news2">Jump to New content 2</a></p>
17 <p>Click on the links above and the :target selector highlight the current active HTML anchor.</p>
18 <p id="news1"><b>New content 1...</b></p>
19 <p id="news2"><b>New content 2...</b></p>
20 </body>
21 </html>
三、结构性伪类选择器（二）
|
选择器 |
示例 |
描述 |
|
:first-child |
p:first-child |
指定只有当<p>元素是其父级的第一个子级的样式。 |
|
:last-child |
p:last-child |
选择每个p元素是其父级的最后一个子级。 |
|
:nth-child(n) |
p:nth-child(2) |
选择每个p元素是其父级的第二个子元素 |
|
:nth-last-child(n) |
p:nth-last-child(2) |
选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 |
|
:nth-of-type(n) |
p:nth-of-type(2) |
选择每个p元素是其父级的第二个p元素 |
|
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 |
①指定父元素中最后一个p元素的背景色： p:last-child{ background:#ff0000; }
②指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色： p:nth-last-child(2){ background:#ff0000; }
③:nth-child(n)选择器匹配父元素中的第n个子元素，n可以是一个数字，一个关键字(奇偶数等关键字)，或者一个公式。该索引的第一个子节点是1。
④:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素，n可以是一个数字，一个关键字，或者一个公式。该索引的第一个子节点是1。
p:nth-of-type(odd){background:#ff0000;}
p:nth-of-type(even){background:#0000ff;}
⑤使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。 在这里，我们对所有索引是3的倍数的p元素指定了背景颜色： p:nth-child(3n+0){ background:#ff0000; }
⑥:only-child择器匹配属于父元素中唯一子元素的元素。 p:only-child{background:#ff0000; }
四、UI元素状态伪选择器
在CSS3的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。这类选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。在CSS3中，共有17种UI元素状态伪类选择器。
|
选择器 |
示例 |
描述 |
|
:link |
a:link |
选择所有未访问链接 |
|
:active |
a:active |
选择活动链接 |
|
:hover |
a:hover |
选择鼠标在链接上面时 |
|
:focus |
input:focus |
选择具有焦点的输入元素(选中) |
|
:checked |
input:checked |
选择每个选中的输入元素 |
①:hover在鼠标移到链接上时添加的特殊样式。
提示: :hover 选择器器可用于所有元素，不仅是链接。
提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式 :active选择器设置当你点击链接时的样式。
注意: 为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后！
②:focus选择器用于选择具有焦点的元素。
提示: :focus选择器接受键盘事件或其他用户输入的元素。
一个输入字段获得焦点时选择的样式：input:focus{background-color:yellow;}
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title></title>
5 <style>
6 input:focus{
7 background-color:yellow;
8 }
9 </style>
10 </head>
11 <body>
12 <p>点击文本输入框表单可以看到黄色背景:</p>
13 <form>
14 First name: <input type="text" name="firstname" /><br>
15 Last name: <input type="text" name="lastname" />
16 </form>
17 <p><b>注意:</b> :focus 作用于 IE8,DOCTYPE 必须已声明</p>
18 </body>
19 </html>
③:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
为所有选中的输入元素设置背景颜色：input:checked { height: 50px; width: 50px; }
1 <html>
2 <head>
3 <meta charset="utf-8">
4 <title></title>
5 <style>
6 input:checked {
7 height: 50px;
8 width: 50px;
9 }
10 </style>
11 </head>
12 <body>
13 <form action="">
14 <input type="radio" checked="checked" value="male" name="gender" /> Male<br>
15 <input type="radio" value="female" name="gender" /> Female<br>
16 <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
17 <input type="checkbox" value="Car" /> I have a car
18 </form>
19 </body>
20 </html>
|
选择器 |
示例 |
描述 |
|
:enabled |
input:enabled |
选择每一个已启用的输入元素 |
|
:disabled |
input:disabled |
选择每一个禁用的输入元素 |
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>菜鸟教程(runoob.com)</title>
6 <style>
7 input:enabled{
8 background:#ffff00;
9 }
10 input:disabled{
11 background:#dddddd;
12 }
13 </style>
14 </head>
15 <body>
16 <form action="">
17 First name: <input type="text" value="Mickey" /><br>
18 Last name: <input type="text" value="Mouse" /><br>
19 Country: <input type="text" disabled="disabled" value="Disneyland" /><br>
20 Password: <input type="password" name="password" />
21 <input type="radio" value="male" name="gender" /> Male<br>
22 <input type="radio" value="female" name="gender" /> Female<br>
23 <input type="checkbox" value="Bike" /> I have a bike<br>
24 <input type="checkbox" value="Car" /> I have a car
25 </form>
26 </body>
27 </html>
五、通用兄弟元素选择器：
它用来指定位于一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用样式。
如：同一div下的子p 元素，以“~”连接， div ~ p{background-color:gold}
CSS3 基础(1)——选择器详解的更多相关文章
- [CSS3] 学习笔记-选择器详解（三）
1.UI元素状态伪类选择器 在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素伪类选择器.这些选择器的共同特征是:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用.在CSS ...
- [CSS3] 学习笔记-选择器详解（二）
1.选择器first-child.last-child.nth-child和nth-last-child 利用first-child.last-child.nth-child和nth-last-chi ...
- css 10-CSS3选择器详解
10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. #CSS3的现状 浏览器支持程度不够好,有 ...
- CSS选择器详解（伪类） 转 http://blog.csdn.net/Panda_m/article/details/50084699
CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...
- web前端学习（三）css学习笔记部分（6）-- 选择器详解
9.选择器详解 9.1 属性选择器 CSS3 属性选择器,在 CSS3 中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概 ...
- 基础拾遗------redis详解
基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...
- 基础拾遗------webservice详解
基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...
- CSS3的@keyframes用法详解:
CSS3的@keyframes用法详解:此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识:keyframes ...
- Jquery 选择器 详解 js 判断字符串是否包含另外一个字符串
Jquery 选择器 详解 在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools ...
随机推荐
- Kanzi 倒影效果制作
在kanzi中,倒影效果会经常用到,比如多媒体中. 先来看一下最终的实现效果: 在这个效果中,我们的需求是,倒影图与原图一致,透明度和可见范围可以调节. 下面说一下实现的步骤: 1.创建工程后,Roo ...
- tomcat启动不了，内存溢出
今天下午不知道做了什么,然后tomcat启动了10分钟还启动不了.然后看控制台报错信息,说是内存溢出.然后就各种百度,终于解决了.在这里记录提示自己,避免这种问题再次出现还要浪费时间去找方法解决. 最 ...
- 怎样把echarts图表做成响应式的
如果想要把echarts图表给做成响应式的那么就应该用rem 单位,给图表的外围容器设置rem 单位,然后调用jquery 的resize方法,$(window).resize(function(){ ...
- npm的理解
一 概念方面 npm的全称是node package manger ,是一个nodejs包管理工具,已经成为非官方的发布node模块包的标准.有了npm可以很快速的找到特定服务器要使用的包,进行下载, ...
- XML文件的创建和解析笔记
解析XML的四种方法 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这 ...
- 将 MacOS 默认的 PHP 版本升级到 7.*
上接:在macOS Sierra 10.12搭建PHP开发环境 设置 brew brew tap homebrew/dupes brew tap homebrew/versions brew tap ...
- 取一个整数a从右端开始的4～7位
题目:取一个整数a从右端开始的4-7位. 程序分析:可以这样考虑: (1)先使a右移4位. (2)设置一个低4位全为1,其余全为0的数.可用~(~0 < <4) (3)将上面二者进行&am ...
- docker~使用阿里加速器
回到目录 国外的docker hub速度慢这是公认的,而我们可以使用阿里提供的加速器,管理你的镜像,拉别人的镜像等等． 注册一个阿里的账号 进行加速器页面https://cr.console.aliy ...
- hdu_5963:朋友
刚看到这题时感觉是树上博弈,然后我开始用一维的数据找规律.发现在一维的树上,如果把各边的值合在一起当成一个二进制数,那么,ans只与奇偶性有关,于是,我提出了一个比较大胆的假设:若连接在root上的所 ...
- SLAM中的优化理论（一）—— 线性最小二乘
最近想写一篇系列博客比较系统的解释一下 SLAM 中运用到的优化理论相关内容,包括线性最小二乘.非线性最小二乘.最小二乘工具的使用.最大似然与最小二 乘的关系以及矩阵的稀疏性等内容.一方面是督促自己对 ...