CSS和CSS3选择器

来源：互联网发布：js set array 转换编辑：程序博客网时间：2024/06/05 06:54

1、元素选择器

<style type="text/css">   html{color:black;}     h1{color:blue}</style>

2、选择器分组

 <style type="text/css">    h2,p{color:gray;}</style>

3、类选择器

<style type="text/css">   .important{ color:red;}  /*选择所有class=’important’的元素*/   p.important{ color: red;}  /*中间没有空格；匹配class=”important”的所有p元素*/   div .important{ color:blue;}  /*有空格；匹配div标签的子元素中class=”important”*/</style><body>  <div class="important">      <p></p>      <p class="important"></p>      <div class="one"></div>  </div></body>

4、ID选择器

  <style type="text/css">    #intro{ font-weight:800;}  /*选择id=”intro”的元素；类名可以重复有多个；id只能有唯一的一个；二者都区分大小写；*/  </style>  <body>    <div id="intro"></div>  </body>

5、属性选择器

    a[href] {color:red; }   /*只对有和href属性的锚(a元素)应用样式*/    a[href][title] {color:red;}   /*匹配同时有href和title属性的HTML超链接a*/    a[href=”http://my.csdn.net/”]{ color:red; }  /*匹配具体属性值*/    p[class~=”important”] { color: blue;}  /*属性值中包含某个值，要用”~”*/     [abc^=”def”]  /*选择abc属性以”def”开头的所有元素，不一定是完整单词*/     [abc$=”def”]  /*选择abc属性值以”def”结尾的所有元素*/     [abc*=”def”]   /*选择abc属性值中包含子串”def”的所有元素*/     [abc|=”hello”]   /*选择abc属性等于hello或者hello- 开头的所有元素；class=”hello box”都不行，空格不行；只能是整个单词hello或者hello-box；*/

6、后代选择器(包含选择器)

  div ul{ width:300px; }  /*选择div的子元素中的所有ul元素，不论嵌套多深*/

7、子选择器

h1 > p {color:red;}  /*选择只作为h1元素子元素的p元素；父子关系，不是子孙关系；*/

8、相邻兄弟选择器

 h1 + p {margin-top:50px;}  /*选择紧接在h1后面的p元素，而且两个有相同父元素；*/ eg:  <h1>aa</h1>   <p>bb</p>   <p>cc</p>  /*h1+p选择紧跟在h1后面的p(bb)；*/

9、伪类

         a:link {color: #ff0000;}    /* 未访问的链接*/         a:visited {color:red;}    /* 已访问的链接 */         a:hover {color:blue;}    /* 鼠标移动到链接上 */         a:active {color:green;}   /*选定的链接；被激活的元素*/         input:focus{color:white;}  /*向拥有键盘输入焦点的元素添加样式*/         li:hover a{color:orange;}   /*鼠标移动到li上面，a元素改变样式*/         p:first-child   /*选择该元素的父级元素中p标签元素，如果父级元素下的第一个子元素不是p标签，则不选择*/

  eg：     <ul>         <p>aaaaaa</p>         <li>            <p>bbbbb</p>            <p>cccccc</p>        </li>    <ul>    p:first-child{color:red;}  //先看p标签的父元素，再看父元素下第一个元素是不是p标签，不是p就匹配失败；   li:first-child{color:green;}  //li的父元素ul下第一个子元素不是li，所以匹配失败eg:   <p><q lang=”no”>段落中的引用的文字</q></p>    q:lang(no){color:red;}    //lang类为属性值为no的q元素添加样式；

css3选择器：

     n可以是数值，也可以是表达式算法，如3n选择第3个，第6个....      :nth-child(n)  //选择器匹配属于其父元素的第n个元素；匹配类型      :nth-of-type(n)  //匹配属于父元素的特定类型的第n个子元素的每个元素  eg:        p:nth-child(2);   /*先找出p的父元素中的第2个元素，是p标签则选中，不是则不选中；nth-last-child(n) 同上，从最后一个元素算起 */        p:nth-of-type(2); /* 选择属于其父元素的第二个<p>元素的每个<p>元素*/         p:empty      /*选择没有子元素的每个p元素*/      p:last-child    /* 选择属于其父元素最后一个子元素每个p元素*/      input:enabled  /*选择每个启用的input元素*/      input:disabled  /*选择每个禁用的input元素*/      input:checked  /* 选择每个被选中的input元素*/      :not(p)   /*选择非p元素的每个元素*/      ::selection  /*选择被用户选取的元素部分*/

10、伪元素

 :first-letter   //向文本的第一个字母添加特殊样式 :first-line    //向文本的首行添加样式 :before     //在元素之前添加内容 :after      //在元素之后添加内容 eg:  css:   h1:before {content:url(img/login.jpg); }      html:  <body>                <h1>this is a heading</h1>                <p>this is a</p>            </body>

阅读全文

0 0