CSS 3 选择器

时间:2023-01-06 21:33:19

css3叫做样式表  对页面的布局,字体,颜色,背景和其他效果做更精确的布置

支持的浏览器有 chrome safari firfox opera 甚至360都开始支持360用的是别的内核 IE10 之后也开始支持
不通过的浏览器需要不同的前缀 表示浏览器尚未成为w3c标准的一部分是浏览器的私有属性,虽然现在较新的浏览器都不需要前缀,但是为拉更好的向前兼容前缀还是少不了的
CSS 3  选择器

引入,  link标签引入  在html中style标签内嵌    在body的标签中直接内联

属性选择器

div标签中属性为id的结尾有x的值 全部被选中

CSS 3  选择器

所有div标签中带有id属性的,属性值中包含box的,全部被选中

CSS 3  选择器

所有div标签中带有id属性的, 属性值中以box为开头的全部被选中

CSS 3  选择器

所有div标签中带有id属性的, 属性值必须等于box

CSS 3  选择器

结构性选择器

匹配文档的根元素,一般都是指的html

CSS 3  选择器

相邻兄弟选择器,向下查找同级的第一个span标签

CSS 3  选择器

:first-child第一个子元素

CSS 3  选择器

:last-child最后一个子元素

CSS 3  选择器

选取列表中的奇数偶数个

CSS 3  选择器

div向下所有兄弟标签为span的必须是同级

CSS 3  选择器

li中第5个子元素   冒号前面不能有空格

CSS 3  选择器

选择倍数 4*n+1  是5的倍数

CSS 3  选择器

否定伪类选择器  除啦id=box以外的其他的  全部选中

CSS 3  选择器

匹配没有任何元的的

CSS 3  选择器

:first-of-type:相同类型中的第一个li元素

:last-of-type相同类型中的最后一个li元素
:only-of-type唯一一个同级兄弟元素
:nth-of-type(n)第几个

CSS 3  选择器

UI选择器

很少一部分浏览器支持
 用鼠标选中的部分进行改变

CSS 3  选择器

用户界面上处于禁用状态的,不可以点击和选中的

CSS 3  选择器

匹配用户页面状态上可用的状态,可以点击选中和输入的

CSS 3  选择器

伪对象选择器

部分选择器的兼容性还不是很完善
前缀兼容:浏览器自身能支持才行, 部分属性和选择器浏览器就不支持加前缀也没有效果

1,不加前缀 用双冒号单冒号都行

2,-moz-火狐中加前缀可以使用

3,欧朋不支持,加前缀也不支持-O-

CSS 3  选择器

CSS 3  选择器

总结

CSS 3  选择器

CSS 3  选择器