css3选择器_02_divcssdata-CSDN博客

本文链接：https://blog.csdn.net/Y1063656825/article/details/105696426

选择器selector

选择器类型

选择器大体可以分为

关系型选择器
属性选择器
伪元素选择器
伪类续选择器
元素选择器

选择器的权重

因为我们在写样式的时候会给一个元素写很多个css样式，但是要执行哪个？这也是一个问题，我们会经常看到这样的css

.content .title .div{
	...	
}

为什么要写这么长呢？因为其中有一个权重的问题，权重越高自然就会使用他的样式：各个选择器权重

!important Infinity（最高）
行间样式 1000
id 100
class ，属性，伪类 10
标签选择器，伪元素 1
通配符 0

注意：他们的进制为256
权重 = 所用选择器权重相加

选择器

关系型选择器模型

css2 E + F 当前E元素下一个满足条件的兄弟元素结点

E是哪一个元素
F是条件，可以是标签，class, id, 条件一定是要有的
例如

<div>div</div>
<p>1</p>
<p>2</p>
<p>3</p>

div下一个是P标签的兄弟元素结点被选中

 div + p {
            background: red;
 }

在这里插入图片描述
css3 E ~ F：E下面满足条件的兄弟节点

E是哪一个元素
F是条件，可以是标签，class, id, 条件一定是要有的

div并列结构下所有P标签都被选中

 div ~ p {
            background: red;
 }

在这里插入图片描述

属性选择器

css2
E[attr ~ = "val]: 选择属性名是attr,属性值里有独立的val的元素。例：

   <div data="a">1</div>
   <div data="b">2</div>
   <div data="a b">3</div>
   <div data="aa bb c">4</div>

选择div中属性名为data属性值为a的元素

div[data ~ = "a"] {
          background: red;
      }
      ```
      ![在这里插入图片描述](https://img-blog.csdnimg.cn/2020042300270278.png)
**E[attr | = "val"]** ：选择属性名为attr，其中属性值是以val或val-开头的元素
```html
  <div data="a">1</div>
  <div data="b">2</div>
  <div data="a-b">3</div>

选择div中属性名为data属性值为a或a-开头的元素

div[data | = "a"] {
          background: red;
      }
      ```
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020042300344323.png)
**css3**
**E[attr ^ = "val"]** ：选择属性名是attr,属性值是以val开头的元素。例：
```html
  <div data="a">1</div>
  <div data="ab">2</div>
  <div data="b ab c">3</div>
  <div data="aa bb c">4</div>

选择div中属性名为data属性值为a开头的元素

div[data ^ = "a"] {
          background: red;
      }
      ```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200423082626762.png)
**E[attr $ = "val"]**：选择属性名是attr,属性值是以val结尾的元素。例：
```html
  <div data="a">1</div>
  <div data="ab">2</div>
  <div data="aba">3</div>

选择div中属性名为data属性值为a结尾的元素

div[data $ = "a"] {
          background: red;
      }
      ```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200423083004435.png)
**E[attr * = "val"]**：选择属性名是attr,属性值中存在val的元素。例：
```html
  <div data="a">1</div>
  <div data="bab">2</div>
  <div data="aba">3</div>

选择div中属性名为data属性值存在a的元素

div[data * = "a"] {
          background: red;
      }
      ```
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200423083211423.png)
#### 伪元素选择器
css3的伪元素选择器：E::placeholder、E::selection不同于css2中的伪元素选择器befor、after可以写一个或者两个冒号都可以，这两个必须写两个。

**E::placeholder**
其中placeholder在html5中是一个input的属性,就会在输入框中添加一个默认的提示例如下面的“请输入...”
```html
<input type="text" placeholder="请输入...">

在这里插入图片描述
E::placeholder（有兼容性问题） 的功能就是只可以改变placeholder的颜色，例：

input::placeholder {
            color: red;
        }

在这里插入图片描述
E::selection 的功能是改变选中后的样式，只可以改变color字体颜色、background-color背景颜色、text-shadow字体阴影，例：

<div>
        <span>科比</span>是NBA最好的得分手之一，生涯赢得无数奖项，突破、投篮、罚球、三分球他都驾轻就熟，几乎没有进攻盲区，单场比赛<span>81分</span>的纪录就有力地证明了这一点。除了疯狂的得分外，<span>科比</span>的组织能力也很出众，经常担任球队进攻的第一发起人。另外科比</span>还是联盟中最好的防守人之一，贴身防守很具有压迫性。
    </div>

span::selection {
            background-color: salmon;
            color: #fff;
            text-shadow: 3px 5px blue;
        }

在这里插入图片描述

伪类选择器被选中元素的状态

**E:not(s)：**例：被选中的元素为class不是test的元素

    <div class="demo">1</div>
    <div class="demo">2</div>
    <div class="test">3</div>

div:not(.test) {
            background-color: red;
        }

在这里插入图片描述
E:root 是选择根节点在HTML中就相当于html,例：

:root {
            background-color: red;
        }
html {
            background-color: red;
        }

他俩效果相同都是时整个背景变红。

E:target 被标记成锚点之后，就会添加一个target

    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <div id="box1">1</div>
    <div id="box2">2</div>

 div:target {
            border: 1px solid red;
        }

在这里插入图片描述
当点击box1,1上面就会添加一个边框。点击box2,2上面就会添加一个边框

E:first-child：E是要选中的元素，first是第一个节点元素，所有元素的第一个
E;last-child：E是要选中的元素，last是最后一个节点元素，所有元素中最后一个
E:only-child：E是要选中的元素，only是唯一一个元素
E:nth-child（参数）：E是要选中的元素，nth-child必须是儿子节点，参数只要选中的节点，可以填数字表示选中第几个，2n+1/odd选中奇数的元素，2n/even为偶数这里是从0开始的
**E:nth-last-child（参数）**这个就是上面倒着的操作

上面的写法都需要考虑其他元素的影响

E:first-of-type：选择E这个类型的第一个孩子
E:last-of-type：选择E这个类型的最后孩子
E:only-of-type：选择E这个类型的唯一一个孩子
E:nth-of-type（参数）：选择E的第几个元素，可以填数字表示选中第几个，2n+1/odd选中奇数的元素，2n/even为偶数
E:nth-of-last-type（参数）：这个就是上面倒着的操作
上面这五个是不考虑其他元素，只考虑自己要选的

E:empty：查看E元素是否有其他节点，如果什么都没有就被选中，注释不算节点，空格算结点

E:checked： checkbox类型的input被选中后可以更改样式

E:enabled：筛选可以使用的

E:disabled：筛选不可以使用的

E:read-only：筛选只读的