来谈谈：CSS挑选器年夜全
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性网页制造poluoluo文章简介：css1-css3供应十分丰厚的选择器，可是因为某些选择器被各个扫瞄器撑持的情形纷歧样，以是良多选择器在实践css开辟中很罕用到。
比来在研讨jQuery的选择器，人人晓得jQuery的选择器和css的选择器十分类似，以是收拾一下css选择器；
css1-css3供应十分丰厚的选择器，可是因为某些选择器被各个扫瞄器撑持的情形纷歧样，以是良多选择器在实践css开辟中很罕用到。
1.基本的选择器
选择器
寄义
示例
*
通用元素选择器，婚配任何元素
*{margin:0;padding:0;}
E
标签选择器，婚配一切利用E标签的元素
p{font-size:2em;}
.info和E.info
class选择器，婚配一切class属性中包括info的元素
.info{background:#ff0;}
p.info{background:#ff0;}
#info和E#info
id选择器，婚配一切id属性即是footer的元素
#info{background:#ff0;}
p#info{background:#ff0;}
2.组合选择器
选择器寄义
示例
E,F
多元素选择器，同时婚配一切E元素或F元素，E和F之间用逗号分开
Div,p{color:#f00;}
EF
儿女元素选择器，婚配一切属于E元素儿女的F元素，E和F之间用空格分开
#navli{display:inline;}
lia{font-weight:bold;}
E>F
子元素选择器，婚配一切E元素的子元素F
div>strong{color:#f00;}
E+F
毗连元素选择器，婚配一切紧随E元素以后的同级元素F
p+p{color:#f00;}
3.CSS2.1属性选择器
选择器寄义
示例
E
婚配一切具有att属性的E元素，不思索它的值。（注重：E在此处能够省略，好比“”。以下同。）
p{color:#f00;}
E
婚配一切att属性即是“val”的E元素
div{color:#f00;}
E
婚配一切att属性具有多个空格分开的值、个中一个值即是“val”的E元素
td{color:#f00;}
E
婚配一切att属性具有多个连字号分开（hyphen-separated）的值、个中一个值以“val”开首的E元素，次要用于lang属性，好比“en”、“en-us”、“en-gb”等等
p{color:#f00;}
注：CSS2.1属性选择器另有一个特性就是利用多个选择器，同事满意这多个选择器：blockquote{color:#f00;}
4.CSS2.1中的伪类
选择器寄义
示例
E:first-child
婚配父元素的第一个子元素
p:first-child{font-style:italic;}
input:focus{color:#000;background:#ffe;}
input:focus:hover{background:#fff;}
q:lang(sv){quotes:“201D”“201D”“2019″“2019″;}
E:link
婚配一切未被点击的链接
E:visited
婚配一切已被点击的链接
E:active
婚配鼠标已其上按下、还没有开释的E元素
E:hover
婚配鼠标悬停其上的E元素
E:focus
婚配取得以后核心的E元素
E:lang(c)
婚配lang属性即是c的E元素
5.CSS2.1中的伪元素
选择器寄义
示例
E:first-line
婚配E元素的第一行
p:first-line{font-weight:bold;color;#600;}
.preamble:first-letter{font-size:1.5em;font-weight:bold;}
.cbb:before{content:”";display:block;height:17px;width:18px;background:url(top.png)no-repeat00;margin:000-18px;}
a:link:after{content:”(”attr(href)“)“;}
E:first-letter
婚配E元素的第一个字母
E:before
在E元素之前拔出天生的内容
E:after
在E元素以后拔出天生的内容
6.CSS3的同级元素通用选择器
选择器
寄义
示例
E~F
婚配任安在E元素以后的同级F元素
p~ul{background:#ff0;}
7．CSS3属性选择器
选择器寄义
示例
E
属性att的值以”val”开首的元素
div{background:#ff0;}
E
属性att的值以”val”开头的元素
E
属性att的值包括”val”字符串的元素
8.CSS3中与用户界面有关的伪类
选择器寄义
示例
E:enabled
婚配表单中激活的元素
input:disabled{background:#ddd;}
E:disabled
婚配表单中禁用的元素
E:checked
婚配表单中被选中的radio（单选框）或checkbox（复选框）元素
E::selection
婚配用户以后选中的元素
9.CSS3中的布局性伪类
选择器寄义
示例
E:root
婚配文档的根元素，关于HTML文档，就是HTML元素
p:nth-child(3){color:#f00;}
p:nth-child(odd){color:#f00;}
p:nth-child(even){color:#f00;}
p:nth-child(3n+0){color:#f00;}
p:nth-child(3n){color:#f00;}
tr:nth-child(2n+11){background:#ff0;}
tr:nth-last-child(2){background:#ff0;}
p:last-child{background:#ff0;}
p:only-child{background:#ff0;}
p:empty{background:#ff0;}
E:nth-child(n)
婚配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)
婚配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)
与:nth-child()感化相似，可是仅婚配利用同种标签的元素
E:nth-last-of-type(n)
与:nth-last-child()感化相似，可是仅婚配利用同种标签的元素
E:last-child
婚配父元素的最初一个子元素，同等于:nth-last-child(1)
E:first-of-type
婚配父元素下利用同种标签的第一个子元素，同等于:nth-of-type(1)
E:last-of-type
婚配父元素下利用同种标签的最初一个子元素，同等于:nth-last-of-type(1)
E:only-child
婚配父元素下唯一的一个子元素，同等于:first-child:last-child或:nth-child(1):nth-last-child(1)
E:only-of-type
婚配父元素下利用同种标签的独一一个子元素，同等于:first-of-type:last-of-type或:nth-of-type(1):nth-last-of-type(1)
E:empty
婚配一个不包括任何子元素的元素，注重，文本节点也被看做子元素
10.CSS3的反选伪类
选择器寄义
示例
E:not(s)
婚配不切合以后选择器的任何元素
:not(p){border:1pxsolid#ccc;}
11.CSS3中的:target伪类
选择器寄义
E:target
婚配文档中特定”id”点击后的效果
目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素. Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
页:
[1]