H5中的选择器

  • 什么是选择器?
    • 每一条css样式声明(定义)由两部分组成,形式如下:
选择器{
    样式;
}

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>选择器</title>
<style type="text/css">
body{
    font-size:20px;
    color:red;  
}
</style>
</head>
<body>
<p>练习练习练习练习练习练习练习练习练习练习练习</p>
</body>


  • 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码:
p{font-size:12px;line-height:1.6em;}


  • 类选择器
    语法:
    .类选器名称{css样式代码;}
    ps:
     <style type="text/css">
     .stress{
      color:red;
    }
    


注意:

1、英文圆点开头

2、其中类选器名称可以任意起名(但不要起中文噢)
使用方法:
第一步:使用合适的标签把要修饰的内容标记起来,如下:

<span>H5中的选择器</span>

第二步:使用class="类选择器名称"为标签设置一个类,如下:

<span class="stress">H5中的选择器</span>

第三步:设置类选器css样式,如下:

.stress{color:red;}/*类前面要加入一个英文圆点*/


  • ID选择器
    • 在很多方面,ID选择器都类似于类选择符,但也有一些重要的 区别:
      1、为标签设置id="ID名称",而不是class="类名称"。

      2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。


PS注意:ID选择符的前面是井号(#)号,而不是英文圆点(.)。


  • 类和ID选择器的区别
    相同点:可以应用于任何元素
    不同点:

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

正确的写法

 <p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩.
上课从来不敢回答老师提出的问题,生怕回答错了老师会批
评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>

错误的写法

 <p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩
上课从来不敢回答老师提出的问题,生怕回答错了老师会批
评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>



2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

正确的写法

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时,
我们班上了一节公开课...</p>

上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。


错误的写法

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>

上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容