CSS_03_01_CSS选择器中单选择器：关联选择器档

选择器中单选择器：关联选择器档

第01步：编写select.css

@charset "utf-8";

/*
span标签中的b标签的exam类
*/
span b.exam{
    background-color:#036;
    color:#F00
    }

/*
span标签中的b标签，中的a标签，中的v标签
*/
span b a v.mor{
    background-color:#0F0;
    color:#C0C
    }

第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="select.css" rel="stylesheet" type="text/css" />
</head>

<body>
    选择器中的选择器：关联选择器<BR />
    （span标签中的b标签）
    <span> span标签中的b标签，然后加入<b class="exam">标签</b> </span>

    <BR />
    （span标签中的b标签，中的a标签，中的标签v标签，v标签是随意的自定义标签，可以是v，可以是其它）
    <span><b>span标签中的b标签，中的a标签，<a><v class="mor">中的v标签<v></a></b></span>
</body>
</html>

时间： 2024-12-15 06:56:23

CSS_03_01_CSS选择器中单选择器：关联选择器档的相关文章

03 通配符选择器选择器深入讨论(父子选择器、多选择器并存问题、优先级)

通配符选择器如果希望所有的元素都符合某一种样式,可以使用通配符选择器. * {margin: 0;padding: 0} *(表示所有的元素) 可以让所有html元素的外边框和内边距都默认为0,有时特别有用. 不同的浏览器对不同的左边距和上边距的指定大小是不一样的一般网页设计师把被内边距和上边距清零,这样就可以避免不同浏览器因边距不同导致打开网页后布局混乱. 这样我们就可以通配符 Margin外边距:定义元素周围的空间. Padding内边距:元素边框与元素内容之间的空白. css11-1.

CSS3之伪元素选择器和伪类选择器

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. a:link|a:visited|a:hover|a:active 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的. 由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得

jQuery选择器全解-基础选择器

Id选择: 根据元素Id选择,$(“layer1”) 选择ID为layer1的元素 <div id="layer1" style="width: 300px;height: 300px;border: 1px solid red"></div> alert($("#layer1").height()); element element选择器是一个用于搜索的元素.指向DOM节点的标签名 <a href="&q

子选择器、相邻兄弟选择器

今天新学习的关于css的各种选择器,其中子选择器和相邻兄弟选择器比较重要,可以大大的减少文档中class特性的数量.下面用一个简单的例子介绍一下他们的用处. 事例中需要表达的样式为: 第一个段落无边框也无背景色: 所有<div>中的段落都有边框: 最后3个段落背景色为灰色: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <meta http-equiv="Conten

后代选择器和子元素选择器的区别

原文简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选择器的相关概念 1.1.后代选择器后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用. h1 em {color:red;} 1.2.子

jQuery选择器,筛选器,属性选择器

jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互,能够极大地简化JavaScript编程.它的宗旨就是:“Write less, do more.“ jQuery的优势一款轻量级的JS框架.jQuery核心js文件才几十kb,不会影响页面加载速度. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻

CSS3新增（选择器{属性选择器，结构伪类选择器，伪元素选择器}）

1.属性选择器属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助类或者 id选择器. E [ att ] 选择具有 att 属性的 E 元素例如:input [ value ] E [ att = 'val' ] 选择具有 att 属性且属性值等于 val 的 E元素 E [ att = 'val' ] 选择具有 att 属性且属性值等于 val 的 E元素 E [ att ^= 'val' ] 选择具有 att 属性且属性值以 val 开头的 E元素 E

CSS后代选择器,子选择器和相邻兄弟选择器

平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格如:ul li{width:150px;} [ul和li之间用空格隔开]子选择器的标识为:> 如:ul>li{width:150px;}[ul和li之间用>隔开]相邻兄弟选择器的标识为:+ 如:h1 + p {margin-top:50px;}［h1和p之间用+隔开］ ②功能不一样:后代选择器(descendant selector),又称为包含

H5 14-后代选择器和子元素选择器

14-后代选择器和子元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14-后代选择器和子元素选择器</title> </head> <body> <!-- 1.后代选择器和子元素选择器之间的区别? 1.1 后代选择器使用空格作为连接符号子元素选择器使用>作