【静态页面架构】CSS之选择器

CSS架构

基本选择器

元素选择器:通过元素名称定位页面元素
类选择器:通过元素的class属性定位页面元素
ID选择器:通过元素的ID属性定位页面元素;id属性必须是唯一的
通配符选择器:匹配当前页面中所有元素

<style>
    p{
        color: #2196f3;
    }
    /*元素选择器
    通过元素名称定位页面元素
    *  定位页面中一类元素*/
    #h2{
        color: #e53935;
    }
        /*id选择器
        通过元素的ID属性定位页面元素
      * 特点 - 由于元素的id属性必须是唯一的，定位的元素也是唯一的*/
     .div{
         color: green;
     }
        /*类选择器 通过元素的class属性定位页面元素*/
     *{
         color: #ff6700;
     }
        /*通配符选择器
        匹配当前页面中所有元素
         * 用法 用于定义基础样式
         * 问题 可能影响页面的加载速度*/
    </style>
</head>
<body>
<p>爱新觉罗</p>
<h2 id="h2">呼延觉罗</h2>
<div class="div">犬夜叉</div>
</body>

层级选择器

后代选择器: 祖先空格后代 { 声明块 }后代元素包括父级元素
子选择器:父级 > 子级 { 声明块 }下一个子级元素一类
相邻兄弟选择器:匹配指定元素的下一个相邻兄弟元素
普通兄弟选择器:匹配指定元素的后面所有兄弟元素

    <style>
        #qyc h3{
            color: green;
        }
        /*
               后代选择器
               * 用法 - 祖先 空格 后代 { 声明块 }
            */
        div > h3{
            color: #e53935;
        }
        /*
                子选择器
                * 用法 - 父级 > 子级 { 声明块 }
             */
        #qyc + h3{
            color: #2196f3;
        }
        /*
                相邻兄弟选择器
                * 作用 - 匹配指定元素的下一个相邻兄弟元素
             */
        #qyc ~ h3{
            color: yellow;
        }
        /*
               普通兄弟选择器
               * 作用 - 匹配指定元素的后面所有兄弟元素
            */
    </style>
</head>
<body>
   <h3>犬夜叉</h3>
   <div id="qyc">
    <h3>七龙珠</h3>
    九龙珠
   </div>
   <h3>拳皇97</h3>
   <h3>拳皇97</h3>
   <h3>拳皇97</h3>
</body>

属性选择器:

[属性名称]通过属性名称来对属性值的筛选

 <style>

        [name] {
            color: #2196f3;
        }
        /*属性选择器 - [属性名称]
           
           * 注意 - 一般情况下属性选择器配合基本选择器使用*/
        [name=‘p2‘] {
            color: yellow;
        }
        /* [属性名称=属性值] - 属性值与元素中指定属性的值完全一致*/
        [name^=‘p‘] {
            color: #e53935;
        }
        /*[属性名称^=属性值] - 以属性值以什么开始*/
        [name$=‘1‘] {
            color: green;
        }
        /*[属性名称$=属性值] - 以属性值是以什么结束的*/
        [class*=‘l‘] {
            color: #ff6700;
        }
        /*[属性名称*=属性值] - 以属性值包含什么的*/
    </style>
</head>
<body>
<p id="p1" class="cla" >犬夜叉</p>
<p name="p2" class="cla">九龙珠</p>
<p id="p3" name="p31">海贼王</p>
<p id="p4" name="p41" class="cla">木叶村</p>
<h1 class="cla mp cla1">七龙珠</h1>
</body>

组合选择器

并集选择器:中间要以逗号分开

结果是并集

交集选择器:

中间没有逗号分开
结果是交集

<style>

        #p1, .cla {
            color: #2196f3;
        }
        /*多个选择器并用，中间要以逗号分开
        结果是并集*/
        p[name] {
            color: #e53935;
        }
        /*多个选择器并用，中间没有逗号分开
        结果是交集*/
    </style>
</head>
<body>
<p id="p1">犬夜叉</p>
<p name="p2">七龙珠</p>
<p class="cla">海贼王</p>
</body>

伪类:是以在属性名后面加上:hover进行鼠标悬停

<style>
        h2 {
            color: #2196f3;
        }
        /* 通过 :hover 伪类(鼠标悬停) */
        h2:hover {
            color: #e53935;
        }
    </style>
</head>
<body>
<h2>呼延觉罗</h2>
</body>

伪元素

经常用的几种伪元素:
是以p（选择器)::after(伪元素)
before和after:

<style>
        h2 {
            color: #2196f3;
        }
        /* ::before 伪元素 - 为指定元素添加第一个子元素 */
        h2::before {
            content: "<<";/* 内容为 << */
        }
        /* ::after 伪元素 - 为指定元素添加最后一个子元素 */
        h2::after {
            /*
                content属性 - 用于为::before和::after添加指定内容
                * none值 - 表示不添加任何内容
                * normal值 - 类似于none
                * text值 - 表示普通文本内容
                * url值 - 表示引入一个外部资源(比如图片等)
             */
            content: ">>";
        }
        
    </style>
</head>
<body>
<h2>爱新觉罗</h2>
</body>

first-letter:匹配指定元素文本内容中的第一个字母

<style>
        /* ::first-letter 伪元素 - 匹配指定元素文本内容中的第一个字母(汉字) */
        h2::first-letter {
            /*color: #2196f3;*/
            font-size: 48px;/*字体大小*/
        }
    </style>
</head>
<body>
<h2>I Love You.</h2>
<h2>爱新觉罗</h2>
</body>

first-line:匹配指定元素文本内容的第一行文本内容

<style>
        /* ::first-line 伪元素 - 匹配指定元素文本内容的第一行文本内容 */
        p::first-line {
            color: #2196f3;
        }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, accusantium amet at consequatur dolorem eos iure laudantium modi nostrum obcaecati odit pariatur praesentium quisquam recusandae unde. Debitis iste nisi obcaecati!</p>
</body>

selection:匹配指定元素被高亮的文本内容

<style>
        /* ::selection 伪元素 - 匹配指定元素被高亮的文本内容 */
        p::selection {
            color: #e53935;
            background-color: #00FFFF;<!--背景颜色设置-->
        }
    </style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, aspernatur consequatur consequuntur, dolorem doloremque facere id illo incidunt, magnam placeat provident sit suscipit! Cupiditate dolores earum fuga necessitatibus praesentium, ut!</p>
</body>