网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

CSS3中的常用选择器-创新互联

选择器

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名申请、网页空间、营销软件、网站建设、太湖网站维护、网站推广。

    属性选择器:  img[src="p_w_picpaths/2.jpg"]

          开头匹配:  a[href ^="page/"]

          结尾匹配:  a[href $="2.html"]

          任意匹配:  a[href *="2"]   只要这个属性中出现"2", 就匹配.

          分组匹配:  div[data-haha ~="box"]    data-haha 中有 "box" 这个属性, 就匹配.

          短横匹配:  div[data-haha |= "box"]   data-haha 中有 "box-" 开头的字符, 就匹配.

          有属性匹配:  div[alt]   div 有 alt 这个属性, 就匹配.

    以上选择器都兼容到 IE7, 并且不仅限于标签开头, 为了好区分就加上标签, 并且可连续使用:

          div[alt][src^="p_w_picpaths"][src*="2"]  有alt属性, src 属性值开头为 p_w_picpaths, src 中存在 "2",匹配.

JQ 也能使用这类选择器但不能有引号, 且兼容 IE6.

--------------------------------------------------------------------------------------------------------

    序选择器:

          p:only-child  这个元素为父级唯一的子级元素.

          p:first-child  若父级盒子第一个元素为p, 则作用, 而不是所有的 p 元素排队的第一个(IE7).

          p:last-child  若父级盒子最后一个元素为p, 则作用, 而不是所有的 p 元素排队的最后一个(IE9).

          JQ 中也能用, 且 $("p :first") 是所有 p 元素的第一个, 兼容 IE6.

          P:nth-child(n)  作用于所有盒子中的第 n 个 元素且为 p 元素(从1开始), 要选择偶数参数写 2n, 奇数 2n+1, 可自行调整(IE9).

          JQ 中, $("p:eq(2)") 选择所有第三个的p,吹哨. $("p:nth-child(3)") 不吹哨.

           所谓的吹哨就是把一个页面中所有的这个元素都叫出来大排队...

          p:first-of-type: 作用于父级盒子的第一个为 p 的元素(IE9).

          p:last-of-type: 作用于父级盒子的最后一个为 p 的元素(IE9).

          p:nth-of-type(n): 作用于父级盒子的正数第 n 个, 2n为偶数, 2n+1为奇数(IE9).

          p: nth-last-of-type(n): 作用于父级盒子的正数第 n 个, 2n为偶数, 2n+1为奇数(IE9).

          JQ 也支持这类选择器, 兼容 IE6. 以上的 p 都可以换为基础选择器

--------------------------------------------------------------------------------------------------------

    节点选择器

          儿子选择器: div>p 选中 div 子级节点中的 p 元素(IE7).

          下一个兄弟选择器: h4+p 选中 h4 后面的为 P 的兄弟元素(IE7), $("div").nextSibling("p").fadeIn() 等价于 $("div+p").fadeIn(), 但操作机理完全不同.

          后面所有兄弟: h5~p 选中 h5 后兄弟元素中所有的 P 元素(IE7). JQ 中 $("div").nextAll("p").fadeIn() 等价于 $("div~p").fadeIn(), 但操作机理完全不同.

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


当前名称:CSS3中的常用选择器-创新互联
文章起源:http://bjjierui.cn/article/csiscg.html

其他资讯