css选择器类型

标签选择器：

h1, h2, p {} // 选择所有的h1,h2,p

类选择器 .content

id选择器 #content

全局选择器：以开头(星号标在大括号前，修饰了包含body所有的标签) { padding: 10px}

结构选择器：

1、后代选择器 (包含选择器)：以空格隔开包含关系的元素

  <div class="tab">

    <p>标签1</p>

<div>      <p>标签1</p>    </div>

   <h2>标签儿</h2>

<h2>标签儿</h2>

    <p>标签2</p>

  </div>

<style>

.tab p {    color: orange;  } // tab下所有的p都会改变颜色

</style>

2、子选择器以>隔开父子级元素

div>p{ color: red; } // div下的p元素

3、兄弟选择器 ~ +

<div>兄弟元素
<p>兄元素</p>
<p>弟元素</p>
</div>

div p~h2{ color: red} // p后面的h2

div p+h2{ color: green} // p后面紧挨着的h2

属性选择器 []

  <div class="tab">

    <p title='name'>标签1</p>

    <div> <p>标签1</p> </div>

    <h2>标签儿</h2>

    <h1>标签1</h1>

    <p title='www.name oppo'>标签2</p>

  </div>

1、.tab p[title]:{ color: red} 选择所有带有title属性的p标签

2、.tab p[title = 'name']: { color: red} 选择所有title=name属性的标签

3、.tab p[title ^= 'na'] :{} 选择开头title属性带有na开头的标签

4、.tab p[title$= 'po'] :{} 选择title属性结尾是po的标签

5、.tab p[title *= 'name'] 只要含有name值就行的标签

6、.tab p[title ~= 'name flower'] 包含name的属性的标签

7、.tab p[title |= 'name'] 以name开头的属性的标签

伪类选择器

伪类不仅可以作用在a链接上，还可以作用在其他元素上

:link 未访问过的链接

:visited 访问过的链接

:active 鼠标点击的一瞬间

:hover 鼠标悬浮在链接上

:focus 具有焦点的输入元素 innput(将输入的外边框去掉 :focus{ outline: none})

:target 锚点目标选择器

:root 文档的根选择器

:empty 空选择器，没有任何子集的元素

:first-child div下所有孩子中的第一个

:last-child div下所有孩子中的最后一个

:first-of-type div下类型为p的第一个元素

:last-of-type div下类型为p的最后一个元素

:nth-child(2) 选择每个p元素是其父级的第二个子元素，选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。

:after 文本伪类选择器，在每个<p>元素之后插入内容

:before 文本伪类选择器，在每个<p>元素之前插入内容

:first-letter 文本伪类选择器，选择每一个<p>元素的第一个字母

:first-line 文本伪类选择器，选择每一个<p>元素的第一行

a {

    &:link {   // 未访问
        color: yellow;
}

    &:visited {  // 访问过

      color: gray;

    }

    &:hover {   // 鼠标移上去

      color: red;

    }

    &:active {   // 点击的一瞬间

      color: blueviolet;

    }
}

锚点目标的伪类选择器

<a href="#id"></a>

<div id='id'></div>

div:target{ 锚点的目标选择器}

<li > diyihge</li>
<li></li>

li:empty{ display: none; }

首尾元素的伪类选择器

<div>
<p></p>
<h1></h1>
<p></p>
</div>

:first-child div下所有的第一个p元素 div p:first-chid

:last-child div下所有的最后一个p元素 div:last-child

:first-of-type 特定类型(p元素)的第一个元素 div p:first-of-type

:last-of-type 特定类型(p元素)的第一个元素

唯一选择器

:only-child 只有一个孩子的div

:only-of-type div下只有一种孩子类型的选择器

表单上的伪类选择器

<input type='text' disable>

<input type='password' required>

input:disable{}

input:required{}

:valid : valid用于匹配输入值为合法的元素
:invalid :invalid用于匹配输入值为非法的元素

文本的伪类选择器

p::first-letter { 选择每一个<p>元素的第一个字母

      color: red

    }

p::first-line {  选择每一个<p>元素的第一行

      color: pink;

}

:beforep:before在每个<p>元素之前插入内容
:afterp:after在每个<p>元素之后插入内容

文本伪类表单

<div>

    <input type='text'>

    <span></span>

  </div>

div {

      width: 150px;

      border: 1px solid gray

    }

    div input[type='text'] {

      border: none;

      outline: none;

      width: 100px;

    }

    div input[type='text']+span::after {

      content: '123';

    }

权重应用

知识点补充：

!important : 强制权重优先级

浏览器默认font-size: 14px

可继承元素：color、font-size、font-family

通配符的权重：0

继承的权重： NULL 0>NULL

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签、伪类> 通配符* > 继承 > 浏览器默认属性

css选择器类型