zoukankan      html  css  js  c++  java
  • CSS3选择器

    基本选择器

    1、通配符选择器(*)—所有浏览器支持

    *{
        marigin: 0;
        padding: 0;
     }
    

    2、元素选择器(E) —所有浏览器支持
    3、类选择器(.className) —所有浏览器支持
    4、id选择器(#ID)—所有浏览器支持
    5、后代选择器(E F)—所有浏览器支持

    选择了E元素的所有后代F元素,中间是一个空格;

    6、子元素选择器(E>F)  —IE6不支持

    选择了E元素下的所有子元素
    7、相邻兄弟元素选择器(E + F)  —IE6不支持

    EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻;
    8、通用兄弟选择器(E 〜 F) —IE6不支持

    选择某元素后面的所有兄弟元素

    9、群组选择器(selector1,selector2,...,selectorN)—所有浏览器支持

    每个选择器之间使用逗号“,”隔开

    属性选择器   IE6不支持

    E[attr]:只使用属性名,但没有确定任何属性值; 
    E[attr="value"]:指定属性名,并指定了该属性的属性值;
    E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写;

    E[attr="value"]与E[attr~="value"]的区别:属性选择器中有波浪(〜)时属性值有value时就相匹配,没有波浪(〜)时属性值要完全是value时才匹配。

    E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
    E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
    E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
    E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);

    伪类选择器

    1、动态伪类  对于:hover在IE6下只有a元素支持,:active只有IE6-7不支持,:focus在IE6-7下不被支持。

    .demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/
    .demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
    .demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
    .demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
    

    注意先后顺序:爱恨原则LoVe/HAte,也就是Link--visited--hover--active;

    还有一个 :focus 用于元素成为焦点,这个经常用在表单元素上。

    2、UI元素状态伪类   IE6-8不支持

    ":enabled",":disabled",":checked"  主要是针对于HTML中的Form元素操作

    input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
    

    3、CSS3的:nth选择器  

    :first-child选择某个元素的第一个子元素;
    :last-child选择某个元素的最后一个子元素;
    :nth-child(n)选择某个元素的一个或多个特定的子元素;  IE6-8和FF3-浏览器不支持":nth-child"选择器。

    括号里的n可以是整数,表达式,关键词;

    整数:从1开始;如     :nth-child(3),选择某元素下的第三个子元素;

    表达式:如2n+1,n是从0开始; 这里的n只能是n,不能改成其他字母代替;

    关键词:odd,even;

    :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
    :nth-of-type()选择指定的元素;

    :nth-of-type类似于:nth-child;唯一不同的是这种指定了元素的类型而以;

    :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
    :first-of-type选择一个上级元素下的第一个同类子元素;

    :first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。
    :last-of-type选择一个上级元素的最后一个同类子元素;
    :only-child选择的元素是它的父元素的唯一一个了元素;

    ":only-child"表示的是一个元素是它的父元素的唯一一个子元素
    :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
    :empty选择的元素里面没有任何内容。

    :empty是用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格;

    3、否定选择器(:not) IE6-8浏览器不支持

    input:not([type="submit"]) {border: 1px solid red;}
    

    4、伪元素

    两个“::”和一个“:”css3中主要用来区分伪类和伪元素,到目前来说,这两种方式都是被接受的,也就是说不管使用哪种写法所起的作用都是一样的,只是一个书写格式不同而以。

    ::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式;

    ::first-letter选择文本块的第一个字母,除非在同一行里面包含一些其它元素,不过这个主要运用于段落排版上多,比如说首字下沉;

    ::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动;

    ::selection 用来改变浏览网页选中文的默认效果

    /*Webkit,Opera9.5+,Ie9+*/
       ::selection {
    	background: 颜色值;
    	color:颜色值;
       }
       /*Mozilla Firefox*/
       ::-moz-selection {
    	background: 颜色值;
    	color:颜色值;
        }
    

    “::selection”只能设置两个属性,一个就是background,另一个就是color属性,设置其他属性是没有任何效果的。

    参考:http://www.w3cplus.com/css3/basic-selectors

  • 相关阅读:
    Apache 下载+安装
    PythonWindows环境下安装Flask
    返利网今日值得买python爬虫
    flask简单web应用
    flask笔记一
    2018年11月26日
    名词解释http隧道、https、SSL层、http代理、在线代理、socks代理区别
    【HTTP/S】透明代理、匿名代理、混淆代理、高匿代理有什么区别?
    C# HttpWebRequest Post Get 请求数据
    内网穿透系列Go语言
  • 原文地址:https://www.cnblogs.com/webcome/p/5472930.html
Copyright © 2011-2022 走看看