HTML 5 CSSセレクタ

6127 ワード

セレクタとは?
セレクタ{スタイル;}これがセレクタです.セレクタは、スタイルが使用されるオブジェクトを指定します.つまり、スタイルがどこを修正するために使用されるかを明確にするために使用されます.
  • ラベルセレクタ:htmlラベルに作用する
  • body{font-size:12px;line-height:1.6em;}

    これがタグに作用します
  • クラスセレクタ(
  • など)
    <style type="text/css">
    .main{/*     .  */
        color:red;
    }
    style>

    次にclass="を使用してラベルのスタイルを設定します.たとえば、次のようにします.
    <p class="main">    p>
  • IDセレクタ、クラスセレクタと同様、例えば:
  • <style type="text/css">
    #main{/*      #  */
        color:red;
    }
    style>

    次の操作を行います.
    <p id="main">ID   p>
  • サブセレクタ、コード:
  • を参照
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>    title>
    <style type="text/css">
    .food>li{border:1px solid red;}/*      (   1px,         )*/
    
    style>
    head>
    <body>
    <ul class="food">
        <li>  
            <ul>
                <li>  li>
                <li>  li>
                <li> li>
            ul>
        li>
        <li>  
            <ul>
                <li>  li>
                <li>  li>
                <li>   li>
            ul>
        li>
    ul>
    body>
    html>

    上のコードでは、.foot>li{}はclass="foot"のサブラベル
  • に作用し、つまり果物、野菜に作用します
  • は、(子孫)セレクタ、構文フォーマット:.foot li{color:red;} サブセレクタは「>」接続を使用します.次のレベルのセレクタを含む場合にのみ使用されます.セレクタを含む場合は、すべてのサブラベルが上のコードで使用される場合に使用されます.果物、野菜だけでなく、サブクラスも変更されます.
  • 汎用セレクタ、構文:*{color:red;}汎用セレクタの動作範囲が最も大きく、htmlラベルすべてに
  • が動作します.
  • 擬似クラスセレクタa:hover{color:red;}このような効果は、マウスが移动电梯的话,粉丝的颜色变红,假色的选择有很多状态,特别是css 3,但hover的互换性最好,最多使用.
  • パケットセレクタh 1,span{color:red;}次の2行のコードh 1{color:red;}相当于span像这样写拉贝尔和拉贝尔的话,变化的克拉斯和ID塞雷克塔的不同点:可以适用于任意要素的不同点:1,ID塞雷克塔只能在纪录片上使用一次.与克拉斯塞雷克塔不同,在1个HTML纪录中,ID塞雷克塔只能使用1次,只能使用1次.克拉斯塞雷克可以多次使用.2,可以使用克拉斯塞雷克语里斯特梅索,同时设定多个标题,可以在1个要素中同时设定多个标题.1个要素中同时设定多个标题,但只能实现克拉斯塞雷克塔的方法.IDセレクタはできません.下次的克拉斯塞雷克可以像这样写...stress{ color:red; } .bigsize{ font-size:25px; } <span class="stress bigsize">クラスセレクタは2種類のcssを同時に設定できますが、idセレクタはspan>