CSS选择器
每一条css样式声明(定义)由两部分组成,形式如下:
选择器{
样式;
}
在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。比如下面代码编辑器中第7行代码中的“p”就是选择器。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style type="text/css">
p{
font-size:12px;
color:yellow;
}
</style>
</head>
<body>
<p>慕课网(IMOOC)是学习编程最简单的免费平台。慕课网提供了丰富的移动端开发、php开发、web前端、html5教程以及css3视频教程等课程资源。它富有交互性及趣味性,并且你可以和朋友一起编程。</p>
</body>
</html>
一、 标签选择器
h1
{
font-weight:normal;
color:red;
}
二、类选择器
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
.stress{
color:red;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>
三、ID选择器
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
#stress{
color:red;
}
#setGreen{
color:green;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<p>到了三年级下学期时,我们班上了一节<span id="setGreen">公开课</span>公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
</body>
</html>
四、子选择器
选择指定标签元素的第一代子元素。如.food>li{border:1px solid red;}这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年级时,<span>我还是一个<span>胆小如鼠</span>的小女孩</span>,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
五、后代选择器
即加入空格,用于选择制定标签元素的所有后代元素。 它和子选择器的区别:
- 子选择器仅指制定标签元素的第一代后代,而后台选择器选择的时该元素的全部后代。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>后代选择器</title>
<style type="text/css">
.first span{color:red;}
.food li{
border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
}
</style>
</head>
<body>
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<!--下面是本小节任务代码-->
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
六、相邻兄弟选择器
可选择紧接在另一元素后的元素,且二者有相同父元素。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
li + li {font-weight:bold;}
用一个结合符只能选择两个相邻兄弟中的第二个元素。这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
七、通用选择器
* {color:red;}
八、伪类选择器
CSS伪类:它允许给不存在的标签进行定义。如 p:first-child、li:first-child 。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
</style>
</head>
<body>
<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><b>注释:</b>必须声明 DOCTYPE,这样 :first-child 才能在 IE 中生效。</p>
</body>
</html>
九、伪元素选择器
伪类和伪元素的区别:伪类指整个元素。伪元素指单个元素中的内容。本质区别指是否抽象创造了新元素。
<!--html片段 -->
<p>
<em>This</em>
<em>is a text</em>
</p>
<!--伪类选择器 -->
em:first-child{
color: red;
}
<!--若想用类型选择器来对应标签则需要改写html片段-->
<p>
<em class="first-child">This</em>
<em>is a text</em>
</p>
<!--类型选择器-->
em.first-child{
color: red;
}
<!-------------------------------->
<!--伪元素选择器-->
p::first-letter{
color: red;
}
<!--若想用元素选择器来对应标签则需要改写html片段-->
<p>
<em><span>T</span>his</em>
<em>is a text</em>
</p>
<!--元素选择器-->
p>span {
color: red;
}
可以看出来,伪类和伪元素分别使用类型和元素选择器来表达时,类型选择器未新创建元素而元素选择器新创建了span元素。
十、分组选择符
为多个标签元素设置同一个样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
p>i:first-child,p.p{
color: red;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p class="p">i ame a coder!</p>
<p><b>注意:</b> 当:first-child 作用于 IE8 及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>
</html>
十一、CSS权重及!importment
1.优先级排序
通用选择器<元素(类型)选择器<类选择器<属性选择器(img[alt=”img”])<伪类(a:hover)
2.计算规则(权重计算)
CSS使用那条样式作为最终样式是根据每条样式的权重来决定,权重最大的那条样式即为最终样式。
选择器 | 权重 |
---|---|
内联样式 | 1000 |
id选择器 | 100 |
类选择器、伪类选择器、属性选择器 | 10 |
元素、伪元素 | 1 |