CSS选择器

大锅爱喝凉茶

于 2018-09-03 15:21:12 发布

阅读量158

点赞数

分类专栏： web前端文章标签： CSS 权重选择器

本文链接：https://blog.csdn.net/wang7610232/article/details/82345738

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

选择器	权重
内联样式	1000
id选择器	100
类选择器、伪类选择器、属性选择器	10
元素、伪元素	1

大锅爱喝凉茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器

CSS选择器目录CSS选择器目录1. 标签选择器2.类选择器ID选择器子选择器后代选择器通用选择器伪类选择器分组选择符CSS权重及！importment1.优先级排序2.计算规则（权重计算）选择器权重内联样式 1000 id选择器 100 类选择器、伪类选择器、属性选择器 10 元素...
复制链接

扫一扫