光标类型 选择器总结

光标类型

设置鼠标光标在元素上显示的样式

cursor

default  默认值，通常是箭头
pointer  小手效果，提示用户可以点击
text    工字型，提示用户可以选择文字
move   十字光标，提示用户可以移动

边框圆角

让盒子四个角变得圆润

border-radius: 数字+px/百分比；

overflow溢出部分显示效果

溢出部分：盒子内容部分 所超出盒子范围的区域

场景：控制内容溢出部分的显示效果: 如：显示，隐藏，滚动条... overflow

visible  默认值，溢出部分可见
hidden   溢出部分隐藏
scroll   无论是否溢出，都显示滚动条
auto    根据是否溢出，自动显示或隐藏滚动条

元素本身隐藏

让元素本身在屏幕中不可见， 鼠标：hover之后元素隐藏

visibility:hidden   隐藏元素本身，在网页中占位置
display:none        隐藏元素本身，在网页中不占位置 

开发中经常使用display属性完成元素的显示隐藏

display:none（隐藏） display：block(显示)

属性选择器

通过元素上的HTML属性来选择元素，常用于选择input标签

E[attr]  选择具有attr属性的E元素
E[attr="val"]  选择具有attr属性并且属性值等于val的E元素

 

选择器

基本选择器：
   通配符选择器  *
   元素选择器    p{}
   id选择器     #id值{}
   类选择器      .class值{}
复合选择器
   后代选择器   .main p{}
   子代选择器   .main>p{}
   群集选择器   body,html{}
   交集选择器   li.active{}  从li标签中选择class="active"   <li class="active"></li>
伪类选择器  用于超链接时要注意顺序：  LVHA
   :link
   :visited
   :hover
   :active
   ：focus  选中元素获取焦点时状态 用于表单控件
   ：nth-child(n)
   :nth-of-type(n)
伪元素选择器
   ::before
   ::after
属性选择器
  E[attr]
  E[attr="Val"]