CSS 选择器
CSS 选择器
2023-09-14 09:03:14 时间
1、ID选择器
2、CLASS选器
3、属性选择器
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
CSS 选择器参考手册
具体demo与语法参考:w3school
4、选择器分组
5、包含选择器(后代选择器)
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标签来对其操作,而这一章节里,我们再进一步探索有关基础选择器的相关内容,理解选择器的作用。
相关文章
- css height 100% 和 100vh 区别
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- 在html中加入外部css样式,如何引入CSS样式表?
- 常用的css文件_css常用的三种选择器
- CSS属性选择器_伪类选择器的属性使用
- 【说站】css子元素选择器的介绍
- 【说站】CSS伪类选择器是什么
- 【说站】css中align-items属性是什么
- 【说站】css默认样式的整理
- css中的clear属性_clear啥意思
- CSS+JS实现 | 简单的萤火虫效果
- css 实现视频人物不被弹幕遮挡
- CSS Clip-path Maker
- 关于css的八个结构伪类选择器 :last-child、:first-of-type、:nth-last-of-type()
- 【CSS】CSS 背景设置 ⑨ ( 背景半透明设置 )
- 前端之CSS介绍–选择器详解编程语言
- CSS 下拉菜单详解编程语言
- CSS选择器的优先级(精讲版)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- CSShack实现CSS完美兼容IE6/IE7/FF的通用方法
- xhtml+css网页制作中常见问题解决方法
- 远离JS灾难css灾难之js私有函数和css选择器作为容器
- javascript预加载图片、css、js的方法示例介绍
- css类选择器的使用方法详解
- 你未必知道的JavaScript和CSS交互的5种方法