CSS介绍（2）--关系选择器，属性选择器

前言

上一期我们介绍了id选择器，类选择器等选择器，今天我们再来介绍一下关系选择器，这也是我们用得比较多的选择器。

关系选择器

后代选择器

E F{}

选择E元素包含的F元素，进行修饰
E和F元素之间用空格隔开

ul li{
            color:red;
        }

<ul>
        <li>第一</li>
        <li>第二</li>
        <ol>
            <li>第三</li>
        </ol>
        <div>
            <ol>
                <li>第四</li>
            </ol>
        </div>
    </ul>

可以看出< ul >列表下的所有< li >标签都被修饰

子代选择器

E>F{}

选择E元素的直接子代元素F，不是直接子代元素的F不修饰
E和F之间用>隔开

ul>li{
            color:red;
        }

<ul>
        <li>第一</li>
        <li>第二</li>
        <ol>
            <li>第三</li>
        </ol>
        <div>
            <ol>
                <li>第四</li>
            </ol>
        </div>
    </ul>

相邻兄弟选择器

E+F{}

选择紧跟E元素的第一个F元素，只能向下选择
E和F之间用+间隔

h3+p{
            color:red;
        }

    <p>上一个不是相邻兄弟</p>
    <h3>我是标题</h3>
    <p>我是相邻兄弟</p>
    <p>再往下就不是</p>

通用兄弟选择器

E~F{}

选择E元素之后的所有兄弟元素F，只能向下选择
E和F之间~间隔

h3~p{
            color:red;
        }

    <a href="#">超链接</a>
    <p>向上不是</p>
    <h3>标题</h3>
    <p>我是兄弟</p>
    <div>我不是</div>
    <p>相隔也是</p>

属性选择器

属性选择器有七种写法：
1.标签[属性]

2.标签[属性=属性值]

3.标签[属性^=属性值]

4.标签[属性$=属性值]

5.标签[属性*=属性值]

6.标签[属性~=属性值]

7.标签[属性|=属性值]
虽然这里写的是属性值，但很多其实是属性值的特征，要注意不要混淆

/*写法1 某某[属性] 选择到a标签且有title属性的变量*/
    a[title]{
        background: red;
    }

/*写法2: 某某[属性=属性值] 选择到有某某标签有指定属性且属性值一样（包括空格）*/
    a[lang="zh"]{
        background: blue;
    }

/*写法3: 某某[属性^=属性值]*/
/*a标签有class属性并且属性值是由ul开头的*/
     a[class^=" ul"]{
        background-color: red;
    } 

/* 写法4 某某[属性$=属性值] */
/* a标签有class属性且属性值结尾是s的变量*/
    a[class$="s"]{
        background-color: blue;
    } 

/* 写法5 某某[属性*=属性值] */
/* 选择到a标签且有href属性且只要有#就可以 */
    a[href*="#"]{
        background-color: red;
    }

/* 写法6 某某[属性~=属性值] */
/* 选择到的是a标签且有class属性,且属性值有完整的it的变量 */
    a[class~="it"]{
        background-color: red;
    }

/* 写法7 某某[属性|=属性值] */
/* 选择到有a标签,且有属性title,而且属性值只有1个是link的或者属性值有多个但只能是link-开头的变量 */
    a[title|="link"]{
        background-color: red;
    }

今天介绍了两种选择器，有了他们，我们基本可以得心应手的选择元素，其他的内容，我们下期继续！