CSS选择器

什么是选择器

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

id选择器

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

选择器命名：

  • id就像我们的身份证号，是不允许重复的
  • 并且一个元素只能有一个id属性
  • id命名规范建议（类名命名方式也适用）
    • id或者class必须以字母开头，不能以数字或者下划线开头
    • 名字不出现汉字
    • 不允许带有广告的英文单词出现：如：ad adv adver advertising (防止浏览器当成垃圾广告处理掉 过滤掉 )
    • 除第一位后边小写字母、数字、连字符（ _ -）
    • 见名知意
    • 不要出现空格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #three{
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li id="three"></li>
        <li></li>
    </ul>
</body>
</html>Copy to clipboardErrorCopied

 

类选择器：

  1. 可以给不同的元素，进行分组。

    所有类名相等的元素，是一组的，可以进行控制样式

  2. 给要被分组的元素设置class属性

    选择器中使用 .+ class属性值 来选择元素

  3. 类不一定多个元素，也可以是一个元素

  4. 一个class可以设置多个类名，但是只能有一个class属性

    一个元素的多个class属性的值可以用空格隔开，就代表书写多个类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        li{
            background-color: red;
        }
        .show{
            background-color: green;
        }

        .active{
            background-color: yellow;
        }
        .con{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="show"></li>
        <li></li>
        <li class="show"></li>
    </ul>
    <div class="active con"></div>
</body>
</html>Copy to clipboardErrorCopied

 

标签名选择器：

  • 通过标签名来选择元素
  • 会选择页面中所有的这个标签的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签名选择器</title>
    <style>
        li{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li id="three"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>Copy to clipboardErrorCopied

 

通配符（*）

  • 通配符使用星号*表示，意思是“所有的”。

  • 在CSS中，同样使用*代表所有的标签或元素，它叫做通配符选择器。

  • 不过，由于*会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用*通配符选择器

    /
    *这里就把所有元素的字体设置为红色*/
*{ color : red; }Copy to clipboardErrorCopied

     

!important 规则

  • !important，作用是提高指定样式规则的应用优先权（优先级）。

  • 语法格式**{ cssRule !important }**，即写在定义的最后面，例如：box{color:red !important;}。

  • 使该条样式属性声明具有最高优先级

    div { color: #f00 !important; }Copy to clipboardErrorCopied

     

基础选择器的优先级

样式来源：

  1. 默认样式
  2. 继承的
  3. 通配符 * 匹配所有元素
  4. 标签名选择器
  5. 类名选择器
  6. id名选择器
  7. 行内书写
  8. !important

多个样式来源的优先级确定

  • !important > 行内书写 > id > 类 > 标签名 > 通配符 > 继承

  • !important > 行内书写 > id > 类 > 标签名 > 通配符 > 默认

  • 样式继承不是一个默认行为，实际上而是看某一个属性的默认值是否是inherit。所以不比较继承和默认的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>
    <style>
        *{
            margin: 0;
            /*  *>默认样式  */
            color: pink;
        }
        p{
            margin: 10px;
            /*标签名选择器 >  通配符**/

            /*!important书写在某个样式的后边
            这条样式无论写在哪一个选择器中，这条样式永远优先级最大*/
            margin: 100px !important;

            /*color: green;*/
        }

        .con{
            margin: 20px;
            /*类名选择器>标签名选择器*/
        }
        #box{
            margin: 30px;
            /*id选择器>类名选择器*/

            /*行内书写>id选择器*/
        }

        div{
            color: red;
            font-style: normal;
        }
    </style>
</head>
<body>
    <div>
        我是div
        <p id="box" class="con" style="margin: 50px;">我是p标签</p>
        <i>hellow</i>
    </div>
</body>
</html>

 

posted @ 2023-01-09 23:03  z_bky  阅读(32)  评论(0)    收藏  举报