CSS_03_01_CSS组合选择器

CSS组合选择器

第01步:创建css:with.css

@charset "utf-8";

/*
组合选择器,用","隔开
*/
.a,.b,div span.sp{
    background-color:#0F0;
    color:#F00
    }

/*span的样式*/
div.di_01{
    background-color:#666;
    color:#606
    }

第02步:创建html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>组合选择器</title>
<link href="with.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <a class="b">组合标签01“.b”</a><BR />
    <span class="a">组合标签02“.a”</span>
    <div class="di_01">组合、关联标签03<span class="sp">“div span”<span></div>
</body>
</html>
时间: 2024-10-12 19:17:25

CSS_03_01_CSS组合选择器的相关文章

python--前端之CSS(css页面引入方法、选择器之基本选择器、组合选择器)

CSS产生背景: 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表. 有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁. CSS基本语法及页面引用 CSS基本语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; pr

python 46 css组合选择器 及优先级 、属性选择器

一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器: 一次性控制多个选择器 选择器之间以 ,(逗号) 隔开,每一个选择器位均可以任意合法选择器或选择器组合 2.子代(后代)选择器: 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器 每一个选择器位均可以 为任意合法选择器或选择器组合 子代选择器必须为一个父级嵌套关系,后代选择器可以为一

DAY46-前端入门-组合选择器、标签a_img_list、盒模型、伪类、盒模型布局

目录 一.组合选择器 群组选择器 子代选择器 后代选择器 相邻选择器 兄弟选择器 交集选择器 组合选择器的优先级 二.属性选择器 三.盒模型 盒模型概念 盒模型成员介绍 四.边界圆角 单角设置 整体赋值 五.常用标签 超连接标签a 图片标签img 列表标签list 六.伪类选择器 a标签的四大伪类 内容伪类 索引伪类 取反伪类 七.盒模型布局 做页面必备reset操作 盒模型布局基本介绍 display:显示方式 兄弟坑 父子坑 解决方案 一.组合选择器 群组选择器 可以将任意多个选择器分组到一

CSS【04】:CSS组合选择器

组合选择器 群组(并集)选择器 作用:给所有选择器选中的标签设置属性,可以同时控制多个选择器 格式: 选择器1, 选择器2 { 属性: 值; } 注意点: 必须使用,来连接 选择器可以使用标签名称.id名称.类名称 后代选择器 作用:找到指定标签的所有特定的后代标签,设置属性 格式: 标签名称1 标签名称2 { 属性: 值; } 先找到所有名称叫做"标签名称1"的标签,然后再在这个标签下面去查找所有名称叫做"标签名称2"的标签,然后在设置属性 注意点: 后代选择器必

css的组合选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /* 组合选择器 : 使div标签下的p标签字体变大*/ /* 1.后代选择器 */ /*div p{*/ /**/ /*font-size: 45px;*/ /*}*/ /*div .c1{*/ /*co

组合选择器

标签(空格分隔): 高级选择器 高级选择器 后代选择器 因为HTML元素可以嵌套,所以我们可以从某个元素的后代查找特定元素,并设置样式: div p { color: red; } 从div的所有后代中找p标签,设置字体颜色为红色. 儿子选择器 div>p { color: red; } 从div的直接子元素中找到p标签,设置字体颜色为红色. 毗邻选择器 div+p { color: red; } 弟弟选择器 div~p { color: red; } 找到所有div标签后面同级的p标签,设置字

CSS_03_01_CSS类选择器

第01步:编写css样式:class_01.css @charset "utf-8"; /* CSS Document */ div.class01{ background-color:#9F0; color:#FFF } 第02步: 编写html界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm

CSS组合选择器

后代选取器(以空格分隔 后代选取器匹配所有值得元素的后代元素.) div p子元素选择器(以大于号分隔 子元素选择器只能选择作为某元素子元素的元素)div>p相邻兄弟选择器(以加号分隔 相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素.)div+p普通兄弟选择器(以破折号分隔 普通兄弟选择器选取所有指定元素的相邻兄弟元素.)div~p

CSS快速入门-组合选择器

<div class="gradefather"> hello1 <div class="father">hello2 <p class="son">hello4</p> </div> <p>hello3</p> <p>hello5</p> </div> 一.A,B :任意选择器 A or B div,p { #所有div或者p