文档章节

CSS选择器

二两豆腐
 二两豆腐
发布于 2015/11/24 14:52
字数 966
阅读 10
收藏 0

1、基本选择器

2、分组选择器

3、通配符选择器

4、类选择器

5、ID选择器

6、属性选择器

7、后代选择器

8、子元素选择器

9、相邻兄弟选择器

10、伪类

11、伪元素

 

1、基本选择器

 

如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

 

2、分组选择器

 h2, p {color:gray;} h2 元素和段落都有灰色

 

3、通配符选择器

 

 * {color:red;} 使文档中的每个元素都为红色:

 

4、类选择器

 

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用,也可以与其他元素结合使用。

.important {color:red;}
p.important {color:red;}
只有引用了important类的段落显示为红色文本
.important.warning {silver;}
同时包含important和warning类的元素

5、ID 选择器

 

#intro {font-weight:bold;}
类选择器和 ID 选择器可能是区分大小写的
 

6、属性选择器 

6.1简单属性选择

[title] {color:red;}

把包含标题(title)的所有元素变为红色

a[href] {color:red;}

对有 href 属性的锚(a 元素)应用样式

a[href][title] {color:red;}

同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

6.2根据具体属性值选择

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}   将指向 Web 服务器上某个指定文档的超链接变成红色   与简单属性选择器类似,可以把多个属性-值选择器链接在一起来选择一个文档。   a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

6.3属性与属性值必须完全匹配

<p class="important warning">This paragraph is a very important warning.</p>   p[class="important warning"]   根据部分属性值选择   p[class~="important"] {color: red;}   class 属性中包含 important 的元素

6.4子串匹配属性选择器

 

 

类型

描述

[abc^="def"]

选择 abc 属性值以 "def" 开头的所有元素

[abc$="def"]

选择 abc 属性值以 "def" 结尾的所有元素

[abc*="def"]

选择 abc 属性值中包含子串 "def" 的所有元素

 

7、后代选择器

h1 em {color:red;}

只对 h1 元素中的 em 元素应用样式

8、子元素选择器

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的 strong 元素变为红色,但是第二个 strong 不受影响:

<h1>This is <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

9、相邻兄弟选择器

h1 + p {margin-top:50px;}

增加紧接在 h1 元素后出现的段落的上边距

这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

li + li {font-weight:bold;}

上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
 

10、伪类

属性

描述

:active

向被激活的元素添加样式。

:focus

向拥有键盘输入焦点的元素添加样式

:hover

当鼠标悬浮在元素上方时,向元素添加样式。

:link

向未被访问的链接添加样式。

:visited

向已被访问的链接添加样式。

:first-child

向元素的第一个子元素添加样式。

:lang

向带有指定 lang 属性的元素添加样式。

 

11、伪元素

属性

描述

:first-letter

向文本的第一个字母添加特殊样式。

:first-line

向文本的首行添加特殊样式

:before

在元素之前添加内容。

:after

在元素之后添加内容。

容CSS选择器,所以学会CSS选择器以后可以然后入手jquery选择器基本上没有什么门槛

 

 

本文出自 “走在未来的路上” 博客,请务必保留此出处http://wtf0313.blog.51cto.com/1093061/1193165

© 著作权归作者所有

二两豆腐
粉丝 22
博文 103
码字总数 87685
作品 0
朝阳
高级程序员
私信 提问
CSS 选择器[上]

选择器总汇 基本选择器 符合选择器 伪元素选择器 目前CSS选择器的版本已经升级至第三代,即CSS3选择器。CSS3选择器提供了更多、更丰富的选择器方式,主要分为三大类。 一、选择器总汇 三种选...

xiaoxiaobukuang
2017/10/19
0
0
CSS 选择器[下]

伪类选择器总汇 结构性伪类选择器 UI伪类选择器 动态伪类选择器 其他伪类选择器 一、伪类选择器汇总 伪类选择器分为四种类型:结构性伪类、UI伪类、动态伪类和其他伪类选择器。 二、结构性伪...

xiaoxiaobukuang
2017/10/23
0
0
CSS 从零开始(一)初识CSS

版权声明:转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 https://blog.csdn.net/powertoolsteam/article/details/89334612 什么是CSS CSS...

powertoolsteam
04/16
0
0
css(表现层)Cascading Style Sheets层叠样式表

HTML:===> 结构层 css:===> 表现层 js:===> 行为层 css的常用三种类型选择器: 1、基本选择器: id class 标签 * 逗号选择器(,) 2、包含选择器: 子代选择器(>) 后代选择器(空格) ...

AAA年华
2017/12/09
0
0
你应该知道的一些事情——CSS权重

本文由99根据Vitaly Friedman的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英...

石佛慈悲
2013/12/05
66
0

没有更多内容

加载失败,请刷新页面

加载更多

让《强化学习(第2版)》架起一座通往强化学习经典知识宝库的桥梁

上交大计算科学与工程系俞凯教授,5分钟口述讲解,带你快速认识了解年度重磅图书《强化学习(第二版)》! 在 AlphaGo战胜李世石之后,AlphaZero以其完全凭借自我学习超越人类在各种棋类游戏...

博文视点Bv
14分钟前
5
0
TLA7-EVM开发板的处理器、NOR FLASH、DDR3

TLA7-EVM开发板是一款由广州创龙基于Xilinx Artix-7系列FPGA自主研发的核心板+底板方式的开发板,可快速评估FPGA性能。核心板尺寸仅70mm*50mm,底板采用沉金无铅工艺的6层板设计,专业的PCB...

Tronlong创龙
23分钟前
3
0
UUID的变种-有序

为了解决UUID无序的问题,NHibernate在其主键生成方式中提供了Comb算法(combined guid/timestamp)。保留GUID的10个字节,用另6个字节表示GUID生成的时间(DateTime)。 /// <summary> //...

Canaan_
23分钟前
3
0
Netty学习(6)——通道间数据传输

1. FileChannel实现通道间的数据传输 在Java NIO中,如果两个通道中有一个是FileChannel,那你可以直接将数据从一个channel传输到另外一个channel。 transferFrom() FileChannel的transferF...

江左煤郎
27分钟前
3
0
AngularDOM操作

gtandsn
28分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部