1.CSS 多类选择器
<p class="important urgent warning
">
This paragraph is a very important and urgent warning.</p>
用一下代码都可以匹配
.important.warning
{background:silver;}
.important.urgent.warning
{background:silver;}
2.CSS ID选择器
#intro
{font-weight:bold;}
<p id="intro
">This is a paragraph of introduction.</p>
大小写敏感
3.CSS 属性选择器
1)属性和属性值必须完全匹配
p[class="important warning
"] {color: red;}
//p[class="important "] {color: red;} error
<p class="important warning
">This paragraph is a very important warning.</p>
2)根据部分属性值选择
p[class~
="important
"] {color: red;}
<p class="important warning
">This paragraph is a very important warning.</p>
3)子串匹配选择器
a[href*
="w3school.com.cn"]
<a href="http://www.w3school.com.cn/css/">CSS</a>
4)特定属性选择器
*[lang|
="en"] {color: red;}
<p lang="en
">Hello!</p>
<p lang="en
-us">Greetings!</p>
<p lang="en
-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
选择 lang 属性等于 en 或以 en- 开头的所有元素
4.CSS后代选择器
ul em
{color:red; font-weight:bold;}
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em>
</li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
5.CSS子元素选择器
不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,自己的第一代
h1 >
strong {color:red;}
<h1>This is <strong>very</strong><strong>very2</strong>
important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
6.CSS相邻兄弟元素
h1 +
p {margin-top:50px;}
<h1>This is a heading.</h1>
<p>This is paragraph.
</p>
<p>This is paragraph.</p>
7.CSS伪类
1)锚伪类
a:link
{color: #FF0000} /* 未访问的链接 */
a:visited
{color: #00FF00} /* 已访问的链接 */
a:hover
{color: #FF00FF} /* 鼠标移动到链接上 */
a:active
{color: #0000FF} /* 选定的链接 */
2)first-child伪类
first-child 伪类来选择元素的第一个子元素
p:first-child
{font-weight: bold;}
li:first-child
{text-transform:uppercase;}
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
在上面的例子中,作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素
。
最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素。
练习时间到啦
eg1:
table.company td > p
下面的选择器会选择作为 td 元素子元素的所有 p 元素
,这个 td 元素本身从 table 元素继承,该 table 元素有一个包含 company 的 class 属性
eg2:
html > body table + ul {margin-top:20px;}
选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。
eg3:匹配第一个 <p> 元素
<html>
<head>
<style type="text/css">
p:first-child
{
color: red;
}
</style>
</head>
<body>
<p>some text</p>
<p>some text</p>
</body>
</html>
eg4:匹配所有 <p> 元素中的第一个 <i> 元素
<html>
<head>
<style type="text/css">
p > i:first-child
{
color:red;
}
</style>
</head>
<body>
<p>some <i>text</i>
. some <i>text</i>.</p>
<p>some <i>text</i>
. some <i>text</i>.</p>
<p>some<strong><i> test</i></strong></p>
</body>
</html>
选择器匹配所有 <p> 元素中的子类为<i>的第一个 <i> 元素
eg5:匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i>
. some <i>text</i>
.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
分享到:
相关推荐
CSS3选择器--结构化伪类选择器;结构化伪类选择器;结构化伪类选择器;:root选择器;:not选择器;:only-child 选择器;:first-child和:last-child选择器;:nth-child(n)和:nth-last-child(n)选择器;:nth-of-type(n)和:nth-...
CSS中的伪类,其中讲的很清楚,不懂的同学可以参考
CSS3选择器-- 伪元素选择器 伪元素选择器 01 伪元素选择器 所谓伪元素选择器,是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有:before伪元素选择器和:after伪元素选择器 :before选择器 :...
React组件的css选择器
类选择器 针对所有的标签都适用(不建议使用) 通用选择器(通配符) CSS基础选择器编写 02 CSS基础选择器编写 标签选择器:选择器的名字代表html页面上的标签 标签选择器,选择的是页面上所有这种类型的标签,所以...
基础选择器 组合选择器 属性选择器 伪类选择器 层叠性和继承性 CSS选择器
无论是伪类还是伪元素,都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors 和 CSS Selector Level 3,两者都已经是推荐标准。
css伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,现在向大家介绍一下两种新增的Css3伪选择器。 1、UI元素状态伪类 我们把":enabled",":disabled",":...
CSS选择器-.pdf
CSS3选择器总结,里面涉及到了优先级的讲解。CSS3选择器总结,里面涉及到了优先级的讲解。CSS3选择器总结,里面涉及到了优先级的讲解。
纯css:hover伪类多级下拉菜单代码演示地址:http://www.777moban.com/Preview/28_198/
css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪...
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari...
CSS日常总结--CSS伪类
CSS选择器 xmind - 选择器分类(ID选择器,类选择器,标签选择器,通配选择器,属性选择器,伪类选择器)。 - 选择器关系(分组,后代,子元素,相邻兄弟,后续兄弟)。 - CSS特性(优先级,继承,层叠)。
CSS3选择器--链接伪类 链接伪类 01 链接伪类 定义超链接时,为了提高用户体验,经常需要为超链接指定不同的状态,使得超链接在点击前、点击后和鼠标悬停时的样式不同。 a:link a:visited a:hover a:active 链接伪类 ...
以前我还是比较忽视这两个家伙的,今天第一次见到原来伪类的好处这么多,以后会多多推荐CSS3伪类实现的效果 使用方法: 1、将head中的CSS样式引入到你的网页中 2、在你需要变成标签的html处增加class = ...
CSS伪类集合集合了CSS2中所有的伪类
以后每次查询都是最快的速度查询策略引擎会分析选择器的组成,选择最恰当的查询策略(从开始查还是从末尾查还是从中间开始)排除不必要的运算,如sizzle中的:lt伪类,这里查询时找够节点就会跳出查询,不会继续做...