css基础 组合选择器之多元素选择器 多个元素加上同一个样式

镇场诗:
    清心感悟智慧语,不着世间名与利。学水处下纳百川,舍尽贡高我慢意。
    学有小成返哺根,愿铸一良心博客。诚心于此写经验,愿见文者得启发。
——————————————————————————————————————————

code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<style type="text/css">
        /*组合选择器之多元素选择器*/
        /*多个元素加上同一个样式*/
        h3,p,.myh1{
            background-color:aqua;
        }
	</style>
</head>
<body>
    <h1 class="myh1">文韬武略</h1>
    <h2>庄子</h2>
    <h3>中庸</h3>
    <h1 class="myh1">道德经</h1>
    <h2>论语</h2>
    <p>楞严经</p>
    <h1>大学</h1>      <!--我只想前两个h1变色,所以用了class-->
    <h3>黄帝内经</h3>
    <h2>墨子</h2>
</body>
</html>

result:

——————————————————————————————————————————
博文的精髓,在技术部分,更在镇场一诗。编辑器 VS2015,浏览器 Firefox。
html+css+js,强,值得努力学习。我跟着传智播客的视频教程学习。
我是一个新手,所以如果博文的内容有可以改进的地方,甚至有错误的地方,请留下评论,我一定努力改正,争取成就一个良心博客。
注:此文仅作为科研学习,如果我无意中侵犯了您的权益,请务必及时告知,我会做出改正。

时间: 2024-10-28 16:17:28

css基础 组合选择器之多元素选择器 多个元素加上同一个样式的相关文章

CSS 组合选择符:后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器

CSS 组合选择符 CSS 组合选择符 在 CSS3 中包含了四种组合方式:CSS组合选择符包括各种简单选择符的组合方式. 后代选择器(以空格分隔) 子元素选择器(以大于号分隔) 相邻兄弟选择器(以加号分隔) 普通兄弟选择器(以破折号分隔) 后代选择器 后代选择器用于选取某元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中: 实例 divp{background-color:yellow; } 子元素选择器 与后代选择器相比,子元素选择器(Child sel

CSS基础篇选择符

关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> P b{ font-size: 60px; font-family: "微软雅黑"; color:

css3系列选择器之伪类选择器

Pseudo-Classes Selectors(伪类选择器) E:not(s) E:root E:target E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n)   这一行的选择器,都会考虑其他元素的的影响. E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-of-last-type(n)   这一行的选择器

HTML&amp;CSS基础学习笔记1.33-元素选择器

元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这样认为: 如果你想要让页面中所有的指定元素都有这个CSS效果,可以使用元素选择器. 有这样一段html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo

jQuery过滤选择器之伪类选择器和内容选择器

jQuery给我们提供了很多简易用的方法,jQuery过滤选择器是其中一种.过滤器主要通过特定的过滤规则来筛选所需DOM元素,使用冒号(:)开关. 一.基本过滤器 :first选取第一个元素(单个元素)$('li:first') :last选取最后一个元素(单个元素)$('li:last') :not(selector)等到class不是blue的元素$('li:not(.blue)')  选取class不是blue的元素 :even选择索引(0开始)是偶数的所有元素(集合元素)$('li:ev

CSS/JQuery元素选择器之&amp;&amp;和||,选择器的逻辑操作

使用CSS或JQuery选中元素的时候,很多时候我们需要对条件进行&&或者||操作. JQuery或者CSS中的||操作是很常用的,也很简单,就是通过逗号来分隔的. selector1,selector2,selectorN 比如我们想选中div或者span,那么可以通过$("div,span")来选中满足条件的元素. CSS或JQuery中的&&,我所见过的大部分都是用class进行的,不知道是不是只有这种方式. .className1.classNa

jQuery选择器之属性筛选选择器

在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

CSS基础-选择器

CSS CCS是层叠样式表(Cascading Style Sheets)的缩写 2.1 CSS引入方式 内联样式表:卸载标签的开始标记中,其作用范围仅限当前元素 <h1 style="color:red">红色标题</h1> 2.内部样式表:写在网页的<head>标签内,,写在<title>标签后,用<style>标签包含,其作用范围仅限当前网页 <style> h1{ colo:red } </style

CSS基础学习记录——伪类和伪元素

定义 伪类选择器:伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息.(CSS3中的定义) 不存在与DOM树中的信息,如<a>标签的 :link.:visited.:hover.:focus.:active.这些信息不存在与DOM树结构中,只能通过CSS选择器来获取: 不能被常规CSS选择器获取到的信息,如:first-child,选择元素的第一个子元素,这个功能无法用常规选择器实现,但是可以用js实现,不过和:first-child相比实在是