1.2 选择器
1.2.1 标签选择器
html 标签名 {属性:值;}
常用的属性:
color 前景色(文字颜色)
background-color 背景色
font-size 设置文字大小
width 设置宽度
height 设置高度
text-align:left|right|center 设置内容对齐方式(内容,图片)
text-indent 设置首行缩进
//举例:
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color:green;
font-size: 25px;
background-color: pink;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div>
css学习css学习css学习css学习
</div>
</body>
</html> 1.2.1.1 单位介绍
px 像素
em 1em = 一个文字的大小 1.2.1.2 颜色的表示方式
- 用英文单词直接设置颜色 red、green、pink......
- 16进制表示 #0-f
background-color: #D82F92; color: #0F0000; - 使用三原色表示 rgb
将一个颜色，使用红（R，red）， 绿（G，green）， 蓝（B，blue）来表示。 这3个叫做“基本颜色”，都按0-255分为256个层级。 形式：rgb(红的配比， 绿的配比，蓝的配比）； 举例:background-color:rgb(23,25,65); - 使用rgba , 实现半透明效果
A代表“透明度”，值从0到1的小数。0表示全透明。1表示不透明，此时就是RGB颜色 形式：rgba(红的配比， 绿的配比，蓝的配比，透明度）； background-color: rgba(25,5,35,0.5); - 使用opacity实现半透明
background-color: #D82F92; opacity:0.3; //取值:0~1 注意:opacity会影响其中的文字也变化
1.2.2 类选择器
语法: .自定义类名{属性:值}
举例:
<style>
.red{ color:red; } //类样式的定义
</style>
...
<body>
<p class="red">文字颜色变红</p> //调用类样式
</body> 注意:
- 一个类样式可以被多个标签同时调用
<p class="red">..红色..</p> <p class="red">..黄色..</p> <p class="red">..绿色..</p> - 一个标签可以同时调用多个类样式
<p class="red public back">....</p>
类选择器的命名规范
- 起名的时候尽量起一些有意义的名字 , 最好在之前添加注释 , 以便自己查阅
- 不能使用纯数字或者以数字开头定义类名
- 不能使用特殊字符或者以特殊字符开头定义类名, 如:% $ & @
- 不推荐使用汉字定义类名
- 不推荐使用标签名定义类名
1.2.3 id选择器
id选择器的形式上是一个英文井号（#）后面紧跟一个id名。
id名是在标签上通过id属性而设定。我们可以自己设定id名。
如下所示：
<style>
#p1{color: red; font-size: 18px; width: 500px; }
</style>
<p id="p1"> 这是一个信息化的时代</p> 特别注意：
一个网页中的id不能 “重名”（但class名可以重复）。
1.2.4 通配符选择器
通配符选择器非常简单，就一个星号(*)，表示“所有标签”, 该选择器会将页面上的所有标签都选中。
*{ 属性:值 }
表示所有标签都应用该css样式的设定。
1.2.5 关系选择器
关系选择器是通过元素之间的“位置关系的特征”来确定所选元素。
1.2.5.1. 子代选择器：S1>S2
匹配S1中的下一级S2。下一级就是“子级”，或子代。
其中S1，S2都可以是独立使用的选择器（比如id选择器，class选择器，标签选择器等）。
比如 : S1为div， S2为p，即形式为"div > p"，就表示找出div中的所有子级p标签。
又比如：
#p1>a{ ... } ：表示找出id为p1的标签中的所有子代a标签。
.cc>p{ ... } ：表示找出class为cc的标签中的所有子代p标签。
#p2>.cc2>img{ ... } ：表示找出id为p2中的子代的class为cc2中的所有子代img标签。
1.2.5.2 后代选择器：S1 S2
匹配S1内部的所有后代S2。
此时就不仅仅局限于子代标签了，还包括孙代，曾孙代，等等。
简单说，就是找出放在S1所选中的标签中的所有S2所选中的标签。
比如：
div p{ ... } ：匹配div中的所有后代p标签，即凡是放在div中的p标签都会找出来。
#p1 a{ ... } ：匹配id为p1的标签中的所有a标签，即只要a标签在#p1中就可以。
.cc p{ ... } ：匹配class为cc的标签中的所有p标签，即只要p标签在.cc中就可以。
#p2 .cc2 img{ ... } ：匹配id为p2中的class为cc2中的所有img标签.
1.2.5.3 相邻选择器：S1+S2
匹配S1后面紧挨着的同级（兄弟）元素S2。
1.2.5.4 兄弟选择器：S1~S2
匹配S1后面的所有同级（兄弟）元素S2。
1.2.6 属性选择器
属性选择器是通过元素的属性的特征信息来确定所选元素。
1.2.6.1 [attr]
匹配具有所给定属性名称的标签。
其中attr是一个“示意性符号”，表示“属性名”。
比如：
[style] { background: yellow; } //能选中具有color属性的所有标签。
[class] { border: 1px solid red; } //能选中具有width属性的所有标签。
1.2.6.2 [attr="val"]
匹配具有某个属性且属性值为给定值的标签。
比如：
[color="red"] { background: yellow; } //能选中具有color属性且值为”red”的所有标签。
[width="100"] { border: 1px solid red; } //能选中具有width属性且值为”100”的所有标签。
<hr color="red" />
<table width="100" >....</table> 1.2.6.3 [attr~="val"]
匹配具有某个属性且属性值包含所给定单词的标签。
注意：
1，必须是一个“单词”形式，比如属性值为”a dog”，则使用”dog”可以匹配，而使用”do”不能匹配。
2，对于中文，除非有明确的空格，否则一句连续的句子（含中文标点符号）也只能算一个单词。
<p title="a dog">...</p>
[title~="dog"]{ .... } //可以选中上面那个p标签
[title~="do"]{ ..... } //选不上。。。
1.2.6.4 [attr*="val"]
匹配具有某个属性且属性值包含给定的字符的标签。只要包含该字符就可以,不一定要是完整的词.
1.2.6.5 [attr^="val"]
匹配具有某个属性且属性值以给定的字符开头的标签。
1.2.6.6 [attr$="val"]
匹配具有某个属性且属性值以给定的字符结尾的标签。
1.2.7 伪类选择器
伪类选择器是通过单冒号（：）和特定的具有某种含义的单词来确定所选元素。
所谓伪类选择器，是相对于“类选择器”来说的，对比如下：
类选择器：
说明：类的名称是由我们程序员来设定的，符合命名规范就行。
形式：.类名称{ ... }
伪类选择器：
说明：伪类的名称是css标准中所预先设定的，我们不能自己设定。可用的伪类名不多。
形式：:伪类名称{ ... }
1.2.7.1 :link, :visited, :hover, :active,
这4个伪类主要用于表示一个链接（也就是a标签）的4种不同状态。
它们可以设定一个链接在不同状态下的外观表现（样式表现）。
:link ——表示一个链接初始时候的状态。
:visited ——表示一个链接在访问（点击）过之后的状态。
:hover ——表示一个链接在“鼠标移上去”（鼠标悬停）的时候的状态。
:active ——表示一个链接在“活动状态”的时候的状态，通常就是点击的瞬间（按住不放能看到）。
注意：
1，:hover可以用于其它标签，并且经常用！
2，对于a链接的这4个状态，他们有顺序问题，必须按上述顺序才有合理效果（lvha，Lv哈）
1.2.7.1 E:focus
表示一个元素在成为可输入状态（获得焦点）的时候，主要用于表单元素。
其中“E”表示某个元素（或某个选择器所选中的元素）。
这样连着写，即表示该元素在获得焦点的时候，其样式表现如何。后面的“E”也都是这个意思。
也可以不用前面写“E”，而是直接用“:focus”，但实际应用中，一般会在前面有这个限定。
比如：
input:focus{ .... } //表示input元素在获得焦点的时候
也可以不用input，如下所示：
:focus{ .... }
但此时其实所选择的范围扩大了（不仅仅针对input元素）。
1.2.7.3 E:first-child, E:last-child, E:only-child, E:nth-child(n)
这几个伪类用于表示（或选中）“具有某种特征的子元素E”。
E:first-child ——匹配作为父元素的第一个子元素E。
E:last-child ——匹配作为父元素的最后一个子元素E。
E:only-child ——匹配作为父元素的唯一一个子元素E。
E:nth-child(n) ——匹配作为父元素的第n个子元素E。括号中的n是一个具体数字
还可以这样用：nth-child(2n+1）表示奇数项， nth-child(2n+2)表示偶数项
举例：
li:first-child{ ... } //表示作为第一个子元素的li标签
td:last-child{ ... } //表示作为最后一个子元素的td标签
p:only-child{ ... } //表示作为父元素中只有这一个子元素的p标签
li:nth-child(2){ ... } //表示作为第2个子元素的li标签
注意：
上述也可以单用（不要冒号前面的部分），但一般较少这样用。
1.2.7.4 E:empty，E:checked，E:enabled，E:disabled
E:empty
——匹配元素内部为空（没有内容）的元素。
“内容”指的是一个标签内是否有其他html代码或文字。显然，单标签内是不可能有内容的。
E:checked
——匹配被选中的元素（用于input且type为radio或checkbox的时候）
E:enabled
——匹配“可用的/有效的元素”（用于表单元素）。
E:disabled
——匹配“不可用的/有效的元素”（用于表单元素）。
1.2.8 伪元素选择器
伪元素选择器是通过双冒号（：：）和特定的具有某种含义的单词来确定所选元素。
伪元素选择器通常是“本没有这个元素（标签）”，但会创建出一个隐性元素并对其进行样式设定。
伪元素选择器又称为“伪对象选择器”。
1.2.8.1 E::before
表示在元素E的内部的最前面创建一个元素（伪元素）。
其中必须写上一个属性：content:”内容”; //当然，内容可以为空。
1.2.8.2 E::after
表示在元素E的内部的最后面创建一个元素（伪元素）。
其中必须写上一个属性：content:”内容”; //当然，内容可以为空。
表示将元素E中“选中的文字”单独作为一个元素（伪元素）。
1.2.8.3 E::first-letter
表示元素E中的“第一个字符”可以单独作为一个元素（伪元素）。
1.2.8.4 E::first-line
表示元素E中的“第一行”可以单独作为一个元素（伪元素）。
1.2.9 常见选择器的组合
1.2.9.1 E.className
举例：
div.c1{ .... }
p.cc2{ .... }
注意：他们是“紧挨在一起的”！ 否则就成为了后代选择器了。
1.2.9.2 E#id
div#id1{ ... }
p#id2{ ... }
1.2.9.3 E[属性选择器]
[src] //找所有有src属性的标签
img[src] //找img标签并且有src属性
img[src*="dog"] 找img标签并且有src属性并且属性中包含“dog”这个字符！
1.2.9.4 并集选择器：S1, S2
两个选择器，可以使用一个英文逗号（,）连接起来。
表示这两个选择器，都使用同样一个样式设定（属性设定）。
比如：
p, div{ ... }
#price, .addr{ ... }
p.cc, .cc, div .cc2{ ... }
1.2.9.5 更复杂的选择器组合举例
#main .container div { .... }
#main .box>p[align="center"] { .... }
table#m2 div .box2 p:nth-child(2) { .... }
div#m1 .box1 div input[type='text']:focus { .... }
![CSS3新增选择器——结构伪类选择器[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)