`
张闯闯1994
  • 浏览: 19749 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

三种css选择器的单独和联合作战

阅读更多

     css常用的选择器有3种:元素选择器,类选择器和ID选择器,我们现在就领略一下它们的风采吧。

     1.元素选择器

     单独拿出来用法很简单:

html {color: blue;}/*将页面内所有文字的颜色设为蓝色*/
p {color: gray;}/*将段落的所有文字的颜色设为灰色*/
h4 {color: red;}/*将标题为h4元素的所有文字的颜色设为红色*/
h2 {font-family: sans-serif }/*将标题为h2元素的所有文字的字体设为sans-serif字体*/

     除此之外还可以分组使用:

h4,p {color: red;}/*将标题为h4元素,所有段落的所有文字的颜色设为红色*/

     将 h2 和 p 选择器放在规则左边,然后用逗号分隔,逗号告诉浏览器,规则中包含两个不同的选择器。如果没有这个逗号,那么规则的含义将完全不同,而右边是h4和p元素共同的规则。

     2.类选择器

 

.home {
    font-weight: bold;/*将文本设置为粗体*/
    color: #767571;/*设置字体颜色*/
}

     如上,与元素选择器相比使用时在类名前加一个点号,星号表示通配选择器,下面在点号前加星号的代码与上面代码没有什么不同

*.home {
    font-weight: bold;/*将类为home的文本设置为粗体*/
    color: #767571;/*设置类为home的文字的字体颜色*/
}

   3.ID选择器

 

#selected{
    color: white;/*将id为selected的文字的字体颜色设置为白色*/
    background-color: black;/*将id为selected的背景颜色设置为黑色*/
}

    与类选择器相比,一个区别是点号换井号,另外区别是同一个ID选择器在一个html文档中仅可使用一次,而且ID 属性不允许有以空格分隔的词列表。

 

    4.选择器的配合使用

    独木难成林,实际应用中,我们经常把选择器配合起来使用,如:你希望列表中的 a 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

 

li a {
    font-style: italic;
    font-weight: normal;
  }

    再比如ID选择器和元素选择器配合派生:

 

 

#cart p {
	font-style: italic;/*斜体*/
	text-align: center;/*水平居中*/
	}

      id 是cart的元素内段落的文本变为斜体字,位置是水平居中。

 

    和 id 一样,class 也可被用作派生选择器:

.item td {
        color: #f60f60;
	background: #666666;
	}   

    元素也可以基于它们的类而被选择:

td.item {
        color: #f60f60;
	background: #666666;
	}   

    另外,请注意,类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。

#sleeping {font-weight:bold;}
<p id="Sleeping">The baby is sleeping.</p>

 如上 id为sleeping的段落不会变为粗体。

 

 

 

分享到:
评论

相关推荐

    react-React组件的css选择器

    在React开发中,CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面,因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用,以及如何优化组件的...

    CSS基本选择器实用PPT课件.pptx

    本资源摘要信息将着重介绍 CSS 基本选择器的概念、语法和应用,旨在帮助学习者快速掌握 CSS 基本选择器的使用和应用。 一、CSS 概念和语法 CSS 全称为 Cascading Style Sheet,即层叠样式表。它的主要作用是实现...

    一种可视化的方式来分析选择器在CSS中的特殊性

    本文将深入探讨CSS选择器特殊性,并介绍一种可视化方法来帮助开发者更有效地理解和管理CSS样式。 首先,我们来看看CSS选择器特殊性的计算规则。特殊性分为四个等级: 1. **ID选择器**(#id):每个ID选择器赋予100...

    scrapy爬虫之CSS选择器(比前面两个更全)

    综上所述,本Scrapy爬虫项目通过CSS选择器提供了一种全面的方法来抓取和处理网页数据。了解并熟练使用CSS选择器是提高Scrapy爬虫效率的关键,尤其是在处理结构化的HTML页面时。结合Python3和Scrapy 1.0.3版本,这个...

    CSS选择器详细介绍

    常用选择器是 CSS 选择器中最基本的选择器,包括三种类型:ID 选择器、类选择器和标签选择器。 * ID 选择器:根据元素的 ID 来选择元素,例如 `#demoDiv{color:#FF0000;}`。在 HTML 中,元素可以定义一个 ID 属性,...

    利用css+javascript实现的一个日期选择器代码

    【标题】:“利用css+javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上,用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素,允许用户方便地...

    CSS选择器的介绍和使用.pdf

    CSS选择器的介绍和使用,什么是CSS选择器?CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一,一对多或者多对一的控制,就得要使用css选择器,css选择器进控制着HTML页面中的元素。

    在CSS中,选择器有哪些类型和作用

    选择器在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中,选择器有哪些类型和作用在CSS中...

    css属性选择器理解案列

    理解css属性选择器

    css选择器 的概要介绍与分析

    CSS选择器是CSS(层叠样式表)中用于选取HTML文档中的元素的一种工具。它们允许开发者根据特定的规则和条件来定位和样式化网页上的元素。CSS选择器的灵活性和多样性是CSS强大之处的关键因素之一。下面是一些关于CSS...

    CSS基本选择器实用PPT学习教案.pptx

    基本 CSS 选择器有两种:标记选择器和类别选择器。 2.1 标记选择器 标记选择器是通过 HTML 标记名来选择元素的。例如,p { font-family: "宋体";} 这样就可以将所有的段落文字设置为宋体。 2.2 类别选择器 类别...

    CSS选择器-xmind

    CSS选择器 xmind - 选择器分类(ID选择器,类选择器,标签选择器,通配选择器,属性选择器,伪类选择器)。 - 选择器关系(分组,后代,子元素,相邻兄弟,后续兄弟)。 - CSS特性(优先级,继承,层叠)。

    css颜色选择器

    CSS 颜色选取器允许您将 CSS 颜色值插入 CSS 颜色属性。 它包括标准的调色板的颜色和使用标准颜色的名称、哈希代码、RGB、RGBA、HSL 和 HSLA 颜色值,并显示最近使用的颜色的列表。 默认情况下,颜色选取器将输入...

    css选择器.xmind

    脑图形式的css选择器和层叠规则整理,包括css选择器的类型以及css层叠规则的影响因素(重要性、来源、特殊性、顺序等等),属于前端基础技术的资源

    web开发——CSS属性选择器.docx

    CSS 属性选择器是 CSS 中一种强大的选择器,允许开发者根据 HTML 元素的属性和值来设置样式。下面是 CSS 属性选择器的详细知识点: 什么是 CSS 属性选择器? CSS 属性选择器是一种选择器,它可以根据 HTML 元素的...

    CSS选择器鱼骨图记忆

    介绍CSS选择器,包含基本选择器,复合选择器,属性选择器,关系选择器,伪类选择器和伪元素选择器,首先以鱼骨图展示方便记忆

    CSS基础-派生选择器

    CSS基础-派生选择器,CSS入门必备资料

    CSS选择器分组案例.pdf

    CSS选择器分组案例 CSS选择器分组是指在CSS样式表中将多个选择器组合在...本文档通过两个案例对CSS选择器分组进行了详细的介绍,同时也提供了相关知识点和参考文献,旨在帮助读者更好地理解和应用CSS选择器分组技术。

    CSS选择器教程,CSS选择器是用来选择HTML元素并应用样式的关键部分 掌握选择器可以让你高效地控制网页的样式和布局 下面是一

    css选择器

Global site tag (gtag.js) - Google Analytics