nanfengnan

/css基础/
HBuilder快捷键,
li3 按tab快速生成
div>ul>li
5 按tab快速生成
div+div 按tab生成连个div

ul>li{我要自卸王$}*5  按tap键

ee 颜色

重要:重置html默认样式很重要,有些好的reset.css,直接引入即可
css中以-moz,-ms,-webkit,-o开头的样式的含义
-moz代表baifirefox浏览器私有属性;
-ms代表IE浏览器私有属性;
-webkit代表chrome、safari私有属性;
-o代表Opera私有属性。
html标签是可以继承css属性的
1.选择器(选择符) 别的选择器都可以用基本选择器组合成
1.元素(基本)选择器:标签选择器,通用选择器 ,类选择器,id选择器, 优先级:id选择器>类选择器>标签选择器
标签选择器
标签名{}
id选择器
#id名{}
类选择器
.类名{}
通配符选择器
{} /选择所有元素 一般用来清除内外边距,便于统一管理和设置/
eg:
{
margin: 0px;
padding: 0px;
}
2.关系选择器:包含选择器(E F),子选择器(E>F),相邻选择器(E+F),兄弟选择器(E~F)
包含(后代选择器,嵌套选择器)选择器(E F):选择所有被E元素包含的F元素(就是选择E里面的所有F元素)
eg:ul li{background-color: red;}
子选择器(E>F):选择元素E下的子元素F 只能选择子元素,不能选择到孙子元素
eg:ul > li{background-color: red;}
相邻选择器(E+F):选择紧贴在E元素之后F元素,元素E与F必须同属一个父级。
相邻选择器和兄弟选择器的区别:相邻选择器只能选择一个紧紧相邻的同级别的元素,而兄弟选择器可以选择多个同级别的选择器
eg:li+li{background-color: red;}
兄弟选择器(E~F):选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级。
eg:li~li{background-color: red;}
3.属性选择器:
规定:att是css的属性,val是属性值
种类:
E[att]:选择具有att属性的E元素。
E[att=\'val\']:选择具有att属性且属性值只等于val的E元素,注意这样的不能选中 class="a b",这能选中class="a"这样的
E[att~=\'val\']:选择具有att属性且属性值为一用空格分隔的字词列表 eg:能选中这样的class="a b"
E[att^=\'val\']:选择具有att属性且属性值为以val开头的字符串的E元素。
eg:

abc

ac

div[class^=\'a\']{background-color: red;}选中字符串a开头的div
E[att\(=\'val\']:选择具有att属性且属性值为以val结尾的字符串的E元素 eg:<style> div[class\)="c"] { /
选择以c结尾的div标签
/
border: 2px solid #000;
}

1

2

3

E[att=\'val\']:选择具有att属性且属性值为包含val的字符串的E元素。
eg:
1

2

3

E[att|=\'val\']:如果元素E拥有att属性,并且值为val,或者值是以val-开头的,那么E将会被选择。
eg:
0

1

2

3

4.常用选择器:并集(分组选择器)选择器,交集选择器
并集选择器:E,F{} 同时选择E和F元素 E和F可以是基本选择器,用\',\'隔开,除了通配符选择器
eg:ul,p{background-color: red;}
交集选择器:EF{} 选择满足E和F条件的元素 E,F不可以用id选择器 E和F之间没有任何符号和空格
eg:.txt.ext{color: red;} /选择class="txt ext"的标签/
5.伪类选择器:CSS伪类是用来添加一些选择器的特殊效果。
伪类:元素不同状态表现不同样式 选择器使用":" 如:链接元素访问前和访问后是不同的样式
伪对象(伪元素):文档结构中没有的元素 选择器使用"::"
1.用于超链接的四个伪类选择器: E一般是a标签 E:link,E:visited,E:hover,E:active
超链接状态顺序 必须按顺序写:a:link {} a:visited {} a:hover {} a:active {}
注意:link和visited只能用于a标签
E

分类:

技术点:

相关文章: