4-4. id选择器

作者: 一Left一 | 来源:发表于2017-11-16 21:06 被阅读6次

1、ID 选择器允许以一种独立于文档元素的方式来指定样式。
作用: 根据指定的id名称找到对应的标签, 然后设置属性。
ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。

#intro {font-weight:bold;}

ID 选择器引用 id 属性中的值:

<p id="intro">This is a paragraph of introduction.</p>

2、注意点:

  • 每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
  • 在同一个界面中id的名称是不可以重复的,也就是说在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。
  • 在编写id选择器时一定要在id名称前面加上#
  • id选择器可能是区分大小写的。这取决于文档的语言,HTML 和 XHTML 将类和 ID 值定义为区分大小写,id值的大小写必须与文档中的相应值匹配。
  • id选择器不能结合使用,因为id属性不允许有以空格分隔的词列表
  • 在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
  • id选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和id值定义为区分大小写,所以类和id值的大小写必须与文档中的相应值匹配。

3、id的名称是有一定的规范的

  • id的名称只能由字母/数字/下划线 a-z 0-9 _
  • id名称不能以数字开头
  • id名称不能是HTML标签的名称,不能是a h1 img input ...
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        id: 每一个标签都有的属性,相当于是人的身份证号码,一个文件中之id不能重复
        id 取值: 字母,数字,下滑线_,命名,但是不能以数字开头,不使用标签名
        范围:整个文档,但是只能最多找到一个
        符号: #
        格式:
            #id
        用法:
            id选择器{
                规则;
            }
        */
        #word{
            color: red;
        }
    </style>
</head>
<body>
<p id="word">我是yi个段落</p>
</body>
图片.png

http://www.w3school.com.cn/css/css_selector_type.asp

相关文章

  • 4-4. id选择器

    1、ID 选择器允许以一种独立于文档元素的方式来指定样式。作用: 根据指定的id名称找到对应的标签, 然后设置属性...

  • CSS选择器(1)基本选择器

    选择器 基本选择器 标签选择器 标签{} 类选择器 .类名{} id选择器 id唯一 #id名{} 通配符选择器 ...

  • jQuery 整理

    样式篇 jQuery选择器 ①id选择器:$( "#id" )②类选择器:$( ".class" )③元素选择器:...

  • jQuery选择器

    1 基本选择器 id选择器根据id来匹配元素,示例:$(id)或者$(“#id")。 类选择器根据class来匹...

  • jQuery选择器

    1.id选择器:一个用来查找的ID,即元素的id属性 $( "#id" ) id选择器也是基本的选择器,jQuer...

  • 无标题文章

    子元素选择器 +兄弟选择器 ~通用兄弟节点选择器p~b [ ]通用选择器 [id]附带id属性的 div[ id]...

  • CSS布局基础(五)--选择器

    选择器的优先级:直接在标签中的设置样式> ID选择器 > 类选择器 > 标签选择器指定ID选择器优先级>ID选择器...

  • 学习笔记(css介绍)

    选择器分类 标签选择器 :标签名{......} 类选择器:.类名{......} ID选择器:#id名{.......

  • 第二天

    今日学习:选择器,元素选择器:标签名{},类选择器:classname{},id选择器#ID{},复合选择器:-选...

  • css选择器

    类选择器 .class ID选择器 #id 元素选择器 p 状态选择器(伪类 ) :status 位置选择器...

网友评论

    本文标题:4-4. id选择器

    本文链接:https://www.haomeiwen.com/subject/adtbmxtx.html