探索CSS3选择器的奥秘

CSS3选择器

思维脑图

属性选择器

1.element[attr] 表示选择带有attr属性的element元素
例如：选择带有class属性的span元素，并将其颜色变成红色。

<style>
<style>
        span[class] {
           color: red;
        }
    </style>
	<span class="spanClass">span</span>
    <span id="spanId">span</span>

这样就成功匹配到第一个span元素
2.element[attr~=attr] 表示的一个单独的属性值，这个属性值是以空格分隔开。
例如：让class属性为f40的div颜色变成淘宝红**#f40**

 <style>
 div[class~="f40"] {
            color: #f40;
        }
 </style>
<div class="f40 ml10 fl">div</div>

这样成功选择class中多个属性中的其中一个
3.element[attr|=val] 表示的一个单独的属性值或是以“-”分隔的
例如：让class属性中含有content的div颜色全部变为红色。（以“-”分隔）

<style>
        div[class|="content"] {
            color: red;
        }
    </style>
    <div class="content">content</div>
    <div class="content-1">content-1</div>

两个div全部变为红色
第1个div，拥有class属性，并且值为content，所以被选中；
第2个div，拥有class属性，值是content开头并紧跟着连接符“-”，所以被选中。
4.elment[attr=val] 表示属性值里含有val字符并且在“任意”位置
例如：让class属性中含有div的div变成红色

<style>
 div[class*="div"] {
            color: red;
        }
 </style>
 <div class="contentdivred">red</div>

5.element[attr^=val] 表示的属性值里包含val字符并且在“开始”位置
例如：让class属性中含有div的div变成红色(div必须在class属性中的开头）

<style>
 div[class^="div"] {
            color: red;
        }
 </style>
 <div class="divredcontent">red</div>

6.element[attr$=val] 表示的属性值里包含val字符并且在“结束”位置。
例如：让class属性中含有div的div变成红色(div必须在class属性中的结尾）

<style>
 div[class$="div"] {
            color: red;
        }
 <div class="contentreddiv">red</div>

伪类选择器

1.element：first-child 相对于父级做参考，所有子元素的第一个子元素，并且位置要对应。
例如：将第一个li的颜色变为红色。

<style>
        li:first-child {
            color: red;
        }
</style>
    <ul>
            <li>1</li>
            <li>2</li>
    </ul>

2.element：first-of-type相对于父级元素做参考，特定类型的（element）的第一个子元素。
例如：仍将第一个li的颜色变为红色。

<style>
        li:first-of-type {
            color: red;
        }
 </style>
    <ul>
            
            <li>1</li>
            <li>2</li>
   </ul>

有人可能会问这两个效果相同，这两个有什么区别吗？
如果在第一个li前面加上一个span元素，那么li:first-child就会失效，它虽然是第一个li，但它相对于父级做参考，它不是第一个子元素，li:first-child 它是指相对于父级ul下面的第一个子元素，通过判断，第一个子元素不是li那么就不起作用了。执行逻辑：返回到父级，然后选择第一个子元素，第一个子元素是li执行，不是li，不执行

<style>
        li:first-child {
            color: red;
        }
        //失效
        li:first-of-type {
            color: red;
        }
        //生效
 </style>
 <ul>
            <span>1</span>
            <li>1</li>
            <li>2</li>
</ul>

3.element：last-child 相对于父级做参考，所有子元素的最后一个子元素，并且位置要对应。
4.element：last-of-type 相对于父级元素做参考，特定类型的（element）的最后一个子元素。
5.element：only-child 相对于父级元素做参考，element父级下仅有一个element子元素，出现两个element就失效了。
例如：将span的颜色变为红色。

<style>
        span:only-child {
            color: red;
        }
</style>
 <ul>
            <span>1</span>
 </ul>

6.nth-of-child（n） 第n个子元素，element元素的全部兄弟元素中的第n个element元素
（n的取值大于等于1，当n为系数时n的取值可以为0）
例如：将第三个span元素变为红色。

<style>
        span:nth-child(3) {
            color: red;
        }
    </style>
    <ul>
            <span>1</span>
            <span>2</span>
            <span>3</span>
    </ul>

7.nth-of-type（n） 第n个子元素，忽略element的其他与其不同的兄弟元素中的第n个element元素。
例如：将第四个span元素变为红色。

<style>
        span:nth-of-type(4) {
            color: red;
        }
</style>
<ul>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <li>4</li>
            <span>4</span>
</ul>

nth-of-child（n） 和 nth-of-type（n）区分方法与上面的
element：first-of-type 和 element：first-child 相同。
8.nth-last-child（n） 和 nth-last-of-type（n） 从最后一个元素往前数，第n个子元素，是上面两种的倒序。
9.element：target 结合锚点进行使用，处于当前锚点的元素会被选中
例如：假设代码在index.html中，当访问index.html#demo时div中的文字颜色变为红色。

<style> 
        #demo:target {
            color: red;
        }
</style>
<a href="#demo">demo</a>
    <div id="demo">
        <p>Element:target伪类使用方法</p>
    </div>

10.element：empty表示元素没有任何内容才被选中。
例如：将空的p元素的背景颜色设置为红色，高20px

<style>
        p:empty {
            background-color: red;
            height: 20px;
        }
</style>
<ul>
            <p></p>
</ul>

伪元素选择器

1.element::before设置元素前面的内容，用来和content属性一起使用，并且必须定义content属性
例如：在bc前面插入a并将a的颜色改为红色

<style>
        p::before {
            content: "a";
            color: red;
        }
    </style>
    <ul>
            <p>bc</p>
    </ul>

2.element::after 设置元素后面的内容，用来和content属性一起使用，并且必须定义content属性
例如：在a后面插入bc，并将bc的颜色改为红色

<style>
        p::after {
            content: "bc";
            color: red;
        }
</style>
<div>
        <p>a</p>
</div>

3.element::placeholder 设置对象文字占位符的样式。
注意：（1）除了Firefox是 ::placeholder，其他浏览器都是使用 ::input-placeholder
（2）兼容性不太好，需要添加相应的浏览器前缀
例如：将占位符的默认灰色改为共色

<style>
        input::-webkit-input-placeholder {
            color: red;
        }
</style>
<input type="text" placeholder="请输入用户名">

4.element::selection改变选中（鼠标选中）文本的样式。
注意： ::selection只能定义被选择时的background-color，color及text-shadow(IE11尚不支持定义该属性)。
例如：当选中123456时，颜色变为红色。

<style>
        p::selection {
            color: red;
        }
</style>
<p>123456</p>