##CSS选择器
-
子代选择器
——子代,什么是子代,就是一个父亲的孩子例如<div> <p> </p> <p> </p></div>
这个p就是div的子代,div就是p的子代,子代可以一个也可以多个。 -
后代选择器
——利用前边子代选择器来看后代选择器,那就是<div><ul><li></ul></ul></div>
这个CSS代码里的li就是div的后代,ul是div的子级元素。 -
交集选择器
——满足条件1,又满足条件2。
当两种或两种以上的选择器同时存在一个标签上时,这种情况就叫做交集选择器。
选择器1选择器2{ 声明;}
标签选择器与标签选择器 ×
ID选择器与ID选择器 ×
类选择器与类选择器 √
标签选择器与类选择器 √
标签选择器一定要写在类选择器的前面。
交集选择器是可以连续交集的。
兼容性问题:IE7以下的IE浏览器不支持连续交集。 -
并集选择器
——并集选择器的 格式:选择器1,选择器2{声明; }
当有多个选择器,使用相同的样式,这个时候我们就可以使用并集选择器。 -
伪类选择器
—— 伪类:同一个标签,根据不同的状态,拥有不同的样式。
选择器:伪类名{声明;}
静态伪类:只能用于超链接
:link 超链接点击之前。
:visited 超链接访问之后。
动态伪类:针对所有的标签都适用。
:hover 鼠标放在标签上。
:active 鼠标点击标签时。鼠标不松手,松手样式就没了。
:focus 标签获得焦点(输入框)。
a标签书写顺序 link visited hover active lvha 顺序。
爱恨准则:love hate
a{}和a:link{}之间的区别:
1.a{}定义的样式作用于所有的超链接(包括锚点)
2.a:link{}定义的样式作用于非锚点的超链接。
-
序选择器
—— 序选择器:按照顺序来进行选择。
对于父标签来说,它如果是第一个子元素,就会被选中。
选择器:first-child 第一个 last-child 最后一个IE8开始兼容。 IE7.6不可以使用。
选中ul中第一个li列表.class .class:last-child{ color: red; }
对于父标签来说,它如果是第一个子元素,就会被选中。
选择器div p选择器 first-child 选择器 -
下一个兄弟选择器
——表示下一个兄弟
格式:选择器1+选择器2{声明; }
选择器1选中的标签后面紧挨着的必须是选择器2选中的标签才可以被选中。
兼容问题:IE7开始兼容。
8. 表单
——作用:搜集不同类型的用户输入信息。
表单:就是网页上可以给用户提供输入和选择的一些控件。
表单元素:
元素:在html中,从开始标签到结束标签中所有的代码。
内容
表单元素:不同类型的ipnut元素(文本框,输入框)复选框 ,单选按钮,文本域等。格式:
表单元素。action:表单把数据提交到哪里。一个路径。
input 会根据type的值不同会在网页中显示为不同的控件。
type:
text 输入框 value 会生成默认的值。
password 密码框
radio 单选按钮
如果不设置name属性,浏览器就不知道哪些单选按钮是一组,就无法完成单选效果。
给同一组单选按钮设置一致的name属性值,才会有单选效果。
name:当form提交的时候,有name属性的表单元素,value值会被传输到form提交的地址。
- 继承
.—— 有一些属性给祖先元素设置后,其后代元素会自动继承该样式,这就叫做继承。
文本样式会被后代元素继承。 color,text-开头,line-开头,font-开头。
盒子,定位,背景,浮动。这些不会被继承。
-
important
—— important 作用:将当前属性的权重提高到无穷大。
继承过来的important属性的权重是0.
错误写法:
color: blue ;!important
color: blue important;慎用。
如果使用不当,页面样式会崩溃。 -
test
——E n
E的父元素的第n个子元素如果是e,则会被选中。
选择器:nth-child(){ }
n:0-,1,2....
*/
/* li:nth-child(2n+1){
color: red;
} */
.demo span:first-of-type {
color: #f00;
}
- 层叠
——多个选择器都选中了同一个标签,而且都设置了相同的属性样式的时候。
—权重问题。
权重的计算:数基础选择器的数量。
id选择器>类选择器>标签选择器
继承来的样式,权重为0.
先数ID选择器的数量,再数类选择器的数量,标签选择器的数量。
权重一样的时候,写在后面的会覆盖前面的。
行内式>内嵌式+外链式(就近原则)
如果没有选择器选中元素,它会去继承父类的样式。
多个类名都设置了冲突的样式时,跟class属性值的顺序无关,跟样式表的先后顺序有关。
并集选择器:分开计算权重。