CSS3 选择器

somboy 2020-06-10

1、属性选择器
  • 说明

    选取标签带有某些特殊属性的选择器

  • 常用
选择符描述
E[attr]选择具有attr属性的E元素
E[attr="val"]选择具有attr属性且属性值等于val的E元素
E[attr^="val"]选择具有attr属性且属性值以val开头的E元素
E[attr$="val"]选择具有attr属性且属性值以val结尾的E元素
E[attr*="val"]选择具有attr属性且属性值含有val的E元素

E[attr] 选择器

选择具有attr属性的E元素

举例:

<style>
    button{
        color: red;
    }
    button[disabled]{
        color: #cccccc;
    }    
</style>

<button>Button</button>
<button>Button</button>
<button disabled=‘disabled‘>Button</button>
<button disabled=‘disabled‘>Button</button>

E[attr="val"] 选择器

选择具有attr属性且属性值等于val的E元素

举例:

<style>
input[type=‘search‘]{
    color: pink;
}
</style>

<input type="text" value="文本框" />
<input type="text" value="文本框" />
<input type="search" value="搜索框" />    
<input type="search" value="搜索框" />

E[attr^="val"] 选择器

选择具有attr属性且属性值以val开头的E元素

举例:

<style>
div[cladd^=‘‘]{
    color: pink;
}
</style>

<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>

E[attr$="val"] 选择器

选择具有attr属性且属性值以val结尾的E元素

举例:

div[cladd$=‘4‘]{
    color: pink;
}

*`E[attr="val"]`** 选择器

选择具有attr属性且属性值含有val的E元素

举例:

div[cladd*=‘2‘]{
    color: pink;
}

注意

类选择器、属性选择器、伪类选择器权重都为10

2、结构伪类选择器

  • 常用
选择符描述
E:first-child选择父元素中的第一个子元素E
E:last-child选择父元素中的最后一个子元素E
E:nth-child(n)选择父元素中的第n个子元素E
E:first-of-type选择指定类型E的第一个
E:last-of-type选择指定类型E的最后一个
E:nth-of-type指定类型E的第n个

:first-child 选择器

表示选择父元素的第一个子元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

举例:

ol > li:first-child{
  color: red;
}

:last-child 选择器

选择的是元素的最后一个子元素。比如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器。

举例:

ol > li:last-child{
  color: red;
}

:nth-child(n) 选择器

用来定位某个父元素一个或多个特定的子元素。其中“n”是其参数,不仅可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd 奇数、even),但参数n的起始值始终是1,而不是0。也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素。

举例:

ol li:nth-child(even){
  background: orange;
}
  • 注意

    选择父元素里面的第n个孩子,不管父元素里面是否是同一种类型。

  • :empty 选择器

    表示的就是空。用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格

    举例:

    p{
    background: orange;
    min-height: 30px;
    }
    p:empty {
    display: none;
    }~~~
    `:root` 选择器

从字面上我们就可以很清楚的理解是根选择器,他的意思就是匹配元素E所在文档的根元素。在HTML文档中,根元素始终是<html>。

:root{
    background:pink;
}
/*等同于*/
html {background:pink;}

:nth-last-child(n)选择器

从最后一个开始算索引。

举例:

ol > li:nth-last-child(1){
  color: blue;
}
  • E:first-of-type选择器

    匹配同级兄弟元素中的第一个E元素,of-type 选择指定类型的元素

    举例:

    div span:first-of-type{
    background-color: yellowgreen;
    }
    <div>
     <p>p标签</p>
     <span>span1</span>
     <span>span2</span>
     <span>span3</span>
     <span>span4</span>
    </div>

    E:last-of-type选择器

匹配同级兄弟元素中的最后一个E元素,of-type 选择指定类型的元素

举例:

div span:last-of-type{
    background-color:rebeccapurple;
}

E:nth-of-type选择器

匹配同级兄弟元素中的最后一个E元素,of-type 选择指定类型的元素

举例:

div span:nth-of-type(2){
    background-color: blue;
}
<div>
     <p>p标签</p>
     <span>span1</span>
     <span>span2</span>
     <span>span3</span>
     <span>span4</span>
</div>

注意

  1. ul 里面中允许放li,所以nth-child和nth-of -type是一样的

  2. 伪类选择器权重为10

3、伪元素选择器

  • 常用
选择符描述
::before在元素内容的前面插入内容
::after在元素内容的后面插入内容
::first-letter选择文本的第一个单词或字(如中文、日文、韩文等)
::first-line选择文本第一行
::selection选择可选中的文本添加样式

E::before和E::after

  • 说明

    在E元素内部的开始位置和结束位创建一个元素,该元素为==行内元素==,且必须要结合content属性使用,因为在dom中看不见创建的元素,所以称为伪元素。

  • 语法
div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

注意

  1. E:after、E:before 在旧版本里是伪元素,CSS3的规范里“:”用来表示伪类,“::”用来表示伪元素,但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before,这样做的目的是用来做兼容处理。

  2. ":" 与 "::" 区别在于区分伪类和伪元素

  3. 伪元素和标签选择器一样,权重为1

E::first-letter**

  • 说明

    文本的第一个单词或字(如中文、日文、韩文等)

  • 语法
p::first-letter { 
font-size: 20px; ?color: hotpink;
}

E::first-line

  • 说明

    文本第一行

  • 语法
/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

E::selection

  • 说明

    可改变选中文本的样式

  • 语法
p::selection {
  /* font-size: 50px; */
  color: orange;
}

相关推荐