CSS—选择器

来源：互联网发布：stm8中文数据手册编辑：程序博客网时间：2024/05/19 13:22

最近做的小项目需要搭建一个小网站，因此从慕课网上学习HTML+CSS的基础知识，接触到的知识点用这个博客总结出来。

选择器：每一条css样式声明（定义）由两部分组成，形式如下：

选择器{
样式;
}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

标签选择器：标签选择器其实就是html代码中的标签。如右侧代码编辑器中的< html>、< body>、< h1>、、< img>。

类选择器：

第一步：使用合适的标签把要修饰的内容标记起来，如下：
胆小如鼠
第二步：使用class=”类选择器名称”为标签设置一个类，如下：
胆小如鼠
第三步：设置类选器css样式，如下：
.stress{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;}.setGreen{   color:green;}</style></head><body>    <h1>勇气</h1>    <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>    <p>到了三年级下学期时，我们班上了一节<span class="setGreen">公开课</span>，老师提出了一个很简单的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。</p>    <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" ></body></html>

ID选择器：在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

1、为标签设置id=”ID名称”，而不是class=”类名称”；

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

示例代码：

<style type="text/css">#stress{    color:red;}</style></head><body>    <h1>勇气</h1>    <p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p></body>

PS：与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

子选择器：还有一个比较有用的选择器子选择器，即大于符号(>)，用于选择指定标签元素的第一代子元素。

代码如下：.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>

运行截图：
这里写图片描述

包含选择器：包含选择器，即加入空格，用于选择指定标签元素下的后辈元素。

如代码：.first span{color:red;}

这行代码会使下面代码实例中第一段文字内容中的“胆小如鼠”字体颜色变为红色。

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

示例代码：

<style type="text/css">.first span{color:red;}.food li{ border:1px solid red; }</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中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

* {color:red;}

伪类选择符：它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

示例代码：

<style type="text/css">a:hover{    color:red;    font-size:20px;}</style></head><body>    <h1>勇气</h1>    <p class="first">三年级时，我还是一个<a href="http://www.imooc.com">胆小如鼠</a>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p></body>

分组选择符：当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

h1,span{color:red;}

它相当于下面两行代码：

h1{color:red;}
span{color:red;}

至此，CSS选择器的基本知识的学习告一段落。

————————————————————————————7:47pm, 2017.7.1 于a区三楼

阅读全文

0 0