css选择器

最新推荐文章于 2024-07-20 15:40:46 发布

guigui_hello

最新推荐文章于 2024-07-20 15:40:46 发布

阅读量32

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_33667332/article/details/131749210

版权

细说选择器

基本选择器有： id ,标签（tag) 和 class选择器

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/selector-base.css" />
    <title>选择器1: 简单选择器</title>
</head>

<body>
    <h2>item1</h2>
    <!-- 页面元素: 标签+属性 -->
    <!-- 标签: 分类 -->
    <!-- 属性: 特征 -->

    <h2 title="hello">item2</h2>

    <!-- 属性中有二个特殊属性,高频属性 -->
    <!-- id, class  -->
    <h2 id="a">item3</h2>
    <!-- <h2 id="a">item3</h2> -->
    <h2 class="b">item4</h2>

    <!-- id,class 区别 -->
    <!-- id: 用于匹配唯一元素 -->
    <!-- class: 用于匹配一组元素 -->

    <!-- id: 准确来讲,是匹配一组元素中的第一个 -->
</body>

</html>

在CSS里的选择器：

/* 外部样式表 */


/* 1. 标签 */


/* 样式规则: 选择器 {声明}   这个是值用标签选中*/

h2 {
    color: red;
}

/* 2. 属性  ， 用属性 title来选中  */
h2[title='hello'] {
    color: green;
}

/* h2[id='a'] {
    color: blue;
} */

/* #a == [id="a"]  这个是id 选择器的简写 */

h2#a {
    color: blue;
}

----------------------------------------------
这个是 class 选择器的完全写法
/* h2[class='b'] {
    color: violet;
} */

这个是class选择     简写
h2.b {
    color: violet;
}


/* tag, id, class  */

上下文选择器

根据你的关系和位置来选择，就是上下文选择器

输入这个 然后按Tab 会生成
  ul.list>.item{item$}*3
  
    <ul class="list">
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
    </ul>


[class='list']{
        border:1px solid red;
}

这个是子元素选择器
这个选择器选择的是 带有 class 属性（值是list) 的标签下的每个 li， 但是不能选中 子元素的li标签
.list>li {
    border:1px solid;
}


这个是后代元素选择器，
这个可以选择 class 为list的属性标签下所有的 li 标签的元素，包括子元素的li标签
.list li{
        border:1px solid;
}


<li class="item second">item2</li>

这个是相邻兄弟选择器 中间不要有空格
.item.second {
    border:1px solid;
}

选择它的下一个兄弟
.item.second+li{
    background-color: red; 
}


这个是选中item.second  这个标签之后所有的兄弟
.item.second~*{
    background-color: red;
}

同上，这个是表示选中 class = three 之后的所有元素
.three~*{
   background-color: red;
}

选择器的权重

id:    权重是千
class :权重是百
tag:   权重是十位

同级时，按书写顺序，后面的覆盖前面的

id:0个
class: 0个
tag: 2 个
权重： 0 ，0， 2

body h1 {
    color: violet;
}

id:0个
class: 0个
tag: 1 个
权重： 0 ，0， 1

h1 {
    color:red
}

为啥不推荐为元素添加id?
因为权重太大了，影响了样式的复用。权重在精确的前提下越低越好

important 一旦加上这个单词就忽略权重了，这个是最高级的。它一般是用来调试代码的，一般不要用。

h1 {
    color: chartreuse !important; 
}

什么是伪类

结构伪类，表单伪类，状态伪类，链接伪类。

分组结构的伪类用于寻找子元素的。所以应该给她一个查询起点。

这个表示选中了第一个元素
.list>li:nth-of-type(1){
      background-color: blue;
}

这个也表示第一个元素
.list>li:first-of-type{
      background-color: green;
}


这个表示选中了第9个元素
.list>li:nth-of-type(9){
    background-color: red;
}

这个表示最后一个
.list>li:last-of-type{
    background-color: green;
}

总是选中倒数第4个
.list>li:nth-last-of-type(4){
    background-color: green;
}




  <ul class="list">
    <li class="item">item1</li>     这个会变成蓝色背景
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
    <li class="item">item7</li>
    <li class="item">item8</li>
    <li class="item">item9</li>     这个会变成红色背景
  </ul>

结构伪类的参数

:nth-of-type(a*n+b)

1 a：系数，[0,1,2....]
2 n： [0,1,2,3 ...]
3 b:  偏移量，从0 开始

注意： 计算出来的索引，必须是有效值，从1开始

实际开发总，使用 n+b （偏移量）来快速选中一组元素


 选中从第三个开始之后的元素
.list>:nth-of-type(n+3){
      background-color: green;
}

选中偶数选项
        .list>li:nth-of-type(even){
            background-color: red;
        }
        
        
    选中奇数选项    
        .list>li:nth-of-type(odd){
            background-color: yellow;
        }