css选择器

做项目遇到了一个css的问题,想记录一下,然后开通了思否
一、常用的
1、.classname
2、#id
3、*
4、标签选择器 {div} 、 {span}等 ,选择了页面全部的div、span等
二、进阶的
1、{ div, p,span}同时选择选择所有的div、p、span
2、{div p}选择所有的 div里面 (不包含div)的所有的p标签,不论是不是子一级还是子n级
3、{div>p}选择所有父级元素为div的所有的p标签,不会发生穿透的现象只会在父元素与子一级之间
4、{div+p}选择div元素后面出现的第一个p标签。出现效果的只有第一个P标签

<div>一个div</div>
<p>z这是在div后面的</p>
<p>这是在div后面的</p>

5、{div:hover 、div>p:hover}“:”之前是选择的标签,”hover“是关键字,当鼠标放上去的时候,样式会被触发,否则就是选择的标签原来的样式。hover也可以接一些选择器,让其只作用于选择的内容。(hover简单的理解为就是选择器上面的选择器中间的一个关键词,然后有鼠标进入与离开事件)
6、{关键词: focus}一般作用于input或者textarea的文本输入框中,当点击的进入的时候触发样式
7、{关键字:first-letter}作用于选择元素的第一个文字
8、{关键字:first-line}作用于选择元素的第一行内容
9、{关键字:first-child}选择的是前面选择元素的第一个所有的元素
10、{关键字:before}在选择的元素前面加上内容,使用的时候必须设置content属性。
好吧 暂时这样,继续写项目
11、
12、

相关推荐