zoukankan html css js c++ java

CSS3学习手记（1）选择器

基本选择器

通配符选择器
元素选择器
类选择器
ID选择器
后代选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*通配符选择器*/
            *{margin: 0;padding: 0;border: none;}

            /*元素选择器*/
            body{background: #eee;}

            /*类选择器*/
            .list{list-style: square}

            /*id选择器*/
            #list{width: 500px;margin: 0 auto}

            /*后代选择器*/
            .list li {margin-top:10px;background: #abcdef}
        </style>
    </head>
    <body>
        <ul id="list" class="list">
            <li class="first">1</li>
            <li class="second">2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
</html>

新增选择器

子元素选择器：子元素选择器只能选择某元素的子元素语法格式：父元素>子元素兼容IE8以上的浏览器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        section>div{color: #f00}
        </style>
    </head>
    <body>
      <section>
          <div>里面</div>
          <article>外面</article>
      </section>
    </body>
</html>

相邻兄弟选择器：可以选择紧接在另一个元素后的元素，而且他们具有一个相同的父元素元素 + 兄弟相邻元素兼容IE8以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        section>div+article{color: #f00}
        </style>
    </head>
    <body>
      <section>
          <div>里面</div>
          <article>外面1</article>
           <article>外面2</article>
      </section>
      </section>
    </body>
</html>

通用兄弟选择器：某元素后面的所有兄弟元素，而且他们具有一个相同的父元素元素 ~ 后面所有兄弟相邻元素兼容IE8以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        section>div~article{color: #f00}
        </style>
    </head>
    <body>
      <section>
          <div>里面</div>
          <article>外面1</article>
           <article>外面2</article>
      </section>
      </section>
    </body>
</html>

群组选择器：具有相同样式的元素分组在一起，每个选择器之间使用逗号隔开元素1，元素2，. . . ,元素n 兼容IE6以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
      section > article,
      section > aside,
      section > div{
          color: #f00;
          margin-top:10px;
          background: #abcdef;
      }
        </style>
    </head>
    <body>
     <section>
         <article>article</article>
         <aside>aside</aside>
         <div>div</div>
     </section>
      </section>
    </body>
</html>

属性选择器

对带有指定属性的HTML元素设置样式

使用css属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值

Element[attribute]

为带有attribute属性的Element设置样式兼容IE8以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
     a[href]{
         text-decoration: none;
         }
        </style>
    </head>
    <body>
    <a href="#">attribute</a>
    </body>
</html>

Element[attribute=" value"]

为带有attribute=" value"属性的Element设置样式兼容IE8以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
     a[href]{
         text-decoration: none;
         }
     a[href="#"]{
         text-decoration: none;
       color: red
         }
        </style>
    </head>
    <body>
    <a href="index.html">attribute</a>
    <a href="#">attribute</a>
    </body>
</html>

Element[attribute~=" value"]

选择attribute属性包含单词 "value"的元素，并设置其样式兼容IE8以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
     a[href]{
         text-decoration: none;
         }
     a[href="#"]{
         text-decoration: none;
       color: red
         }
    a[class~="two"]{
        color: green
    }
        </style>
    </head>
    <body>
    <a href="index.html">attribute</a>
    <a href="#">attribute</a>
    <a class="one two" href="#1">attribute</a>
    <a class="two three" href="#2">attribute</a>
    <a href="#3">attribute</a>
    <a href="#4">attribute</a>
    </body>
</html>

Element[attribute^=" value"]

设置attribute属性值以 "value"开头的所有Element元素的样式兼容IE8以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
     a[href]{
         text-decoration: none;
         }
     a[href="#"]{
         text-decoration: none;
       color: red
         }
    a[class~="two"]{
        color: green
    }
    a[href^="#"]{
        color: yellow;
    }
        </style>
    </head>
    <body>
    <a href="index.html">attribute</a>
    <a href="#">attribute</a>
    <a class="one two" href="#1">attribute</a>
    <a class="two three" href="#2">attribute</a>
    <a href="#3">attribute</a>
    <a href="#4">attribute</a>
    </body>
</html>

Element[attribute$=" value"]

设置attribute属性值以 "value"结尾的所有Element元素的样式兼容IE8以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
     a[href]{
         text-decoration: none;
         }
     a[href="#"]{
         text-decoration: none;
       color: red
         }
    a[class~="two"]{
        color: green
    }
    a[href^="#"]{
        color: yellow;
    }
     a[href$="1"]{
        color:goldenrod;
    }
        </style>
    </head>
    <body>
    <a href="index.html">attribute</a>
    <a href="#">attribute</a>
    <a class="one two" href="#1">attribute</a>
    <a class="two three" href="#2">attribute</a>
    <a href="#31">attribute</a>
    <a href="#41">attribute</a>
    </body>
</html>

Element[attribute*=" value"]

设置attribute属性值包含 "value"的所有Element元素的样式兼容IE8以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
     a[href*="2"]{
         text-decoration: none;
         color: red;
         }
        </style>
    </head>
    <body>
    <a href="index.html">attribute</a>
    <a href="#">attribute</a>
    <a class="one two" href="#1">attribute</a>
    <a class="two three" href="#2">attribute</a>
    <a href="#31">attribute</a>
    <a href="#41">attribute</a>
    <a href="#312">attribute</a>
    <a href="#412">attribute</a>
    </body>
</html>

Element[attribute|=" value"]

选择attribute属性值为 "value"或以“value-”开头元素，并设置其样式兼容IE8以上

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
     a[href|="v"]{
         text-decoration: none;
         color: red;
         }
        </style>
    </head>
    <body>
    <a href="index.html">attribute</a>
    <a href="#">attribute</a>
    <a href="v-31">attribute</a>
    <a href="v-41">attribute</a>
    <a href="v-312">attribute</a>
    <a href="#412">attribute</a>
    </body>
</html>

查看全文

相关阅读:
使用自定义RadioButton和ViewPager实现TabHost效果和带滑动的页卡效果
 Android 实现文件上传功能(upload)
Hibernate配置文件
 ICMP报文分析
 AVC1与H264的差别
 内存泄漏以及常见的解决方法
 数据挖掘十大经典算法
 关于java的JIT知识
 Ubuntu安装二：在VM中安装Ubuntu
hdu 1520Anniversary party(简单树形dp)

原文地址：https://www.cnblogs.com/zry2510/p/7079089.html

CSS3学习手记（1） 选择器

基本选择器

新增选择器

属性选择器

CSS3学习手记（1）选择器