选择器
选择器是css里面很重要的一点
合理选择适合的选择器 可以使我们的样式赋予更精准 更加直观明了便于修改
今天我只说选择器
1、属性选择器
旧时我们使用css时，想要选择一个id为xxx的元素我们会使用[id=xxx]这样来进行选择 而如今的css添加了几个属性选择器(书上说通配符概念，我更想把它们形容成正则选择器) 1/[att=val] 2/[att=val] 3/[att^=val] 4/[att$=val] 与正则十分地相似 从第二个开始讲(第一个以前存在的) 正则的不就代表有包含吗 那么[att=val]意思就是:例子->[id=css]那么将选择id=cssx id=cssl id=3css的元素 att*=val代表是如果元素用att表示的属性值中包含val指定的字符 元素就可以使用该样式 att^=val att$=val也是一直的 前者是代表 att表示的属性 值中开头为val的字符 元素可以使用该样式 后者也是一样的
2、结构性选择器以及伪元素
由于比较地多。那么这就只提一些一部分讲
伪元素选择器有四个：
1/first-line 2/first-letter 3/before 4/after
first-letter:用来操作某个元素里面的首字母或者首中文 这一个属性可以用来做首字符下沉等工作 before after伪类可以在某个元素的前面或者后面添加插入一些内容 而它们更有趣的一个用途在于插入一个占位符那么你可以对这个占位符添加一些css样式达到一些可爱好玩的css绘画！ 而这些选择器在旧时已然出现
结构性选择器：
1/root选择器 2/not选择器 3/empty选择器 4/target选择器
讲root选择器 这个选择器可以让很多刚使用不久网页的人知道。其实文档根元素并不是body元素 :root{background-color:red;}body{background-color:green;} (题外话 如果只给body设置背景颜色 那么body就会渲染页面背景颜色 而不是body是网页的根元素)
选择器:
1/first-child 2/last-child 3/nth-child 4/nth-last-child
first-child last-child顾名思义 选取指定父元素下子元素的第一个跟最后一个 nth-child(n) nth-last-child(n)相当于first-child last-child是它的一个子集 针对父元素的第n个子元素 n还可以是odd even 表示的是奇数偶数 这里的含义是指当前父元素下子元素的第N个元素为你所选取的元素才会被选择 eg:h2:nth-child(od){background-color:green;}那么选择的是h2父元素下的子元素的奇数个元素为h2背景才会变成绿色 遇到这种情况 nth-child(odd)就将会束手无策 所以引出了nth-of-type(odd) nth-last-of-type(odd) 指定选取指定相同元素的！！！ nth-child(n) n还可以使用an+b 其中a为有多少种样式 b 为第几种样式 如果有两种循环样式 那么至少有nth-child(2n+1) nth-child(2n+2)
还有一个结构性伪类是only-child用来替代只有一个元素的时候需要使用nth-child(1):nth-last-child(1)
元素伪类选择器
E:hover E:active E:focus E:enabled E:disabled E:read-only E:read-write E:checked E:default E:indeterminate E:visited E:link E::selection E:invaild E:vaild E:required E:optional E:in-range E:out-of-range
非常非常多的选择器 这里挑几个讲 :hover是元素 当鼠标移动到元素时设置应用什么样式 :focus 是当元素获得光标焦点时候设置应用样式 :checked 是选择radio或者checkbox被选择 :visited 是选择已被访问过的连接 :enabled 选择处于可用状态的 这里的部分伪类选择器很像javascript的事件有木有=-= 大概就是这些了 注意还有一些简单的例如div >p| div,p| div p|之类的用得更是很多
不管黑猫白猫能抓到老鼠的就是好猫 所以不要追求新颖 能完成需求的就可以了
希望看到这篇文章的人能有所收获！~虽然我也知道我写的很乱 谢谢你看的东西
还走在路上 加油
2016年9月13日19:57:08