CSS选择器

选择器

元素名称选择器

• h1,h2,h3{color: blue;text-align: center;}

 h1,h2,h3{
     color: blue;
     text-align: center;
}

---

id选择器

• #red {color:red;}

#myname{
    font-size: 50px;
    color: darkcyan;
}

<p id="myname">我是id选择器</p>

---

分组选择器

 <style>
   ul li{
      color: blue;
   }     
</style>

 <ul>
    <li>我是1</li>
    <li>我是2</li>
    <li>我是3</li>
    <li>我是4</li>
</ul>

---

后代选择器（派生选择器）

• ul li {color: red;font-size: 18}

/* 只有ul的后代li才会有颜色变化*/

ul li{
     color: green;
}

• 后代选择器：儿子以及儿子的后代都会被应用

 后代选择器
  <ul>
       <li>后代1</li>
       <li>后代2</li>
       <li>后代3</li>
       <li>后代4</li>
   </ul>

   <ol>
       <li>ol下的li</li>
       <li>ol下的li</li>
       <li>ol下的li</li>
       <li>ol下的li</li>
   </ol>

---

id选择器与后代选择器混合使用

• #d1 li {color: red;}

 /* id选择器与后代选择器混合使用*/
 #d1 li {
     color: red;
 }

<div id="d1">
    id选择器与后代选择器混合使用
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>
            <ol>我是ol</ol>
            <ol>我是ol</ol>
            <ol>我是ol</ol>
        </li>
    </ul>
</div>

---

相邻兄弟选择器

• li + li { color: red;}

<style>
    /*
        相邻兄弟选选择器
        只有li下面的标签才会生效
    */

    li + li{
        color: red;
    }
</style>


<div>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
</div>
<div>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
</div>

---

子元素选择器

• #my1 > li {color: blue;}
  如果希望选择只作为 id为my1的子元素的 li

 /* 子元素选择器*/
  #my1 > li {
       color: blue;
   }

 <ul id="my1">
        子元素选择器
     <li>我是li</li>
     <li>我是li</li>
     <li>我是li</li>
     <li>我是li</li>

 </ul>

---

属性选择器

• 属性选择器可以根据元素的属性及属性值来选择元素

使用空格隔开

#d2 div{
    font-size: 30px;
    color: darkblue;
}


<div id="d2">
    <input type="text" id="username" name="username">
    <div>我是一级div
        <div>我是二级div

        </div>
    </div>
    <div>我是另一个div</div>
    <p >我是一个段落</p>
</div>

---