您的位置：首页 > Web前端 > CSS

前端笔记七，级联样式单与CSS选择器(二)

2016-01-26 17:14 591 查看

只插入部分元素：
在:after，:before前使用更严格的CSS选择器

配合quotes属性执行插入
首先定义quotes,然后再指定content使用open-quote或者close-quote

配合counter-increment属性添加编号
该属性指定的字符就是计算器名称，然后通过counter属性引用计数器即可

使用自定义编号：通过counter(name,list-style-type)实现
其中，list-style-type:
decimal:阿拉伯数字，默认值。
disc:实心圆
circle:空心圆
lower-roman:小写罗马数字
upper-roman:大写罗马数字
lower-alpha:小写英文字母
upper-alpha:大写英文字母
none:不使用项目符号
cjk-ideographic:浅白的表意数字,汉字一二三
georgian:传统的乔治数字
lower-greek:基本的希腊小写字母
hebrew:传统的希伯来数字
hiragana:日文平假名字符
hiragana-iroha:日文平假名序号
katagana:日文片假名字符
katagana-iroha:日文片假名序号
lower-latin:小写拉丁字母
upper-latin:大写拉丁字母

添加多级编号：
定义多个编号计数器，然后为不同的选择器插入不同的计数器即可
在设置二级编号时，使用counter-reset来自动重置指定的计数器

结构性伪类选择器
Selector:root：匹配文档的根元素，在html文档中，跟元素永远是<html>元素
Selector:first-child：父元素的第一个Selector子元素
Selector:last-child：父元素中最后一个Selector子元素
Selector:nth-child(n)：父元素中第n个Selector子元素，当n为odd/event时，表示第奇数/偶数个
Selector:nth-last-child(n)：父元素中倒数第n个Selector子元素，当n为odd/event时，表示第奇数/偶数个，n也可以为“3n+1”表示倒数第3n+1个子节点(1,4,7...)
Selector:only-child：是其父元素的唯一子元素的Selector
Selector:first-of-type：其父元素中匹配Selector的第一个元素
Selector:last-of-type：其父元素中匹配Selector的最后一个元素
Selector:nth-of-type(n)：其父元素中匹配Selector的第n个元素
Selector:nth-last-of-type(n)：其父元素中匹配Selector的倒数第n个元素
Selector:only-of-type：其父元素中唯一一个元素
Selector:empty：内部没有任何子元素的Selector，Selector省略时表示对所有的空元素

UI元素状态伪类选择器
Selector:link：未被访问的Selector元素，通常Selector只能是超链接元素
Selector:visited：已经被访问过的Selector元素，通常Selector只能是超链接元素
Selector:active：鼠标在点击与释放之间的Selector元素
Selector:hover：鼠标处于悬停状态的Selector元素
Selector:focus：得到焦点的Selector元素
Selector:enable：处于可用状态的Selector元素
Selector:disable：处于不可用状态的Selector元素
Selector:checked：处于选中状态的Selector元素
Selector:default：页面打开时处于选中状态的Selector元素
Selector:read-only：处于制度状态的Selector元素
Selector:read-write:处于读写状态的Selector元素
Selector::selection：Selector元素中当前被选中的内容
其中:default指的是哪个状态没搞明白

浏览器专属属性，加前缀
-ms-：对应Internet Explore浏览器
-moz-：对应Gecko引擎的浏览器，如Firefox浏览器
-o-：对应Opera浏览器
-webkit-：对应基于Webkit引擎的浏览器，如Chrome,Safari浏览器

特殊伪类选择器
Selector:target：匹配符合Selector选择器且必须是命名锚点目标的元素
Selector1:not(Selector2)：符合Selector1但不符合Selector2的元素

在脚本中修改显示样式，步骤：
1、获取到需要设置CSS样式的目标元素，例如可以使用getElementById(‘')
2、修改目标元素的CSS样式，常用方法有两种：
①修改内联CSS属性值，例如：obj.style.属性名 = 属性值
②修改HTML元素的class属性值，例如：obj.className = class 选择器

动态增加立体效果：
左、上边框的颜色稍浅，右、下边框颜色稍深，即为立体效果（使用Javascrpt对class进行更改）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航