zl程序教程

您现在的位置是:首页 >  前端

当前栏目

CSS 选择器

CSS 选择器
2023-09-14 09:03:14 时间

1、ID选择器

2、CLASS选器

3、属性选择器
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

CSS 选择器参考手册
具体demo与语法参考:w3school

4、选择器分组

w3school

5、包含选择器(后代选择器)

w3school

6、标签指定式的选择器

如果想同时使用id和class,也想同时使用标签选择符,可以使用如下的方式:

 /*表示所有id为idDemo的p标签*/ 

 p#idDemo {

 background: cadetblue;

 font-size: 36px;

 /*表示所有class为classDemo的h1标签*/ 

 p.classDemo {

 background: cadetblue;

 font-size: 36px;

 /*小注:标签指定式的选择符用#或者.来连接,中间不能有空格*/
效果如下:



测试代码:

 !DOCTYPE html 

 html 

 head 

 meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

 title /title 

 meta charset="utf-8" / 

 style type="text/css" 

 /** {

 font-size: 12px;

 line-height: 1.5;

 color: blue;

 body {

 font-size: 12px;

 line-height: 1.5;

 color: blue;

 包含选择符

 对某对象中的子对象进行样式指点定,这样选择方式就发挥了作用。

 需要注意的是,仅对此对象的子对象标签有效,对于其它单独存在或位于此对象以外的子对象,不应用此样式设置。

 这样做的优点在于,帮我们避免过多的id、class设置,直接对所需的元素进行定义。*/

 p strong {

 font-size: 36px;

 color: red;

 /*注意下面这种*/

 #fi strong {

 font-size: 24px;

 color: brown;

 background: cadetblue;

 /*群组选择符

 对于XHMTL对象,可以对一组同时进行了相同的样式指派。

 使用逗号对选择符进行了分隔,这样书写的优点在于同样的样式只需要书写一次即可,减少代码量,改善CSS代码结构。

 使用时应该注意”逗号”是在半角模式下,并非中文全角模式。*/

 h2, h3 {

 font-weight: normal;

 /*表示所有id为idDemo的p标签*/ 

 p#idDemo {

 background: cadetblue;

 font-size: 36px;

 /*表示所有class为classDemo的h1标签*/ 

 p.classDemo {

 background: cadetblue;

 font-size: 36px;

 /*小注:标签指定式的选择符用#或者.来连接,中间不能有空格*/

 /style 

 /head 

 body 

 h1 真正的才智是刚毅的志向。 —— 拿破仑 /h1 

 感情有着极大的鼓舞力量,因此,它是一切道德行为的重要前提,谁要是没有

 强烈的志向,也就不能够热烈地把这个志向体现于事业中。 —— 凯洛夫

 /h2 

 div 勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑 /div 

 p id="idDemo" 

 生活赋予我们一种巨大的和无限高贵的 strong 礼品 /strong ,这就是青春:充满着力量,充满着期待志愿,充满着求知和斗争的志向,充满着希望信心和青春。 —— 奥斯特洛夫斯基

 br / 

 志向不过是记忆的奴隶,生气勃勃地降生,但却很难成长。 —— 莎士比亚

 p id="fi" 人所缺乏的不是才干而是 strong 志向 /strong ,不是成功的能力而是勤劳的意志。 —— 部尔卫 /p 

 当教师把每一个学生都理解为他是一个具有个人特点的、具有自己的志向、自己的智慧和性格结构的人的时候,这样的理解才能有助于教师去热爱儿童和尊重儿童。 —— 赞科夫

 /h3 

 555555555555555555555555555555555555555555

 /body 

 /html 




【web前端开发】CSS最常用的11种选择器 CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css。
CSS 重要概念之选择器 在前端开发中,CSS 是一种用于控制网页样式和布局的语言。其中选择器是 CSS 中非常重要的一个概念,它可以用来定位 HTML 元素并设置其样式。下面我们来详细介绍一下 CSS 选择器。
CSS基础选择器,你认识多少? 在上一文初识CSS中,我们了解到了其格式:选择器+{ }在初步尝试使用时,我们笼统的直接输入了p { }以选择p标签来对其操作,而这一章节里,我们再进一步探索有关基础选择器的相关内容,理解选择器的作用。