CSS 选择器
CSS 选择器
2023-09-14 09:03:17 时间
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
CSS 选择器总结 CSS 是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。
css中的选择器 css选择器是css中非常重要的一部分,包括我们通过css设置标签的样式以及js中对于某个标签样式的动态修改css选择器都是不可或缺的,今天我就来总结一下吧!
CSS3中的选择器 原文:CSS3中的选择器 这里总结一共有11种选择器,分别为: 通配符选择器、类选择器、id选择器、元素选择器(又叫标签选择器)、属性选择器、 伪类选择器、伪元素选择器、后代选择器(又叫包含选择器)、子元素选择器、兄弟选择器(相邻兄弟选择器+、通用兄弟选择器~)、群组选择器(几个共用一个,用逗号隔开) 1、通配符选择器 语法:* {属性名:属性值;属性名:属性值; .
CSS3选择器01—CSS2.1部分选择器 这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。 在开始之前,先简单介绍一下选择器,选择器的作用就是定位我们想要样式化的网页HTML元素。
相关文章
- 8个强大的基于Bootstrap的CSS框架
- CSS之旅——第三站 强大的伪选择器
- 50个CSS技巧
- CSS引入方式,高级选择器
- CSS的Class以及ID选择器
- 前端学习 -- Css -- 选择器的优先级
- 前端学习 -- Css -- 选择器的优先级
- [CSS] Create Basic Effects with CSS box-shadow
- css+div布局要素:文档流position属性 父级对象和同级对象
- Css选择器的优先级
- CSS ID选择器与CLASS选择器
- 前端面试及答案:css 选择器有哪些?权重是什么样的?
- CSS ID选择器与CLASS选择器
- html特殊字符的html,js,css写法汇总
- css js index
- 从零开始学_JavaScript_系列(13)——CSS<2>(新窗口打开,背景图片填充,底文字,小提示,CSS选择器整理)
- Python可视化数据分析02、Scrapy框架-强化测试Scrapy-CSS
- 【CSS】CSS 特性 ③ ( CSS 优先级 | 优先级引入 | 选择器基本权重 )
- 【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )
- 【从0到1学Web前端】CSS伪类和伪元素
- 【13种css选择器】学css选择器,这一篇就够了