精华内容
下载资源
问答
  • itcss-sample:一个简单的ITCSS结构示例
  • 基本css 基本CSS-仅用一个文件创建CSS结构
  • CSS结构伪类选择器

    万次阅读 多人点赞 2018-01-11 20:08:37
    结构伪类选择器 结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:last-...

    结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。

    表 2-6 结构伪类选择器
    选择器功能描述版本
    E:last-child选择父元素的倒数第一个子元素E,相当于E:nth-last-child(1)3
    E:nth-child(n)选择父元素的第n个子元素,n从1开始计算3
    E:nth-last-child(n)选择父元素的倒数第n个子元素,n从1开始计算3
    E:first-of-type选择父元素下同种标签的第一个元素,相当于E:nth-of-type(1)3
    E:last-of-type选择父元素下同种标签的倒数第一个元素,相当于E:nth-last-of-type(1)3
    E:nth-of-type(n)与:nth-child(n)作用类似,用作选择使用同种标签的第n个元素3
    E:nth-last-of-type与:nth-last-child作用类似,用作选择同种标签的倒数第一个元素3
    E:only-child选择父元素下仅有的一个子元素,相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1)3
    E:only-of-type选择父元素下使用同种标签的唯一子元素,相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1)3
    E:empty选择空节点,即没有子元素的元素,而且该元素也不包含任何文本节点3
    E:root选择文档的根元素,对于HTML文档,根元素永远HTML3

    结构伪类选择器很容易遭到误解,需要特别强调。如,p:first-child表示选择父元素下的第一个子元素 p,而不是选择 p 元素的第一个子元素。

    需要注意的是,结构伪类选择器中,子元素的序号是从 1 开始的,也就是说,第一个子元素的序号是 1,而不是 0。换句话说,当参数 n 的计算结果为 0 时,将不选择任何元素。

    接下来,简单介绍 :first-child、:last-child、:nth-child、:nth-of-type、:empty 这几个选择器,其他选择器的功能在表格中已经描述清楚,不再赘述。

    E:first-child 和 E:last-child

    :first-child 和 :last-child分别用于选择元素的子元素中,符合条件的第一个和最后一个子元素。:first-child 伪类在CSS2就已经存在,:last-child 伪类是CSS3新增的伪类。

    如,对于下面的 tab 菜单,希望该 tab 菜单的第一个元素的左上角,和最后一个元素的右上角应用圆角。HTML代码如下:

    
    
    1. <ul class = "tabMenu">
    2. <li><a href="# ">公司介绍</a></li>
    3. <li><a href="# ">产品中心</a></li>
    4. <li><a href="# ">新闻动态</a></li>
    5. </ul>

    在CSS3之前,直接选取 class 为 tab 元素的第一个或最后一个子元素,是不可能的。现在,通过 :first-child 和 :last-child 伪类,就可以轻松实现。CSS代码如下:

    
    
    1. .tabMenu li:first-child {
    2. border-top-left-radius: 5px;
    3. }
    4. .tabMenu li:last-child {
    5. border-top-right-radius: 5px;
    6. }

    上述代码的运行结果如图 2‑19 所示:

    first-child和last-child伪类图2-19 first-child和last-child伪类

    E:nth-child(n)

    E:nth-child(n) 用于选择某个父元素的一个或多个特定的子元素。n 表示不确定的数字,th 是英语中序数词的后缀。因此,nth-child 就表示第 n 个子元素。该选择器的参数 n 可以是数字、公式或关键字:

    1)数字:可以是任何大于 0 的正整数。如,.tab li:nth-child(2),表示选择 class 为 .tab 的父元素下,第 2 个 li 子元素。

    2)公式:格式为 (an + b)。其中,a表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。如,:nth-child(n+4) 选取序号大于等于 4 的元素,:nth-child(-n+4) 选取序号小于等于 4 的元素,:nth-child(2n) 选取序号为偶数的元素,:nth-child(2n+1) 选取序号为奇数的元素,:nth-child(3n) 选取序号为3、6、9…的子元素(即“隔二选一”),:nth-child(3n+1) 选取序号为1、4、7、10…的子元素,等等。

    3)关键字:只有odd 和 even 两个关键字。odd表示选取序号为奇数的元素,效果等同于 :nth-child(2n-1) 和 :nth-child(2n+1);even表示选取序号为偶数的元素,效果等同于 :nth-child(2n)。

    E:nth-of-type(n)

    :nth-of-type(n) 与 :nth-child(n) 的作用和使用方法完全相同,唯一不同的是,它用来选择某个父元素下,指定类型的一个或多个特定的子元素。

    E:empty

    选择空节点,即不包含任何子元素的元素,也就是内容为空白的元素。因为文本节点本身也被看作子元素,所以,包含文本节点的元素就不是空元素,哪怕是一个空格。如:

    
    
    1. <div>
    2. <p>我包含文本节点,我不是空元素</p>
    3. <p></p>
    4. </div>

    对上述HTML代码调用样式如下:

    
    
    1. p:empty {
    2. height: 25px;
    3. background: #eee;
    4. border: 1px solid #f90;
    5. }

    上述HTML代码中,由于最后一个 p 元素是空节点,则会被 p:empty 选择器选中。于是,它就会表现为一个高度为 25px,背景色为灰色,带有1px 的橙色边框的矩形框。运行结果如图 2‑20 所示:

    E:empty运行结果图2-20 E:empty运行结果

    :nth-child 与 :nth-of-type 的区别:

    :nth-child 和 :nth-of-type 都能选择子元素,它们到底有什么区别呢?

    区别其实也很简单,E:nth-child(n) 是把所有子元素作为选择对象,选择其中的第n个子元素,且这个子元素的类型必须是 E,如果不是,则选择失败。而 E:nth-of-type(n) 则先把类型为E的所有子元素选择出来,从1开始编号,然后把这些子元素作为选择对象,选择其中的第n个。假如有以下HTML代码片段: 

    
    
    1. <div>
    2. <ul class="demo">
    3. <p>zero</p>
    4. <li>one</li>
    5. <li>two</li>
    6. </ul>
    7. </div>

    上述代码中,.demo li:nth-child(2)是从 .demo 的所有子元素中找第二个子元素,且第二个子元素的类型必须是 li,选择结果为<li>one</li>节点;.demo li:nth-of-type(2) 先把 .demo 的所有类型为 li 的子元素找出来,然后选择其中的第 2 个,选择结果为 <li>two</li> 节点。

    关于作者

    歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。


    展开全文
  • 今天说说九个CSS3结构性伪类选择器
  • 安装方式 1 ... 安装 2 vscode内搜索插件 uihelper A util let you code the user interface simpleness,efficient and so on!...synchronization preveiw ui interface when editor the css(less,scss,stylus...)

    安装方式 1 marketplace.visualstudio.com/items?itemN… 安装 2 vscode内搜索插件 uihelper

    A util let you code the user interface simpleness,efficient and so on!

    • just an beta(0.0.3) version now
    • open source in the release(1.0.0) version

    Usage

    usage

    Feature list

    • xmllike(html,xml,jsx,tsx,微信小程序,支付宝小程序,各种小程序...) to csslike(less,scss,stylus...)
    • csslike(less,scss,stylus...) to xmllike(html,xml,jsx,tsx,微信小程序,支付宝小程序,各种小程序...)
    • custom selector rule
    • synchronization preveiw ui interface when editor the css(less,scss,stylus...)
    展开全文
  • 主要介绍了CSS中的属性选择符和结构化伪类,是CSS入门学习中的基础知识,需要的朋友可以参考下
  • CSS 基本结构

    千次阅读 2019-08-20 18:42:18
    CSS 构造块、关联样式表、选择器

    1 前言

    HTML只包含了网页所有的内容,并不涉及字体的大小、行间距等这些网页的排版,这些功能由CSS(层叠样式表)实现。CSS是直接作用于已有的HTML内容的,HTML负责列出网页所有的内容,CSS负责将这些内容排版。
    主要有三个问题:
    (1)CSS的格式是什么
    (2)CSS怎么与HTML关联
    (3)CSS怎么对HTML中的某部分排版
    下面依次解释这三个问题。

    2 CSS构造块

    CSS由若干条“规则”组成,每条规则有两个部分:“选择器”和“声明块”。

    h1 {
    	color: red;
    	
    }
    

    上面这个例子就是一条规则,其中,“h1”是选择器,说明是针对HTML中的h1进行样式设计,大括号及其包起来的内容就是声明块,里面有若干条对选择器(这里就是h1)的设计内容,比如这个例子中,就将h1的颜色设置为红色。

    3 关联样式表

    将CSS和HTML进行关联有三种方式:外部样式表、嵌入样式表和内联样式。

    3.1 外部样式表(首选方法)
    将CSS的所有内容独立放在一个文档(.css)中,然后在HTML中与之关联。

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>页面的标题</title>
    		/*下面这行是重点!!!*/
    		<link rel="stylesheet" href="style.css" />
    	</head>
    	<body>
    		...
    	</body>
    </html>
    
    

    从上面的例子中可以看到,<link rel="stylesheet" href="style.css" />就是将“style.css”链接到本HTML页面中。其中href是必须的,rel可选。顺便提一下,CSS注释采用/* */
    3.2 嵌入样式表
    嵌入样式表,顾名思义,就是将CSS的内容嵌入到HTML中。

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>页面的标题</title>
    		/*下面的style是重点!!!*/
    		<style>
    			img{
    				border: 4px solid red;
    			}
    		</style>
    	</head>
    	<body>
    		...
    	</body>
    </html>
    

    style元素就是嵌入的内容。
    3.3 内联样式
    内联样式表更为细致,直接放在具体的元素中。

    <body>
    	...
    	<img src="..." width="250" height="163" alt="..."
    	style="border: 4px solid red" />
    	...
    </body>
    

    其中,style属性就是内联的样式内容。

    注意,推荐使用外部样式表,方便维护

    4 选择器

    “选择器”的作用就是指明要选定的HTML中的内容,这里主要介绍三种:按名称选择、按类或ID选择、其他选择。前两种用的多一些。
    4.1 按名称选择元素

    h1 {
    	color: red;
    	
    }
    

    还是这个例子,h1就是被选择的元素。这里的元素都是HTML中已有的,例如h2、p等。
    4.2 按类或ID选择元素
    类或ID,就是给“块”(div、article等)起个名字,以此来标识它。类,允许多个块标识为同一个类,而ID,是唯一专属的,不允许重复。推荐使用类(class)。

    HTML中的内容:

    	<article id="gaudi" class="architect">
    		...
    	</article>
    
    	<article  class="architect">
    		...
    	</article>
    

    可以看到,有两个article,第一个有id也有class,第二个没有id,但和第一个拥有相同的class。

    下面是CSS的内容:

    /* 类 */
    .architect{
    	color: red;
    }
    /* ID */
    #gaudi{
    	color: green;
    }
    

    可以看到,类的选择器由一个点(.)和类名组成,ID的选择器由一个井号(#)和ID名组成。
    4.3 其他选择
    上面的两种选择器较常用,这里列举一些特殊的、不常用的。
    (1)按上下文选择元素
    (2)选择第一个或最后一个子元素
    (3)选择元素的第一个字母或者第一行
    (4)按状态选择链接元素
    (5)按属性选择元素
    以上内容比较杂,就不一一介绍了,具体内容参考人民邮电出版社的《HTML5与CSS3基础教程》的第9章。

    展开全文
  • css语法结构

    2020-09-25 10:44:07
    css的语法结构仅仅有三部分组成:选择符(Selector)、属性(property)、和值(value)。
  • CSS基本结构

    千次阅读 2019-11-01 17:54:56
    CSS基本结构演示: 效果: css 背景色分三种方式表达 1,关键字颜色:颜色的英文名称,如rad,green,blue等 2,十六进制颜色:规定为#RR(红)GG(绿)BB(蓝)。所有值必须介于0~FF之间。 3,RGB颜色:规定为...

    一,
    CSS样式由属性和值两部分组成,通过冒号的方式进行链接。多组CSS样式之间用分号进行分割。一般在分号后边加一个空格,易于阅读代码。
    CSS基本结构演示:
    在这里插入图片描述
    效果:
    在这里插入图片描述
    css 背景色分三种方式表达
    1,关键字颜色:颜色的英文名称,如rad,green,blue等
    在这里插入图片描述
    在这里插入图片描述2,十六进制颜色:规定为#RR(红)GG(绿)BB(蓝)。所有值必须介于0~FF之间。
    在这里插入图片描述
    在这里插入图片描述
    3,RGB颜色:规定为rgb(rad),(green),(blue)。每个参数定义颜色的强度,介于0~255之间。
    在这里插入图片描述
    在这里插入图片描述
    二,
    背景样式
    1,background-color
    用来设置背景颜色
    2,background-image
    用来设置背景图片
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • css的基本语法结构是什么 CSS的基本语法 (Basic Syntax of CSS) So let's have our first look at Cascading Style Sheets. As you probably already know, all programing languages have their own syntax, and ...
  • jsp网站的css结构

    2010-07-06 00:27:08
    在jsp中经常用到css结构,使用 css结构布局网站,会使网站变得更加清晰,更统一维护
  • 主要介绍了纯css实现树形结构的示例代码的相关资料,使用CSS和HTML就可以将一个多级无序列表的节点展现成树状结构,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 本章讲解的内容为 CSS 伪类 。 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 一: 什么是 CSS 伪类? 1. CSS 伪类是用来添加一些 '选择器' 的特殊效果(特殊状态)...
  • css实现树形结构

    千次阅读 2017-12-27 14:24:45
    css实现属性结构 **css实现属性结构的思路是利用伪类实现树形结构连接线,如果想实现点击展开和收 缩以及复选框效果还得配合js来实现。其实展开和收缩就是一个点击元素其子元素隐藏 和显示的切换。** 效果图 html...
  • CSS族谱树形结构

    2019-04-19 11:12:41
    CSS打造的家谱树形结构,可用于HTML5/PHP/WEB开发等。支持无限级扩展。支持二次开发,可以修改为自己需要的样式。
  • 一款炫酷的CSS3 SVG线性原子结构动态图动画特效,挺好看的线性流动动画效果。
  • CSS3选择器--结构性伪类选择器

    万次阅读 多人点赞 2017-01-01 21:51:20
    在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素: 1、伪类选择器:CSS中已经定义好的选择器,不能随便取名   常用的伪类选择器是使用在a元素上的几种,如a:link|a:visited|a:hover|a:...
  • 一款简单的vue和CSS3绘制DNA螺旋结构分子粒子动画特效,注:有些浏览器不兼容,看不到正常效果。
  • CSS通过与(X)HTML的文档结构相对应的选择器(selector)来达到控制页面表现的目的,而文档结构不仅仅在CSS的应用上非常重要,对于行为层(例如使用JavaScript控制元素的行为)同样也非常重要。 文档结构(X)HTML文档...
  • 马上要开始研究新版本的 zTree 结构了,所以要先把现在的情况再多分析一下,做了 v3.x 版本后也一直没有制作 css 的文档,特在此进行整理一下,一边讲结构,一边说说小技巧,希望能给大家一些帮助。 zTree 的 css ...
  • 您正在学习WEB标准CSS网页布局吗?是不是还不能完全掌握纯CSS布局?通常有两种需要您特别注意: 第一种... 在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义、结构添加CSS。这篇文章将
  • 网页制作Webjx文章简介:CSS通过与(X)HTML的文档结构相对应的选择器(selector)来达到控制页面表现的目的,而文档结构不仅仅在CSS的应用上非常重要,对于行为层(例如使用JavaScript控制元素的行为)同样也非常重要...
  • 主要介绍了CSS结构与层叠以及格式化,是学习CSS布局的基础知识,需要的朋友可以参考下
  • CSS语法结构

    千次阅读 2018-07-12 10:45:59
    CSS语法结构CSS中文译为层叠样式表。是用于控制网页样式并允许,将样式信息与网页内容分离的一种标记性语言。通俗的讲就是告诉浏览器,这段样式将应用到哪个对象.基本语法规范参数说明:属性和属性值之间用冒号(:)隔...
  • 常用的DIV+CSS的基本框架结构但不推荐都放一个div里
  • HTML之CSS样式结构

    千次阅读 2017-12-19 14:36:49
    HTML之CSS样式结构
  • css3自适应浏览器图片布局特效是一款纯css3绘制的人员关系拓展图,公司关系拓展图表实例特效。
  • CSS3原子结构模型动画特效是一款css3基于transform和animation属性绘制原子结构图动态效果代码。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 376,402
精华内容 150,560
关键字:

css结构