CSS写法和常用选择器_css选择器逢三选中。怎么写-CSDN博客

本文链接：https://blog.csdn.net/qq_43751489/article/details/120946762

CSS三种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 
        第二种方式（内部样式表）
            - 将样式编写到head中的style标签里
                然后通过CSS的选择器来选中元素并为其设置各种样式
                可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用
            - 内部样式表更加方便对样式进行复用
            - 问题：
                我们的内部样式表只能对一个网页起作用，
                    它里边的样式不能跨页面进行复用
     -->

    <!-- <style>

        p{
            color: green;
            font-size: 50px;
        }

    </style> -->

    <!-- 
        第三种方式 （外部样式表） 最佳实践
            - 可以将CSS样式编写到一个外部的CSS文件中,
                然后通过link标签来引入外部的CSS文件
            - 外部样式表需要通过link标签进行引入，
                意味着只要想使用这些样式的网页都可以对其进行引用
                使样式可以在不同页面之间进行复用
            - 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，
                从而加快网页的加载速度，提高用户的体验。
     -->
     <link rel="stylesheet" href="./style.css">
</head>
<body>

    <!-- 
        网页分成三个部分：
            结构(HTML)
            表现(CSS)
            行为(JavaScript)
        CSS
            - 层叠样式表
            - 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式
                而最终我们能看到只是网页的最上边一层
            - 总之一句话，CSS用来设置网页中元素的样式    
     -->


     <!-- 
         使用CSS来修改元素的样式

         第一种方式(内联样式，行内样式)：
            - 在标签内部通过style属性来设置元素的样式
            - 问题：
                使用内联样式，样式只能对一个标签生效，
                    如果希望影响到多个元素必须在每一个元素中都复制一遍
                    并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便

            - 注意：开发时绝对不要使用内联样式

      -->
     <!-- <p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>

     <p style="color: red; font-size: 60px;">今天天气真不错！</p> -->

     <p>落霞与孤鹜齐飞，秋水共长天一色</p>

     <p>少小离家老大回，乡音无改鬓毛衰</p>
    
</body>
</html>

CSS常用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 
            将所有的段落设置为红色（字体）

            元素选择器
                作用：根据标签名来选中指定的元素
                语法：标签名{}
                例子：p{}  h1{}  div{}
        */
        /* p{
            color: red;
        }

        h1{
            color: green;
        } */







        /* 
            将儿童相见不相识设置红色


            id选择器
                作用：根据元素的id属性值选中一个元素
                语法：#id属性值{}
                例子：#box{} #red{}  
        */
        /* #red{
            color: red;
        } */








        /*
            将 秋水... 和 落霞... 设置为蓝色
                
            类选择器
                作用：根据元素的class属性值选中一组元素
                语法：.class属性值
        */
        /* .blue{
            color: blue;
        }

        .abc{
            font-size: 20px;
        }
        */





        /* 
            通配选择器
                作用：选中页面中的所有元素
                语法: *
        */
        *{
            color: red;
        }

    
    </style>
</head>

<body>
    <h1 class="blue abc">我是标题</h1>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="red">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <!-- 
        class 是一个标签的属性，它和id类似，不同的是class可以重复使用
            可以通过class属性来为元素分组
            可以同时为一个元素指定多个class属性
    -->
    <p class="blue">秋水共长天一色</p>
    <p class="blue">落霞与孤鹜齐飞</p>


</body>
</html>

复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 将class为red的元素设置为红色（字体） */
        .red{
            color: red;
        }

        /* 将class为red的div字体大小设置为30px */
        /* 
            交集选择器
                作用：选中同时复合多个条件的元素
                语法：选择器1选择器2选择器3选择器n{}
                注意点：
                    交集选择器中如果有元素选择器，必须使用元素选择器开头
        */
        div.red{
            font-size: 30px;
        }
        
        .a.b.c{
            color: blue
        }
        /* div#box1{} 不建议这么写，因为id已经是唯一*/





        /*
            选择器分组（并集选择器）
                作用：同时选择多个选择器对应的元素
                语法：选择器1,选择器2,选择器3,选择器n{}

                #b1,.p1,h1,span,div.red{}
         */
        h1, span{
            color: green
        }




        /*选择类名为all的div包含的所有子元素*/
        div.all *{
            font-size: 50px;
            background-color: palegreen;
        }
        
    </style>
</head>
<body>
    <div class="red">我是div</div>
    
    <p id="red">我是p元素</p>

    <p class="red">我是p元素2</p>

    <div class="red2 a b c">我是div2</div>

    <h1>标题</h1>

    <span>哈哈</span>

    <div class="all">
        <p>1
            <span>234</span>
        </p>
        <p>2</p>
        <p>3</p>
    </div>
    
</body>
</html>

