css选择器介绍
1.选择器
1.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 单位介绍
px 像素 em 1em = 一个文字的大小
1.3 颜色的表示方式
用英文单词直接设置颜色 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.4 类选择器
语法: .自定义类名{属性:值}
举例:
<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.5 id选择器
id选择器的形式上是一个英文井号（#）后面紧跟一个id名。
id名是在标签上通过id属性而设定。我们可以自己设定id名。
如下所示：
<style>
#p1{color: red; font-size: 18px; width: 500px; }
</style>
<p id="p1"> 这是一个信息化的时代</p>
特别注意：
一个网页中的id不能 “重名”（但class名可以重复）。
1.6 通配符选择器
通配符选择器非常简单，就一个星号(*)，表示“所有标签”, 该选择器会将页面上的所有标签都选中。
*{ 属性:值 }
表示所有标签都应用该css样式的设定。
1.7 关系选择器
关系选择器是通过元素之间的“位置关系的特征”来确定所选元素。
子代选择器：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标签。
后代选择器：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标签.
相邻选择器：S1+S2
匹配S1后面紧挨着的同级（兄弟）元素S2。
兄弟选择器：S1~S2
匹配S1后面的所有同级（兄弟）元素S2。
1.8 属性选择器
属性选择器是通过元素的属性的特征信息来确定所选元素。
[attr]
匹配具有所给定属性名称的标签。
其中attr是一个“示意性符号”，表示“属性名”。
比如：
[style] { background: yellow; } //能选中具有color属性的所有标签。
[class] { border: 1px solid red; } //能选中具有width属性的所有标签。
[attr="val"]
匹配具有某个属性且属性值为给定值的标签。
比如：
[color="red"] { background: yellow; } //能选中具有color属性且值为”red”的所有标签。
[width="100"] { border: 1px solid red; } //能选中具有width属性且值为”100”的所有标签。
<hr color="red" /> <table width="100" >....</table>
[attr~="val"]
匹配具有某个属性且属性值包含所给定单词的标签。
注意：
1，必须是一个“单词”形式，比如属性值为”a dog”，则使用”dog”可以匹配，而使用”do”不能匹配。
2，对于中文，除非有明确的空格，否则一句连续的句子（含中文标点符号）也只能算一个单词。
<p title="a dog">...</p>
[title~="dog"]
{ .... } //可以选中上面那个p标签
[title~="do"]
{ ..... } //选不上。。。
[attr*="val"]
匹配具有某个属性且属性值包含给定的字符的标签。只要包含该字符就可以,不一定要是完整的词.
[attr^="val"]
匹配具有某个属性且属性值以给定的字符开头的标签。
[attr$="val"]
匹配具有某个属性且属性值以给定的字符结尾的标签。
1.9 伪类选择器
伪类选择器是通过单冒号（：）和特定的具有某种含义的单词来确定所选元素。
所谓伪类选择器，是相对于“类选择器”来说的，对比如下：
类选择器：
说明：类的名称是由我们程序员来设定的，符合命名规范就行。
形式：.类名称{ ... }
伪类选择器：
说明：伪类的名称是css标准中所预先设定的，我们不能自己设定。可用的伪类名不多。
形式：:伪类名称{ ... }
:link, :visited, :hover, :active,
这4个伪类主要用于表示一个链接（也就是a标签）的4种不同状态。
它们可以设定一个链接在不同状态下的外观表现（样式表现）。
:link ——表示一个链接初始时候的状态。
:visited ——表示一个链接在访问（点击）过之后的状态。
:hover ——表示一个链接在“鼠标移上去”（鼠标悬停）的时候的状态。
:active ——表示一个链接在“活动状态”的时候的状态，通常就是点击的瞬间（按住不放能看到）。
注意：
1，:hover可以用于其它标签，并且经常用！
2，对于a链接的这4个状态，他们有顺序问题，必须按上述顺序才有合理效果（lvha，Lv哈）
E:focus
表示一个元素在成为可输入状态（获得焦点）的时候，主要用于表单元素。
其中“E”表示某个元素（或某个选择器所选中的元素）。
这样连着写，即表示该元素在获得焦点的时候，其样式表现如何。后面的“E”也都是这个意思。
也可以不用前面写“E”，而是直接用“:focus”，但实际应用中，一般会在前面有这个限定。
比如：
input:focus{ .... } //表示input元素在获得焦点的时候
也可以不用input，如下所示：
:focus{ .... }
但此时其实所选择的范围扩大了（不仅仅针对input元素）。
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标签
注意：
上述也可以单用（不要冒号前面的部分），但一般较少这样用。
E:empty，E:checked，E:enabled，E:disabled
E:empty
——匹配元素内部为空（没有内容）的元素。
“内容”指的是一个标签内是否有其他html代码或文字。显然，单标签内是不可能有内容的。
E:checked
——匹配被选中的元素（用于input且type为radio或checkbox的时候）
E:enabled
——匹配“可用的/有效的元素”（用于表单元素）。
E:disabled
——匹配“不可用的/有效的元素”（用于表单元素）。
2. 伪元素选择器
伪元素选择器是通过双冒号（：：）和特定的具有某种含义的单词来确定所选元素。
伪元素选择器通常是“本没有这个元素（标签）”，但会创建出一个隐性元素并对其进行样式设定。
伪元素选择器又称为“伪对象选择器”。
E::before
表示在元素E的内部的最前面创建一个元素（伪元素）。
其中必须写上一个属性：content:”内容”; //当然，内容可以为空。
E::after
表示在元素E的内部的最后面创建一个元素（伪元素）。
其中必须写上一个属性：content:”内容”; //当然，内容可以为空。
表示将元素E中“选中的文字”单独作为一个元素（伪元素）。
E::first-letter
表示元素E中的“第一个字符”可以单独作为一个元素（伪元素）。
E::first-line
表示元素E中的“第一行”可以单独作为一个元素（伪元素）。
常见选择器的组合
E.className
举例：
div.c1{ .... }
p.cc2{ .... }
注意：他们是“紧挨在一起的”！ 否则就成为了后代选择器了。
E#id
div#id1{ ... }
p#id2{ ... }
E[属性选择器]
[src] //找所有有src属性的标签
img[src] //找img标签并且有src属性
img[src*="dog"] 找img标签并且有src属性并且属性中包含“dog”这个字符！
并集选择器：S1, S2
两个选择器，可以使用一个英文逗号（,）连接起来。
表示这两个选择器，都使用同样一个样式设定（属性设定）。
比如：
p, div{ ... }
#price, .addr{ ... }
p.cc, .cc, div .cc2{ ... }
更复杂的选择器组合举例
#main .container div { .... }
#main .box>p[align="center"] { .... }
table#m2 div .box2 p:nth-child(2) { .... }
div#m1 .box1 div input[type='text']:focus { .... }
css的层叠特性
1.1 层叠性
所谓层叠性，是指对同一元素同一属性的设定，后设定的某个样式（属性），会覆盖之前设定的样式。
比如：
.cc1{ color: red;}
.cc1{color: blue;}
<div class=”cc1”>文字内容</div>
则class为cc1的元素中的文字颜色就是blue，即后者覆盖了前者的设定。
分两种情况：
１，两个相同的选择器，设置了同样的属性，后者覆盖前者——层叠性体现之一。
２，两个不同但同级优先性的选择器，设置了同样的属性，也是后者覆盖前者——体现之二。
1.2 继承性
所谓继承性，是指对某个元素所设定的样式，不但影响该元素本身，还可能影响该元素的后代元素。
比如：
.cc1{color:red;}
<div class=”cc1”>
文字1
<p>文字2</p>
</div>
则此时文字1和文字2实际都是红色。
注意：
实际上继承性不是普遍情况，而只是少数一些属性才具有继承性（即能够影响后代元素）。
应用中继承性通常用在有关文字的属性上。
1.3 优先性
所谓优先级，就是指一个标签的显示效果（样式表现），可能受若干个因素的影响，但哪一个因素的影响大，则最终效果就按该因素的设定，也就是“更优先”的意思。
比如：
#pro{ font-size: 20px; }
.ppp{ font-size: 18px; }
<div id=”pro” class=”ppp”> 小米Note 4 </div>
则此时该文字的大小实际是20px。
那，优先级怎么定的？
结论如下：
伪元素选择器 > !important > 行内样式 > id选择器 > 类选择器（或伪类选择器） > 元素选择器 > * > 继承样式 > 浏览器默认样式
其中，伪元素选择器又有： ::first-letter > ::selection > ::first-line
上述黄色背景部分在实际应用中最常见。
什么是“!important”?
就是在一个属性的设定中，在属性值后面加“!important”标识，然后在加分号（;），例如：
.c1{ color: red!important; }
#d1{ color: yellow; }
此时，如果上述两个选择器都能选中某一个元素，则其中的文字就是红色（!important优先了）
选择器的优先级怎么计算？
对于复合选择器（比如div.c1， 或 #id1>.c2， 或#id2>.c3 p span，等等），又该怎么确定他们的优先级呢？
首先，根据上述的基本优先级原则，遵循“官大一级压死人”的规则。
比如：
选择器1： #id1{.....}
选择器2： .c1>.c2>p{....}
则选择器1优先；
其次，如果具有同级的优先级，则比谁的数量多。
比如：
选择器1： .cc1 .cc3 {.....}，
选择器2： .cc1 .cc2 .cc3 {....}
则选择器2优先；
最后，综合上述两条规则就可以判断出哪个是优先的。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
