Css3選擇器(二)

一、ID選擇器

    ID選擇器類似于類選擇器，不過也有一些重要差別

        例如：#id{}

二、類選擇器和ID選擇器的區別

    ID只能在文檔中使用一次，而類可以多次使用

<div id="myDiv">HelloWorld</div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>

    ID選擇器不能結合使用

    當使用JS時需要用到id

三、屬性選擇器

    1.簡單屬性選擇：

        例如：[title]{}

<p title="">Hello</p>
[title]{
    color: aqua;
}

    2.根據具體屬性值選擇

        除了選擇擁有某些的元素，還可以進一步縮小選擇范圍，只選擇有特定屬性值的元素

        例如：a[href="www.baidu.com"]{};

[href]{
    font-size: 30px;
}
<a href="">百度</a>

    3.屬性和屬性值必須完全匹配

[]{
    font-size: 30px;
}
<a >百度</a>

    4.根據部分屬性值選擇

<p title="a">Hello</p>
<p title="b">Hello</p>
<p title="c a">Hello</p>
<p title="d a">Hello</p>
<p title="ea">Hello</p>
[title~="a"]{
    font-size: 50px;
}

四、后代選擇器

    1.后代選擇器可以選擇作為某元素后代的元素

<p>This is my <strong>web</strong> page</p>
p strong{
    color: fuchsia;
}

五、子元素選擇器

    1.與后代選擇器相比，子元素選擇器只能選擇作為某元素子元素的元素

        它只能選擇當前一個層級關系的，如果隔代是不可以的

        例如：h2>strong{};

        如存在多層，需要逐層找到

p>i{
    color: fuchsia;
    font-size: 30px;
}
<p>This is my <strong>web <i>Hello Hello</i></strong> page</p>

六、相鄰兄弟選擇器

    1.相鄰兄弟選擇器可選擇緊接在另一個元素后的元素，且二者有相同父元素

      注意兩點

        一個是選擇元素后的元素，意味著當前元素是不起效果的

        第二點注意二者有相同的父級元素

        例如：h2+p{};

li+li{
    font-size: 50px;
    color: red;
}
<div>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
    </ul>
</div>

    這個選擇器在實際應用中用的不是特別多，這里稍作了解即可