CSS选择器--普通选择器

Css概要与选择器，刻度单位

目录一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素三.特殊性(优先级) 3.2.计算特殊性值四.刻度 4.1.绝对长度单位 4.2.文本相对长度单位 4.3.Web App与Rem 五.示例与帮助下载 web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,J…

CSS基础及选择器

CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部样式 <style type="text/css"> div { color:red; } </style> 3.外部样式 <link rel="stylesheet" type="text/css" href=&quo…

css伪类选择器及伪元素选择器

1.类选择器在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定义好的选择器. 最常见的伪类选择器 a:link{ color: #ff6600 } /* 未被访问的链接 */ a:visited{ color: #87b291 } /* 已被访问的链接 */ a:hover{ color: #6535b2 } /* 鼠标指针移动到链接上 */ a:active…

CSS伪类选择器

一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链接 a:hover {color: #FF00FF} 鼠标移动到链接上a:active {color: #0000FF} 选定的链接在<body></body>内<a href=”链接地址”>链接内容文字</a>伪类选择器还可以与css类选择器配合使用a.re…

Lining.js - 为CSS提供 ::nth-Line 选择器功能

在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际上这期选择器在某些情况下是非常有用的,Lining.js 提供了这样的功能. 在线演示插件下载您可能感兴趣的相关文章网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发…

CSS学习笔记——选择器

选择器当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某些元素,而我们的规定的这些元素的规则就叫做选择器. 常用的选择器: 1.id选择器 #idname 2.类选择器 .classname 3.标签选择器 tagname 4.交叉选择器 tagname.classname tagname#idname 5.群组选择器多个选择器用“,”隔开 6.后代选择器(包含选择器) 父级和子级用空格隔开 7.通用选择器 * {} CSS选择器优先级示意图所谓的优先级,指的就是哪条样式规则会最…

css伪元素选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪类</title><style> /* 伪元素选择器: 伪元素的效果是需要通过添加一个实际的元素才能达到的. CSS中有如下四种伪元素选择器: · :first-line:为某个元素的第一行文字使用样式: · :first-letter:为某个元素…

CSS 子元素选择器与后代选择器区别实例讲解

css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与后代选择器的基本语法语法子元素选择器的语法如下: div>ul{color:red:} 子元素选择器使用大于号">"做为连接符,子元素选择器只能选择作为某元素子元素的元素后代选择器的语法如下: h1 em{color:red;} 后代选择器可以选择作为某元素后代的元素,父…

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容复习之前的知识点 02演示VS创建元素 03div和span区别通过display属性进行DIV与Span之间的转换.div->span 设置display:inline span->div 设置display:block <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont…

CSS的总结(选择器,伪类等...)

关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS三种常用选择器 CSS三种扩展选择器 CSS的常见操作 CSS概述 CSS (Cascading Style Sheet)是层叠样式表.作用来定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. CSS的优点 1:CSS可以更加精细的控制网页的内容形式.比如说前面的f…

关于CSS伪类选择器

#CSS伪类选择器 ##使用css伪类选择器需要注意的使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始读取的,也就是说,类似 p:first-child 这样的伪类选择器,指的是“某元素的以p元素作为第一子项的那项”,而不是“p元素的第一个子项”. 原因是因为,其实这里在p:之前,省略了 xxx & nbsp; 这几个字符,导致很容易产生误解. e.g. div p:first-child{colo…

CSS之后代选择器与多类选择器

<新人报到,欢迎拍砖#- -> 一.后代选择器说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子元素选择器 ----CSS 相邻兄弟选择器那么问题来了,什么时候需要用到后代选择器嘞?假设你需要为p元素中的span元素(.A类)设置特殊样式,可以用后代选择器选择该元素: /*方式1*/p span{...}/*方式2*/p .A{...} 注意,上述代码的两个选择器间以空格空格空格分隔.另外,后代选择器…

CSS 选择器之基本选择器属性选择器伪类选择器

CSS 选择器常见的选择器列表图 CSS选择器笔记基本选择器通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持. id选择器(#ID) 多元素选择器(E,F) 后代选择器(E F) 子元素选择器(E>F) IE6不支持子元素选择器. 子元素选择器,匹配所有E元素的子元素F 相邻元素选择器(E + F) 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F…

CSS样式与选择器

CSS构造块的样式: 1. h1{color:red;background-color:yellow} 其中:h1是选择器,花括号内是声明部分.多个声明之间用分号隔开. 2.为样式规则添加注释:/*...*/.注意不能将一个注释嵌套在另一注释中.如:/*这样做/*是不对的*/因为嵌套在外层注释内*/.注释可以放在样式规则内部.如:img{border:4px solid red;/*margin-right:12px;*/} ,浏览器会显示的只有border样式,因为margin-right…

CSS学习之选择器

html是盖房子,css是将房子装扮的更漂亮一些!CSS(Cascading Style Sheets),值层叠样式表. 语法选择器 { 属性 : 属性值 ; } 比如, p{color:red;} css选择器,用于选择需要添加样式的元素,可以分为标签选择器.class选择器.id选择器.属性选择器.伪类.伪元素选择器.组合选择器等等(本文主要说这几个选择器). 标签选择器 p{color:#f00;} h1{font-size:20px;} 标签选择器即是html的元素标签直接作为css选…

jQuery的hover方法搭配css的hover选择器，实现选中元素突出显示

问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果,一开始,表格透明度不变. 当我鼠标移动到第二排第三个单元格,其他单元格降低透明度. 解决办法一开始,我用的是CSS实现方法,是下面这样 #table td{ opacity:0.5; } #table td:hover{ opacity:1; } 不过这样一开始进去的时候表格透明度就是0.5,看起…

css的各种选择器

一.基本选择器 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #footer id选择器,匹配所有id属性等于footer的元素二.多元素的组合选择器 5. E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔 6. E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 7. E > F 子元素选择器,匹配所有E元素的子元素F…

CSS样式之选择器

一.CSS选择器构成 CSS选择器是你想要改变样式的html元素,通俗的说,选择器可以改变html文件中标签的属性,这些属性可以是颜色,背景图,字体等.每个选择器有一条或多条声明,可以同时改变某个标签的一个或多个属性,每个属性和它的值用冒号分开,不同属性之间用分号隔开. h1{ font-family: "楷体"; color: red; } 在上述例子中,h1是选择器,也是html文件中的元素或标签:color.font-family是属性:red."楷体"是值.…

学习笔记之CSS样式（选择器背景字体边框绝/相对、固定位置and分层流等）

<!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-Typ…

CSS系列------选择器和选择器的优先级

1.1.基本选择器通配符选择器(*) 通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: *#intro {font-weight:bold;}//也可以省略通配符 #intro{font-weight:bold;} //两种方式是一样的. 不同于其他选择器,id选择器有以下特点规范: 同一个id,在一个网页中只能标注一个元素. 如果有同名id ,则在CSS中用ID选择器时,依旧会匹配所…

CSS中的选择器之类选择器和id选择器

1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代选择器) 简单来说,选择器就是在css中创建,而在网页页面(html,jsp,php,asp.net)中使用选择器的名称命名规范: 一般使用中划线形式:xxx-yyy,一般是小写字母 2.类选择器基本语法: .类选择器名称{ CSS属性:属性值; CSS属性:属性值; } 一般来说,类选择器是提…

前端基础-CSS的各种选择器的特点以及CSS的三大特性

一. 基本选择器二. 后代选择器.子元素选择器三. 兄弟选择器四. 交集选择器与并集选择器五. 序列选择器六. 属性选择器七. 伪类选择器八. 伪元素选择器九. CSS三大特性一. 基本选择器 1.id选择器 #1.作用: 根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性 #2.格式 id名称 { 属性:值; } #3.注意点: 1.在企业开发中如果仅仅只是为了设置样式,通常不会使用id,在前端开发中id通常是留给js使用的 2.每个标签都可以设置唯一一个…

学习总结：CSS(一)定义方式、选择器、选择器权重

一.CSS的定义方式 1.内部样式:<style></style> 2.行间样式:<div style="width:100px;height:100px;"> 3.外部样式:<link rel="stylesheet" type="text/css" href="地址" > 注:浏览器异步加载html.css.js文件二.CSS选择器 1.常用选择器:类选择器.id选择器.标…

5.22 css和基本选择器

1,css的三种引入方式 1,行内样式 2,内接样式 3,外接样式:链接式和导入式. HTML的缺陷: 不能够适应多种设备要求浏览器必须智能化足够庞大数据和显示没有分开功能不够强大 CSS 优点: 使数据和显示分开降低网络流量使整个网站视觉效果一致使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css 行内样式 1 <div> 2 <p style="color: green">我是一个段落</p> 3 </div&…

表单、框架结构的大概、CSS开头（选择器以及常用属性）

<link rel="shortcut icon" href="favicon.ico(路径)" type="image/x-icon"> 表单fieldset legend定义表单元素的标题 from(供用户输入的表单) <from action="后台名" method="post/get" enctype="multipa…

css一些特殊选择器

css一些特殊选择器1.在box中,从第几个div开始选择,以后的都会选择到,以下代码表示从#box里面的第二个div开始选择:#box div:nth-of-type(n+2){}2.选择奇数个:div>p:nth-of-type(odd){}3.选择偶数个:div>p:nth-of-type(even){}4.选择多少倍数的子级元素:div>p:nth-child(3n){} 4.从最后一个开始数:div>p:nth-last-child(1){} 5.除开第一个:div>…

css之标签选择器

标签(空格分隔): 标签选择器选择器定义: 在一个HTML页面中会有很多很多的元素,不同的元素可能会有不同的样式,某些元素又需要设置相同的样式,选择器就是用来从HTML页面中查找特定元素的,找到元素之后就可以为它们设置样式了.选择器为样式规则指定一个作用范围. 基础选择器包含: 1.标签选择器 2.类选择器 3.ID选择器 4.通用选择器标签选择器: 顾名思义通过标签名来选择元素: 例如: p { color: red; } 将所有的p标签设置字体颜色为红色. 如下代码: <!DOCTYPE…

CSS的六大选择器

选择器:选择器是一种模式,用于选择需要添加样式的元素. 首先简述六大选择器基本选择器标签选择器类选择器 ID选择器高级选择器层次选择器结构伪类选择器属性选择器其中基本选择器与层次选择器较为常用. 一.基本选择器 1.标签选择器使用HTML标签来设置标签内的图文样式. 2.类选择器使用class属性定义标签类值,指定某一类属性值来定义其样式. <h1 class=”classname”></h1> .classname{font-size:18px;} 3.I…

CSS基础和选择器

什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里. css的优势 1.内容与表现分离 2.网页的表现统一,容易修改 3.丰富的样式,使页面布局更加灵活 4.减少网页的代码量,增加网页浏览器速度,节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录 CSS语法 CSS基础语法 CSS语法可以分为两部分: 选择器声明声…

CSS选择器，选择器的优先级

CSS选择器 CSS基本语法选择器 + 声明块选择器 - 通过CSS选择器选中页面中的指定元素,下面会重点写. 声明块 - 选择器后面跟着的是声明块,使用{}括起来,由一个个声明组成,声明由名值对组成,每一个声明使用:结尾. 常用选择器 1.元素选择器语法:标签名{} eg:p{} //为所有的p元素设置样式. 2.ID选择器语法:#id{} //id值唯一,不能重复 ed: #box{} //为id为box的元素设置样式. 3.类选择器语法:.class{} eg: .box{} /…

【CSS选择器--普通选择器】的更多相关文章