CSS id选择器

简介: CSS id选择器

id选择器语法
同理,我们可以看出,id选择器的语法规则如下:

首先,将html中想要应用类样式的元素,指定id名。

<元素名 id="指定的类名"></元素名>
<元素名 id="指定的类名">
然后,书写相应类的样式。

指定的类名 {样式声明}

类选择器与id选择器的区别
类选择器与id选择器类似,那么它们的区别是什么呢?什么情况下应该使用哪一种选择器呢?

它们最大的区别在于,在一个 HTML 文档中,可以为任意多个元素指定类,但id选择器只能使用一次,一个id只能运用于一个元素。

一般情况下,都推荐使用类选择器。而在一些特定情况下,我们才会建议使用id选择器。例如,通过id选择器在页面中定义锚,在编写 JavaScript 为指定的页面元素应用特殊行为时。

编程要求
为header元素添加名为menu的id;

使用id选择器,设置精选(#chosen)标题为红色(red),时事( #news)标题为蓝色(blue),财政(#finance)标题为橄榄绿(olive), 思想(#think)标题为绿色(green),生活(#life)标题为橘色(orange)。

<!DOCTYPE html>














  • 精选

  • 时事

  • 财政

  • 思想

  • 生活





  • 精选


  • 精选新闻1

  • 精选新闻2

  • 精选新闻3



  • 时事


  • 时事新闻1

  • 时事新闻2

  • 时事新闻3



  • 财政


  • 财政新闻1

  • 财政新闻2

  • 财政新闻3



  • 思想


  • 思想新闻1

  • 思想新闻2

  • 思想新闻3



  • 生活


  • 生活新闻1

  • 生活新闻2

  • 生活新闻3



  • Copyright (c) News Copyright Holder All Rights Reserved.



    相关文章
    |
    6天前
    |
    缓存 前端开发
    CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
    CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
    |
    3天前
    |
    移动开发 前端开发 HTML5
    2024.3.30-认识 CSS (文本样式、复合选择器)
    2024.3.30-认识 CSS (文本样式、复合选择器)
    |
    15天前
    |
    前端开发 JavaScript
    CSS进阶-CSS选择器高级:伪类与伪元素
    【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
    CSS进阶-CSS选择器高级:伪类与伪元素
    |
    6天前
    |
    前端开发
    CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
    CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
    |
    6天前
    |
    前端开发
    CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
    CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
    |
    21天前
    |
    前端开发
    CSS基础-CSS选择器:ID、Class、Tag
    【6月更文挑战第7天】本文介绍了CSS中的三种基本选择器:ID、Class和Tag选择器。Tag选择器适用于统一设置同类型元素样式,但可能造成样式泛化;Class选择器灵活性高,适合复用,注意命名规范和避免过度使用;ID选择器具有最高优先级,用于唯一标识,应谨慎使用。理解其特点和场景,结合良好命名规范,能提升CSS代码效率和可维护性。
    |
    22天前
    |
    Web App开发 移动开发 前端开发
    Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
    Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
    22 1
    |
    22天前
    |
    移动开发 前端开发 HTML5
    Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
    Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
    30 1
    |
    1天前
    |
    前端开发
    CSS 选择器优先级详解及实例演示
    CSS 选择器优先级详解及实例演示
    5 0
    |
    1天前
    |
    前端开发 开发者
    CSS 选择器与相关规则详解
    CSS 选择器与相关规则详解
    6 0