css参考手册:css.doyoe.com

在css3中,不同的浏览器可能需要不同的前缀,它表示该css属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的

-webkit 代表chrome、safari私有属性

-moz 代表firefox浏览器私有属性

-ms 代表IE浏览器私有属性

-o 代表opera浏览器私有属性

css语法结构

css语法由三部分构成:选择符、属性、值

Selector{Property:Value;}

↓          ↓          ↓

选择符      属性       值

css的三种引入方式

1、内嵌样式
2、内部样式表
3、外部样式表

三种引入方式的优先级别(就近原则)

内嵌样式 > 内部样式表 > 外部样式表

但!important能改变它们的优先级别

<p class="content" style="color:red;">把我变成蓝色的字体</p>
<style>
    .content{ color: blue !important;}
</style>

css代码注释
以 /* 开始,*/ 结束

通配选择符

*号表示所有对象,所谓通配选择符,就是指可以使用模糊指定的方式来对对象进行选择,指定样式

*{ margin:0; padding:0;}

元素选择符

所谓元素选择符,指以网页中已有的标签名作为名称的选择符

body{ background:#fff;}
h1{ color:#000;}
p{ color:#ccc;}

群组选择符

除了可以对单个标签进行样式指定外,还可以对一组标签进行相同的样式定义

使用逗号对选择符进行分隔,对页面中需要使用相同样式的地方,只需写一次样式

h1,h2,h3,p{
  font-size:12px;
  font-family:arial;
}

关系选择符

包含选择符(E F)选择所有被E元素包含的F元素

子选择符(E>F)选择所有作为E元素的子元素F

相邻选择符(E+F)选择紧贴在E元素之后F元素

兄弟选择符(E~F)选择E元素所有兄弟元素F

<div>
<a>背景色是#E61061</a>
<span><a>背景色是#67B374</a></span>
</div>
<p>背景色是#0000FF</p>
<p>背景色是#808080</p>
<p>背景色是#808080</p>

<style type="text/css">
div>a{ background:#E61061; }
span a{ background:#67B374; }
p~p{ background:#808080; }
div+p{ background:#0000FF; }
</style>

id及class选择符

id选择器以"#"来定义,id选择器可以为标有特定id的html元素指定特定的样式,每个id名称中只能使用一次,不得重复

类选择器以"."来定义,与id不同,class允许重复使用,比如页面中的多个元素,都可以使用同一个样式定义

<p id="p1">这是一个段落</p>
#p1{
font-size:12px;
font-weight:bold;
}

<p class="p2">这是一个段落</p>
.p2 {
font-size:12px;
font-weight:bold;
}

伪类选择符

E:link 设置超链接a在未被访问前的样式

E:visited 设置超链接a在其链接地址已被访问过时的样式

E:hover 设置元素在其鼠标悬停时的样式

E:active 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式

注意,hover必须位于link和visited之后,active必须位于hover之后

可靠的顺序是:(link)(visited)(hover)(active)

<a href="#">点我</a>
<style>
    a{text-decoration: none; font-size: 50px;}
    a:link{color: black;}
    a:visited{color: #ccc;}
    a:hover{color: red;}
    a:active{color: blue;}
</style>

E:focus 设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式

<input type="text">
<style>
    input:focus{ outline: 1px solid red; border:none; }
</style>

E:first-child 匹配父元素的第一个子元素E

E:last-child 匹配父元素的最后一个子元素E

E:only-child 匹配父元素仅有的一个子元素E

E:nth-child(n) 匹配父元素的第n个子元素E

E:nth-last-child(n) 匹配父元素的倒数第n个子元素E

E:first-of-type 匹配同类型中的第一个同级兄弟元素E

E:last-of-type 匹配同类型中的最后一个同级兄弟元素E

E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E

E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E

E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E

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

a:first-child是.test下的第一个结构标签,而且是a标签,不是则不起效果

a:first-of-type不需要是第一个子元素只需要.test下的a标签的第一个即可

<ul id="list">
<li>这是第1项列表</li>
<li>这是第2项列表</li>
<li>这是第3项列表</li>
<li>这是第4项列表</li>
<li>这是第5项列表</li>
</ul>
<style>
#list li{ border-bottom: 1px solid #ccc; }
#list li:first-child{ font-weight: bold; }
#list li:last-child{ border-bottom: none; }
#list li:nth-child(2){ color: red; }
#list li:nth-last-child(2){ color: blue; }
</style>

E:checked 匹配用户界面上处于选中状态的元素E(用于input type为radio与checkbox时)

E:default 指定当前页面打开时默认处于选取状态的单选框或复选框控件的样式

E:indeterminate 指定当页面打开时一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式

<input type="radio" name="num">1
<input type="radio" name="num">2
<input type="radio" name="num">3
<style>
    input:checked{ width: 30px; height: 30px; }
</style>

E:lang(fr) 匹配使用特殊语言的元素E。很少用

E:not(s) 匹配不含有s选择符的元素E

E:root 匹配E元素在文档的根元素。常指html元素

E:empty 匹配没有任何子元素(包括text节点)的元素E

E:enabled 匹配用户界面上处于可用状态的元素E

E:disabled 匹配用户界面上处于禁用状态的元素E

E:target 匹配相关URL指向的元素E

<a href="#nav1" id="nav1">导航一</a>
<a href="#nav2" id="nav2">导航二</a>
<a href="#nav3" id="nav3">导航三</a>
<style>
    a{ text-decoration: none; }
    a:target{ color: red; }
</style>

属性选择符

E[att] 选择具有att属性的E元素

E[att="val"] 选择具有att属性且属性值等于val的E元素

E[att~="val"] 选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素

E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素

E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素

E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素

E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素

<p class="a">测试数据1</p>
<p class="qq">测试数据2</p>
<p class="xyz abc">测试数据3</p>
<p class="aa123">测试数据4</p>
<p class="test-abc">测试数据5</p>
<p class="hello-z-world">测试数据6</p>
<p class="y-1">测试数据7</p>
<p class="y-2">测试数据7</p>
<style>
p[class]{color:green;}
p[class="qq"]{color:red;}
p[class~="abc"]{color:blue;}
p[class^="aa"]{color:yellow;}
p[class$="abc"]{color:black;}
p[class*="z"]{color:orange;}
p[class|="y"]{color:#ccc;}
</style>

伪对象选择符

E:first-letter/E::first-letter 设置对象内的第一个字符的样式

E:first-line/E::first-line 设置对象内的第一行的样式

E:before/E::before 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

E:after/E::after 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

E::placeholder 设置对象文字占位符的样式

E::selection 设置对象被选择时的颜色

E:invalid 当元素内容不能通过html5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素规定的格式时的样式

E:valid 当元素内容通过html5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素规定的格式时的样式

<input type="text" required>
<style>
    input[type="text"]:invalid{
        background: pink;
    }
    input[type="text"]:valid{
        background: white;
    }
</style>

css 选择符的更多相关文章

  1. 30个你必须记住的CSS选择符

    所以你学会了基础的id,类和后代选择符,然后你就一直用它们了吗?如果是这样,你丢失了(css的)巨大的灵活性.在本文中提到的很多选择器属于CSS3规范的一部分,因此,只有在现代浏览器中才可使用. 1. ...

  2. CSS选择符详解

    一.类型选择符 什么是类型选择符?指以网页中已有的标签类型作为名称的行径符.body是网页中的一个标签类型,div,p,span都是. 如下: body {} div {} p {} span {} ...

  3. 编写高效的CSS选择符(节选)

    最右边优先 css选择符是从右向左进行匹配的. 样式系统从最右边的选择符开始向左匹配规则.只要当前的选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和匹配的元素,或者因为不匹配而退出. ...

  4. JQuery学习笔记【CSS选择符】--02

    Jquery的程序入口: <html> <head> <title></title> <script type="text/javasc ...

  5. CSS选择符详解之关系选择符篇

    原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...

  6. 整理CSS选择符

    1.星号选择器 ;; } 星号选择器将匹配页面里的每一个元素.很多开发者使用这个技巧将外边距和内边距重置为零.虽然在快速测试时这确实很好用,但我建议你永远不要再生产代码中使用它.它给浏览器带来大量不必 ...

  7. [css选择器]总结:IE6不支持的CSS选择符

    转载地址:https://www.wenjiwu.com/doc/zvsbii.html.此文最后也给出了原文地址,但是我点击过去发现是什么赌博彩票的地址,360也弹出小心的提示,所以这里只给出了我转 ...

  8. css选择符权重

    css选择符权重 目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表 选择器 权重 内联样式 1000 ID 0100 CLASS 0010 属 ...

  9. CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) ...

  10. CSS选择符——分门别类

    CSS选择符--分门别类 有时候,老是会对一些CSS选择器模模糊糊,傻傻分不清.今天花了点时间整理了一下,感觉世界清静了不少. 用XMIND做出了思维导图: 主要有11中选择器:元素.类ID.后代.子 ...

随机推荐

  1. bzoj 1406: [AHOI2007]密码箱 二次剩餘

    1406: [AHOI2007]密码箱 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 701  Solved: 396[Submit][Status] D ...

  2. 【技术贴】解决xp下Microsoft.SqlServer.Management.PSProvider.dll

    解决 安装SQLserver2008时有出错信息,提示:Configuration error description: 无法获得 C:\Program Files\Microsoft SQL Ser ...

  3. rm加转义很危险

    rm -r 想转义一个空格字符,转得不对 -r, -R, --recursive 递归删除目录及其内容 连续rm了n个不想rm的文件夹.%>_<% 想起来以前有人也因为rm的失误把整个wo ...

  4. 直接将视频文件原码流转换成YUV,输出到屏幕显示

    #include "stdafx.h" #define inline _inline#ifndef INT64_C#define INT64_C(c) (c ## LL)#defi ...

  5. Keil C51程序调试过程

    用Keil C51编写程序时,经常需要调试,如果不是经常用这个软件的话,很容易忘记这些调试步骤,现在举一个例子“验证延迟函数delay()使其延迟的时间为500ms”说明. 源程序写完后,就可以调试了 ...

  6. 创建range分区

    drop table T_PM_ACCT_DTL_AF_TEST; create table T_PM_ACCT_DTL_AF_TEST  (    DATA_DATE     date,    AC ...

  7. 小细节:Java中split()中的特殊分隔符 小数点

    这两天做项目过程中由于数据表字段设计的太恶心了,导致自己填坑 关于微信支付和支付宝的支付有一个不同点:就是金额的处理,支付宝金额的单位是0.01元,但是微信支付中1表示0.01元,当时设计价格的时候使 ...

  8. 游戏开发设计模式之状态模式 & 有限状态机 & c#委托事件(unity3d 示例实现)

    命令模式:游戏开发设计模式之命令模式(unity3d 示例实现) 对象池模式:游戏开发设计模式之对象池模式(unity3d 示例实现) 原型模式:游戏开发设计模式之原型模式 & unity3d ...

  9. 使用AppDelegate单例,解决子视图无法给父视图发送消息的问题

    关于单例模式,我会在实验过后再开一个博客重点讲单例的使用,这里只是介绍我在PhotoForBingyan的照片滤镜的项目中使用AppDelegate单例的情况. 碰到的问题: 由于这个项目是个多视图的 ...

  10. arm 及ndk编译

        首页  »   Android android的armeabi跟armeabi-v7a 网友分享于:2014-03-16  浏览:867次 android的armeabi和armeabi-v7 ...