css选择器

凝望2
151 阅读4分钟

首先我们先了解什么是选择器?

  1. 要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
  2. 3.HTML页面中的元素就是通过CSS选择器进行控制的

选择器分为两大类,

基础选择器

  • 通配符选择器
  • 标签选择器
  • 类选择器
  • id选择器
  • 属性选择器

复杂选择器

  • 后代选择器
  • 子代选择器
  • 相邻兄弟选择器
  • 通用兄弟选择器
  • 群组选择器
  • 交集选择器

首先是基础选择器

1. id选择器

我们可以给元素设置id属性，然后通过 # +id属性值 的方式来选择这个元素

选择器命名：

  • id就像我们的身份证号，是不允许重复的
  • 并且一个元素只能有一个id属性
  • id命名规范建议（类名命名方式也适用）
    • id或者class必须以字母开头，不能以数字或者下划线开头
    • 名字不出现汉字
    • 不允许带有广告的英文单词出现：如：ad adv adver advertising (防止浏览器当成垃圾广告处理掉 过滤掉 )
    • 除第一位后边小写字母、数字、连字符（ _ -）
    • 见名知意
    • 不要出现空格
//id选择器 具有唯一性
#box4 {
}

<div  id="box4">1111</div>

类选择器：

  1. 可以给不同的元素，进行分组。所有类名相等的元素，是一组的，可以进行控制样式
  2. 给要被分组的元素设置class属性选择器中使用 . + class属性值 来选择元素
  3. 类不一定多个元素，也可以是一个元素
  4. 一个class可以设置多个类名，但是只能有一个class属性，一个元素的多个class属性的值可以用空格隔开，就代表书写多个类名
  .show{   
        }
         <div class="show"></div>

标签名选择器：

  • 通过标签名来选择元素
  • 会选择页面中所有的这个标签的元素
li{
         
        }
         <ul>
        <li></li>
        </ul>

通配符选择器（*）

  • 通配符使用星号 ***** 表示，意思是“所有的”。
  • 在CSS中，同样使用 ***** 代表所有的标签或元素，它叫做通配符选择器。
  • 不过，由于 ***** 会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用 ***** 通配符选择器
/*这里就把所有元素的字体设置为红色*/
*{ color : red; }

属性选择器

  • [属性]{},把具有这个属性的所有标签选中
  • [属性=“属性值”]，把不仅具有这个属性，而且必须是属性值也是规定的这一类标签选中
<style>
       [index]{
           background:darkorange;
       }
      [index="a1"]{
          background:darkorchid;
      }
</style>

复杂选择器

一会看着下面乱的看这(简单理解)

子代选择器 A>B,ul的所以儿子li

ul>li {
color: red;
}

后代选择器 A B

.box div {
color: blue;
}

群组选择器A,B

div {
font-size: 20px;
}

交集选择器 不仅div还得是带有box类名的div

div.box {}

相邻兄弟选择器 只会找下一个A+B

.liEle+li {
font-size: 30px;
}

通用兄弟选择器A~B

.liEle~li {
font-style: italic;
}
.box1>div+span~p {}

后代选择器

后代选择器使用空格间隔开 （A B：在A元素中寻找后代（不一定是儿子）是B的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
       /* .box li{
            background-color: red;
        }*/
        div li{
            background-color: pink;
        }
        .show{}
        .box .show{}
        .outer .show{}
        html body div .show{}
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <ul class="box">
            <li>111</li>
            <li class="show">222</li>
        </ul>
        <ol>
            <li>333</li>
            <li>444</li>
        </ol>
    </div>

</body>
</html>

子代选择器

子代选择器使用 > 间隔开 （A>B：在A元素中寻找儿子辈元素 是B的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>
    <style>
        .box>.show{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p>p2</p>
        <span>span1</span>
        <ul class="box">
            <li>111</li>
            <li class="show">222</li>
            <li>
                <span class="show"></span>
            </li>
        </ul>
        <ol>
            <li>333</li>
            <li class="show">444</li>
        </ol>
    </div>

</body>
</html>

相邻兄弟选择器：

相邻兄弟选择器使用 + 间隔开 （A+B：在A元素的下边紧贴着A的元素 并且是B 才能被选中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        .outer>.show+span{
            background-color: yellow;
        }
        .outer>.show+p{
            /*选不中状态*/
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>
</body>
</html>

通用兄弟选择器：

相邻兄弟选择器使用 ~ 间隔开 （A~B：在A元素的下边兄弟元素 并且是B 就能被选中）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟选择器</title>
    <style>
        .outer>.show~span{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="outer">
        <span>span0</span>
        <p>p1</p>
        <p class="show">p2</p>
        <span>span1</span>
        <p>p3</p>
        <span>span2</span>
    </div>
</body>
</html>

群组选择器：

  • 将多个选择器使用 ， 隔开 可以同时对多个选择器设置样式
  • 如果多个元素有相同的样式，方法有两种
    • 使用一个共同的类名
    • 使用群组选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群组选择器</title>
    <style>
        /*.con{
            width: 100px;
            height: 100px;
        }*/
        .con1,.con2,.con3,.con4{
            width: 100px;
            height: 100px;
        }
        .con1{

            background-color: red;
        }
        .con2{

            background-color: #c0ff8b;
        }
        .con3{

            background-color: #5e8fff;
        }
        .con4{

            background-color: #ff2a91;
        }

    </style>
</head>
<body>
<ul>
    <li class="con1 con"></li>
    <li class="con2 con"></li>
    <li class="con3 con"></li>
    <li class="con4 con"></li>
</ul>
</body>
</html>

交集选择器

  • “交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        /*
            当我们想要选择： 某一个元素 并且这个元素拥有某个类名的时候

        */
        .list li{
            width: 30px;
            height: 30px;
            border: 1px solid #000;
            margin: 30px;
            border-radius: 50%;
            background-color: pink;
        }
        .list li.active{
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <ul class="list">
            <li></li>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
avatar
文章
阅读
粉丝