7 css中子选择器的用法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css样式标签</title>
<style type="text/css">
.food>li{border:1px solid red;}
.first>span{border:1px solid red;}
</style>
<body>
<p class="first">三年级时,<span>我还是一个胆小如鼠的小女孩,</span>上课从来不敢回答老师提出的问题,<span>生怕回答错了老师会批评我,</span>就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没有勇气参加。</p>
<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>圈型材</li>
        </ul>
    </li>
</ul>
</body>
</html>
  
时间: 2024-10-11 07:12:43

7 css中子选择器的用法的相关文章

CSS语法与用法小字典

前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格式都稍差些.方便日后自己查阅,方便自己同时也方便他人,多好的一件事啊,呵呵! CSS目录 一.       CSS简介... 4 1.    CSS的分类... 4 1.1      内嵌样式... 4 1.2      内部样式表... 4 1.3      外部样式表... 4 2.    样式

格式与布局 CSS阴影效果(Box-shadow)用法

一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relative):那么div相对于浏览器定位. 2.外层有position:absolute(或relative):那么div相对于外层边框定位. 三.position:relative 相对位置. 把此div包含住的div的某个位置进行固定.如果外层没有包含他的,那就相对于浏览器进行相对位置的固定. 四.

CSS的padding用法详解

CSS的padding用法详解:建议:尽可能的手写代码,可以有效的提高学习效率和深度.padding属性在网页中使用非常的频繁,所以这里详细介绍一下此属性的用法.此属性用来定义元素的内边距或者内补白,所谓的内边距就是元素中的内容与元素内侧之间的空白区域.可以单独定义上下左右某一方位的内边距.代码实例:实例一:没有设置父div的内边距的时候: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"

div+css中clear用法

原文:div+css中clear用法 一开始用clear属性,只是跟float相对使用,今天看视频的时候还是不大明白,查了下资料原来是这样的哦,看咯. clear属性值有四个clear:both|left|right|none; 作用:该属性的值指出了不允许有浮动对象的边. 这个属性是用来控制float属性在文档流的物理位置的. 当属性设置float(浮动)时,他所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流能识别float(浮动),或者是希望float(浮动)后面的元素不被floa

CSS z-index的用法

理清 position及z-index的用法: static :  无特殊定位,对象遵循HTML定位规则absolute :  将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位.而其层叠通过z-index属性定义.此时对象不具有边距,但仍有补白和边框relative :  对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置, z-index:其实从字面上已经可以解释:z是从x.y以后的第三个轴,从网页上表现就是除了上

web前端——CSS 09 margin用法

margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div class="father"> <div class="box1"></div> <div class="box2"></div> </div> css样式: *{ padding:

css中border-radius用法详解

border-radius:由浮点数字和单位标识符组成的长度值.border-top-left-radius --- 左上border-top-right-radius --- 右上border-bottom-right-radius --- 右下border-bottom-left-radius --- 左下 说明:第一个值是水平半径,如果为0则为直角 圆形 代码如下 复制代码 border-radius:50px; width:100px; height:100px; border:1px

Bootstrap3 CSS样式基本用法总结

按钮 a,input,button都可以设置为按钮 a标签按钮   button标签按钮 <a class="btn btn-default" href="#" role="button">a标签按钮</a> <input type="button" class="btn btn-default" value="input的button标签按钮" />

浅谈 css 之 position用法

在 css中, position 属性有四个值可用: static(默认值).absolute.relative.fixed. relative:相对定位(相对于自身进行在常规流中的位置进行定位,保留自身原始的位置) absolite: 1.相对于自身的包含块定位: 2.寻找包含块的规则:从自身网上寻找祖先元素,寻找到的第一个position为非static修饰的祖先元 素的内边距边界 就是当前绝对定位元素的包含块:如果没有的话,则相对于 html进行定位: 3.完全脱离文档流: 4.displ