css选择器

简单选择器

选择器的优先级

ID选择器 > class选择器 > 元素(标签)选择器

元素选择器(标签选择器):

以元素或标签作为选择器

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
        body {
               background-color: lightcyan;
          }
    </style>
</head>
<body>
</body>
</html>

类选择器:

类选择器: 对应着html标签中的class属性

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
          .div_class {
              background:red;
          }
    </style>
</head>
<body>
    <div class="div_class">这是div_class</div>
</body>
</html>

id选择器:

id选择器对应着html中id属性

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
          #div_id {
              color:green;
          }
    </style>
</head>
<body>
    <div id="div_id">这是div_id</div>
</body>
</html>

多个类复合应用:

同一个元素下有多个属性选择器,在选择这个元素时可以复合使用,便于更进准的找到这个元素

注意:多个复合类选择器中间不能有空格一定要是连着:#div_di.div_class 中间有空格是多个选择器属性选中一个元素:#div_id .div_class(这是div_id下的div_class)

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
          #div_id.div_class {
              color:green;
          }
    </style>
</head>
<body>
    <div id="div_id" class="div_class">这是div_id和div_class复合使用</div>
</body>
</html>

层叠样式表:相同元素后面追加的样式会覆盖前面的样式

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style type="text/css">
          #div_id.div_class {
              color:green;
          }
          //使用这个后面设置的元素
          #div_id.div_class {
              color:red;
          }
    </style>
</head>
<body>
    <div id="div_id" class="div_class">这是div_id和div_class复合使用</div>
</body>
</html>

上下文选择器

后代选择器

注意第一个参数和第二个参数中间一定要有一个空格

//选择.container 下的所有div记住是所有
.container div {
    color:red;
}

父子选择器


`父子选择器中间以 > 指向子类标签`
//选择body下的子类及别的div记住只是子类的div
body > div {
    color:red;
}

同级相邻选择器

同级相邻选择器以 + 隔开

//选中和当前类属性同级的相邻item类属性元素改变其背景颜色
.item.center + .item {
    background-color: red;
}

同级所有选择器

同级所有选择器以 ~ 隔开

//选中和.item.center同级的所有类属性名为item的元素改变其背景颜色
 .item.center ~ .item {
    background-color: lightsalmon;
}

结构伪类选择器

匹配第一个子元素

//选择.container 下的第一个子元素设置背景颜色
//这里的*可以省略不写
.container > *:first-child {
 `background-color: lightgreen;
}
//选择.container 下的.tem下的第一个子元素设置背景颜色
.container > .item:first-child {
    background-color: blue;
}

匹配最后一个子元素

//选择.container 下的最后一个子元素设置背景颜色
.container > :last-child {
    background-color: lightpink;
}

选择指定的第几个子元素

这里的索引是从1开始的

//选择.container下的第三个子元素
.container > :nth-child(3) {
     background-color: limegreen;
}

选择偶数

偶数用even表示

//选择.container下的所有索引为偶数的元素设置背景颜色
.container > :nth-child(even) {
    background-color: limegreen;
}
//这是另一种选择索引为偶数的元素(建议用上面的)
.container > :nth-child(2n) {
    background-color: limegreen;
}

选择奇数元素

奇数用odd表示

//选择.container下的所有索引为奇数的元素设置背景颜色
.container > :nth-child(odd) {
    background-color: salmon;
}
//这是另一种选择索引为奇数的元素(建议用上面的)
.container > :nth-child(2n-1) {
    background-color: lightsalmon;
}

从指定位置开始选择剩下的元素

// 选择.container下的item下的第四个子元素开始剩下的所有子元素
.container > .item:nth-child(n + 4) {
    background-color: limegreen;
}

只取前三个元素

// 选择.container下的item下的前三个子元素
.container .item:nth-child(-n + 3) {
    background-color: salmon;
}

只取最后三个元素

//选择.container下的item下的最后三个子元素
.container .item:nth-last-child(-n + 3) {
    background-color: salmon;
}

倒数查找指定的元素

//选择.container下的item下的倒数第二个子元素
.container .item:nth-last-child(2) {
    background-color: yellow;
}

分组结构伪类选择器

元素按类进行分组[相同的类名、相同标签分为一类]

// .container下的所有div设置背景颜色[container下的所有div为一类]
.container div {
    background-color:green;
}

元素按照类型进行分组,在分组中根据索引进行选择

//选择.container下的div分组的最后一个div元素
.container div:last-of-type {
    background-color: violet;
}
// 选择container下的span分株的第三个span元素
.container span:nth-of-type(3) {
    background-color: violet;
}
//选择container下的span分组下的前三个span标签元素
.container span:nth-of-type(-n + 3) {
    background-color: red;
}
//选择 container下的span分组的最后两个span标签元素
.container span:nth-last-of-type(-n + 2) {
    background-color: violet;
}

伪类于伪元素选择器

伪类前面可以是单冒号,伪元素前面必须是双冒号

伪类

:target伪类:用来匹配文档中uri中某个标志符的目标元素
具体来说，uri中的标志通常会包含一个#，后面带有一个标志符名称，如#login-form,:target就是匹配ID为"login-form"的目标元素
//获取这里的login-form
例:<a href="#login-form">点击</a>

:focus伪类:用来当获取焦点的时候起作用
例:
//当input标签获取焦点的时候获取焦点的input标签给变背景颜色
input:focus {
    background-color: yellow;
}

::selection伪类: 设置选中文本的前景色与背景色
例:
// input输入框里的文本被选中的时候个便便被选中的文本背景色
input::selection {
    color: white;
    background-color: red;
}

:not()伪类: 用于选择不满足条件元素(就是剔除一些不想要的元素)
例:
// 这里剔除了.lisi下的第三个子元素给剩余的子元素颜色改变
.list > :not(:nth-of-type(3)) {
    color: red;
 }

` 用伪类:target实现表单的弹出

:target: 必须id配合，实现锚点操作

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类与伪元素</title>
    <style>
      #login-form {
        display: none;
      }
      /* :target: 必须id配合，实现锚点操作 */
      /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
      #login-form:target {
        display: block;
      }
    </style>
  </head>
  <body>
    <!-- <a href="#login-form">我要登录:</a> -->
    <button onclick="location='#login-form'">点击登录</button>
    <form action="" method="post" id="login-form">
      <label for="email">邮箱:</label>
      <input type="email" name="email" id="email" />
      <label for="password">密码:</label>
      <input type="password" name="password" id="password" />
      <button>登录</button>
    </form>
  </body>
</html>

伪元素

伪元素是浏览器自动生成的

伪元素不能被鼠标选中

::before 伪元素:在元素之前添加内or那个
例:
//在.list元素前添加内容"购物车"
.list::before {
    content: "购物车";
}

::after伪元素:在元素之后添加内容
例:
// 在.list元素后面添加内容"结算中..."
.list::after {
    content: "结算中...";
}

总结

简单选择器
上下文选择器
结构伪类选择器
伪类和伪元素

简单选择器

上下文选择器

结构伪类选择器

伪类于伪元素选择器

总结

相关文章