关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
	
        /* 
            为div的子元素span设置一个字体颜色红色
            （为div直接包含的span设置一个字体颜色）

            子元素选择器
                作用：选中指定父元素的指定子元素
                语法：父元素 > 子元素
				box为class
         */
		
        div.box > span{
            color: orange;
        }



        /* 
            后代元素选择器：
                作用：选中指定元素内的指定后代元素
                语法：祖先 后代
         */
         div h1{
             color: skyblue;
             font: 900;
         }



         div > p > span{
             color: pink;
         }




         /* 
            选择下一个兄弟
                语法：前一个 + 下一个
            选择下边所有的兄弟
                语法：兄 ~ 弟
          */
          p ~ span{
              color: red;
              font-size: 20px;
          }

          p + span{
              color: blue;
              font-size: 20px;
          }



          /* +\~ 是根据谁写谁的后面，谁就覆盖谁 */
    </style>
</head>
<body>

    <!-- 
        父元素
            - 直接包含子元素的元素叫做父元素
        子元素
            - 直接被父元素包含的元素是子元素
        祖先元素
            - 直接或间接包含后代元素的元素叫做祖先元素
            - 一个元素的父元素也是它的祖先元素
        后代元素
            - 直接或间接被祖先元素包含的元素叫做后代元素
            - 子元素也是后代元素
        兄弟元素
            - 拥有相同父元素的元素是兄弟元素

     -->


    <div class="box">
        我是一个div
        <p>
            我是div中的p元素
            <span>我是p元素中的span</span>
        </p>
        <div></div>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>
        <span>我是div中的span元素</span>

    </div>
    <p></p>
    <span>
        我是div外的span
    </span>
    <div>
        <h1>后代
            <h1>子孙元素</h1>
        </h1>
        <h1>后代</h1>
        <h1>后代</h1>
        <h1>后代</h1>
    </div>
    

    
</body>
</html>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* 
            [属性名] 选择含有指定属性的元素
            [属性名=属性值] 选择含有指定属性和属性值的元素
            [属性名^=属性值] 选择属性值以指定值开头的元素
            [属性名$=属性值] 选择属性值以指定值结尾的元素
            [属性名*=属性值] 选择属性值中含有某值的元素的元素
         */
        /* p[title]{ */
        /* p[title=abc]{ */
        /* p[title^=abc]{ */
        /* p[title$=abc]{ */
        p[title]{
            font-size: 20px;
        }
        p[title*=e]{
            color: orange;
        }
        p[title*=f]{
            color:pink;
        }
        p[title] ~ p{    /* 带有title属性的兄弟p元素 */
            font-size: 20px;
        }
    </style>
</head>
<body>
        <p title="abc">少小离家老大回</p>
        <p title="abcdef">乡音无改鬓毛衰</p>
        <p title="helloabc">儿童相见不相识</p>
        <p>笑问客从何处来</p>
        <p>秋水共长天一色</p>
        <p>落霞与孤鹜齐飞</p>
</body>
</html>

伪类选择器（特殊位置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 
            将ul里的第一个li设置为红色
         */

/* 
        伪类（不存在的类，特殊的类）
            - 伪类用来描述一个元素的特殊状态
                比如：第一个子元素、被点击的元素、鼠标移入的元素...
            - 伪类一般情况下都是使用:开头
                :first-child 第一个子元素
                :last-child 最后一个子元素
                :nth-child() 选中第n个子元素
                    特殊值：
                        n 第n个 n的范围0到正无穷
                        2n 或 even 表示选中偶数位的元素
                        2n+1 或 odd 表示选中奇数位的元素

                    - 以上这些伪类都是根据所有的子元素进行排序

                :first-of-type
                :last-of-type
                :nth-of-type()
                    - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序

            - :not() 否定伪类
                - 将符合条件的元素从选择器中去除
 */
        /* ul > li:first-child{
            color: red;
        } */
    
        /* ul > li:last-child{
            color: red;
        } */

        /* ul > li:nth-child(2n+1){
            color: red;
        } */

        /* ul > li:nth-child(even){
            color: red;
        } */

        /* ul > li:first-of-type{
            color: red;
        } */

        /* ul > li:not(:nth-of-type(3)){
            color: yellowgreen;
        } */

        ol>li:first-child{
            color: red;
        }
        ol>li:last-child{
            color: chartreuse;
        }
        ol>li:nth-child(5){
            color: skyblue;
        }
        ol>li:not(:nth-child(5)){
            font-size: 20px;
        }

        div>p:first-of-type{
            color: skyblue;
        }
        div>p:last-of-type{
            color: pink;
        }
        div>p:nth-of-type(4){
            color: orchid;
        }
        div>p:not(:nth-of-type(4)){
            font-size: 20px;
        }

    </style>
</head>
<body>
    
    <ul>
        <span>我是一个span</span>
        <li>第〇个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
    <ol>
    <ol>
        <span>我是一个span</span>
        <li>第〇个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ol>
<p></p>
    <div>
        <span>我是一个span</span>
        <p>第〇个</p>
        <p>第一个</p>
        <p>第二个</p>
        <p>第三个</p>
        <p>第四个</p>
        <span>我是一个span</span>
    </div>


</body>
</html>