CSS选择符介绍

我们都是通过CSS选择符来锁定HTML元素进行样式的修改，在CSS选择符这一节中讲到了以下几种选择符:

• 子选择符与同辈选择符
• 通过选择符
• 属性选择符
• 伪元素
• 伪类
• 结构化伪类
• 表单伪类

下面一一举例说明:

1. 子选择符

子选择符只选择一个元素的直接后代，举个例子:

  <ul id="nav">
    <li>1</li>
    <li>
      2
      <ul>
        <li>2.1</li>
      </ul>
    </li>
    <li>3</li>
  </ul>

    #nav > li {
      height: 60px;
      background: url(https://www.easyicon.net/api/resizeApi.php?id=1145566&size=24) no-repeat left top;
      padding-left: 50px;
    }

#nav > li 只作用id为nav的直接子元素，如下图所示:

image.png

2. 同辈选择符

就是选择位于某个元素后面，并与该元素拥有共同父元素的元素。

  <div>
    <p>我是段落1</p>
    <p class="p2">我是段落2</p>
    <p>我是段落3</p>
  </div>
    .p2 + p {
      color: red;
    }

同辈选择符+只选择该元素的后面一个元素， 如果要选择.p2后面的所有元素，可以使用一般同辈组合子~, 使用方式为: .p2 ~p， 它会选择.p2后面的所有元素。

image.png

3. 通用选择符

通用选择符(*)可以匹配任何元素，这里就不举例子了。

4. 属性选择符

属性选择符基于元素是否有某个属性或者属性是否有某个值来选择元素。
我们可以根据input的type属性来设置样式，如下所示:

input[type="text"] {
  color: red;
}

image.png

有时候，我们还想对属性值进行"模糊"匹配，而非特定值。这使用我们就可以使用一些符号进行匹配。

####### 一、要匹配以某些字符开头的属性值，在符号前面加上插入符(^):

a[href^="http:"]  // 选中所有href的值为"http:"开头的a标签

####### 二、要匹配以某些字符结尾的属性值，在等号前面加上美元符号($):

a[href$=".com"]  // 选中所有href的值为".com"结尾的a标签

三、要匹配包含某些字符的属性值，在等号前面加上星号(*)：

a[href*="/about/"]  // 选择href包含"/about/"的a标签

四、要匹配以空格分隔的字符串的属性值，在等号前面加上波浪号(~):

a[title~="jj"]
<a title="test jj">匹配到这个</a>

五、要匹配选择开头指定值

a[lang|=en]
// 匹配 <a lang="en-us">us</a>

5. 伪元素

不想给页面添加额外的元素，这时候我们就可以使用伪类元素来实现效果，CSS中伪元素有:

::first-letter // 选择一段文本的第一个字符
::first-line // 选择一段文本的第一行
::before // 内容的开头
::after   // 内容的结尾

6. 伪类

伪类最常见的是a标签:

a:link
a:visited
a:hover
a:focus
a:active

另外还有一个:target和:not伪类

6. 结构化伪类

CSS3新增了一批的新伪类:

:nth-child(){}
:nth-last-child(){}
:nth-of-type(){}
:first-child{}
:last-child{}
:only-child{}
:only-of-child{}
:nth-last-of-type(){}

7. 表单伪类

input:required{}  // 必填伪类
input:optional{}  // 非必填
input[type="email"]:valid{} //有效的
input[type="email"]:invalid{} // 无效的
:read-only{} // 只读
:read-write{} // 非只读
......

以上是"CSS选择符"，这小节的学习归纳。