【[CSS3] 学习笔记-CSS选择器】的更多相关文章

[CSS3] 学习笔记-CSS选择器

CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{},a{} 2.选择器分组:h1,h2{}.*{} 3.类选择器允许以一种独立于文档元素的方式来指定样式:.class{}: 可以结合元素选择器:a.class{}: 多类选择器:.class.class{} 4.ID选择器与类选择器相似,不过也有一些重要差别,例如:#id{} ID选择器与类选择器的…

css权威指南学习笔记 —— css选择器

1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的儿子,而不是孙子曾孙子.就是儿子,只有一代关系. b:相邻兄弟选择器: h1 +p h1 和 p 必须拥有相同的父元素.他们是同胞.样式作用在 p 上面.(与h1相邻的p元素). 2,伪类和为元素 a : 平时也市场在用,尤其是a连接的几个伪类.伪类的顺序非常的重要:link-visited-focus-…

前端学习笔记——CSS选择器

学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选择器.class选择器.标签选择器 /*id选择器*/ /* #代表通过id选择器查找*/ #i1{ height: 48px; background-color: red; } /* class选择器 最常用 */ /*. 代表通过class选择器查找*/ .div{ height: 48px;…

HTML 学习笔记 CSS(选择器3)

CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有href属性的锚应用样式 a[herf] {color: red} 例子3还可以根据多个属性进行选择 只需将属性选择器链接在一起就可以 a[href][title] {color:red} 例子4 可以采用一些创造性的方法来使用这个特性 例如,可以对所有带有 alt 属性的图像应用样式,从而突出显示…

HTML 学习笔记 CSS(选择器)

CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 html {color:black;} h1 {color:blue;} h2 {color:silver;} 可以将某一个样式从一个元素切换到另一个元素. 假设您决定将上面的段落文本(而不是h1元素)设置成灰色 只需要把h1改成p html {color:black;} p {color:gray;…

HTML 学习笔记 CSS(选择器4)

CSS 后代选择器 后代选择器(descendant selector)又称为包含选择器.后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用.举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写: h1 em {color:red;} 上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色.其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:…

HTML 学习笔记 CSS(选择器2)

CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 该选择器可以单独使用 也可以和其他元素结合使用 提示 只要适当的标记文档后 才能使用这些选择器 所以使用这两种选择器 通常要做一些构想和计划 要考虑样式而不是考虑具体设计的元素 最常用的方法就是使用类选择器 修改HTML代码 在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作.为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值.…

[CSS3] 学习笔记-CSS动画特效

在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换,我们能够对元素进行移动.缩放.转动.拉伸或拉长:可以通过2D.3D元素来转换: 2D转换方法: translate().rotate().scale().skew().matrix() 3D转换方法: rotateX() rotateY() <!doctype html> <html>…

[CSS3] 学习笔记-CSS定位

页面的设计需要通过摆放不同的模块在不同的位置,这个时候需要使用到定位和浮动的知识点,CSS3定位功能是很强大的,利用它你可以做出各种各样的网络布局. 1.CSS定位 1)定位机制 普通流:元素按照其在HTML中的位置顺序觉得排布的过程 浮动 绝对布局 2)定位属性 positon.top.left.right.bottom.overflow(设置元素溢出区域发生的事情).clip(设置元素显示的形状).vertical-align(设置元素垂直对齐的方式).z-index(设置元素的堆叠顺序)…

[CSS3] 学习笔记-CSS入门基本知识

1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14px;} 属性大于1个之后,属性之间用分号隔开:如果大于1个单词,需要加上引号:p{font-family:"sans serif";} 2)CSS高级语法 选择器分组:h1,h2,h3,h4,h5,h6{color:red;} 继承:body{ color:green; } 例子: &l…