CSS3各种类型的选择器总结

最新推荐文章于 2022-06-03 16:57:07 发布

小张同学该努力了

最新推荐文章于 2022-06-03 16:57:07 发布

阅读量186

点赞数

分类专栏： web开发文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_43716830/article/details/112547838

版权

web开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

在这里插入图片描述
内嵌样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式</title>
</head>
<body>
<p>I love CSS.</p>
<p style="color: red;font-size:14px;">I love HTML.</p>
<p>I <span style="border: 2px black dashed; padding: 5px;">love</span> FishC.</p>
</body>
</html>

在这里插入图片描述
内嵌样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式表</title>
    <style>
        h1{color: red;}
        p{color:green;font-size: 14px;}
        a{color: #ee82ee;border: 2px blue dashed;padding: 5px}
    </style>
</head>
<body>
<p>I love CSS.</p>
<p> I love HTML.></p>
<p>I love FishC.</p>
    <a href="https://ilovefishc.com/books" target="_blank">快点开，里面有好东西！</a>
</body>
</html>

在这里插入图片描述

各类选择器的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式表</title>
    <style type="text/css">
       *{
           padding: 10px;
           background-color: #D1FEFF;
       }
        h2{
            text-align: center;
        }
        p{
            text-indent: 2em;
        }
        span{
            color: gray;
        }
        img{
            width: 212px;
        }
        .first{
            text-align: center;
            color: #2ebb96;
        }
        #ol{
            color: red;
        }
    </style>
</head>
<body>
<h2>这是题目</h2>
<p class="first">1.假装这里有内容</p>
<p>2.假装这里有内容</p>
<p>3.假装<span>这里</span>有内容</p>
<p>4.假装<span id="ol">这里</span>有内容</p>
<p>5.假装这里有内容</p>
<p>6.假装这里有内容</p>
<img src="resources/background.png">
<img src="resources/background.png">
<img src="resources/background.png">
<img src="resources/background.png">
<img src="resources/background.png">
<img src="resources/background.png">
</body>
</html>

其他选择器：

交集选择器：<span class="first"></span>   span.first{}
并集选择器：h2,p,span{}
后代选择器: body .first{}  后代所有有first属性的都被选中
子元素选择器：body > .first{}

伪元素选择器：

::first-line选择器:仅对块级元素内的第一行内容有效，而对于像a元素这类行内元素，不起作用 p::first-line只对p元素的第一行有效果

::first-letter选择器：仅对块级元素内的第一个字符有效，用法与::first-line相同

::before和::after选择器:在元素的前面或后面分别插入文本，例如：a::before{content:"文本"} a::after{content:"文本"}在a元素前后边插入文本
a::before{content:url(图片路径)} a::after{content:url(图片路径)}在a元素前后插入图片

::selection选择器:对鼠标选中内容进行配置

伪类选择器：
在这里插入图片描述
动态伪类选择器：

    a:link{
        color: pink;
    }
    /*链接未被访问过时*/
    a:visited{
        color: red;
    }
    /*链接被访问过时*/
    a:hover{
        color: black;
    }
    /*鼠标悬停在链接上方的时候*/
    a:active {
        color: green;
    }
    /*鼠标按下链接得那一刻*/
    input#gril:focus{
    background-color: pink; 
    }
    /*当元素获得焦点时*/

UI伪类选择器：

             :enabled{
           outline: 1px solid green;
        }
        :disabled{
           background-color: #dddddd;
        }
        /*可用的元素边框变绿，不可用的灰化*/
        :checked + span{
            background-color: red;
            color: green;
        }
        /*兄弟选择器并用，设置表单元素的选项被选中时的样式*/
        :required{
            outline: 3px solid red;
        }
        :optional{
            outline: 3px solid green;
        }
        /*必选的画3像素的红色的线，可选的画3像素的绿色的线*/
        :default{
            outline: 3px solid red;
        }
        /*设置默认元素的样式*/
        input:valid{
            border: 2px solid green;
        }
        /*输入合法时画2像素的绿色线*/
        input:invalid{
            border: 2px solid red;
        }
        /*输入不合法时画2像素的红色线*/
        input:in-range{
            border: 2px solid green;
        }
        input:out-of-range{
            border: 2px solid red;
        }
        /*输入在范围之内，超出范围的选项*/
        input:read-only{
            background-color: red;
        }
        input:read-write{
            background-color: yellow;
        }
        /*只读和读写的选项*/

结构伪类选择器：

         :root{
             background-color: red;
         }
        /*根元素的选择器，即背景*/
        :empty{
            width: 20px;
            height: 20px;
            background-color: red;
        }
        /*空元素选择器，例如<p></p>*/
        p:first-child{
            border: 2px solid green;
        }
        /*设置第一个作为子元素的p元素格式 last-child时最后一个 only-child如果是父元素的唯一子元素就被选中，only-of-type唯一类型，first-of-type和last-of-type*/
        p:nth-child(3){
             border: 2px solid green;
        }/*第三个子元素 nth-of-type(rank)*/

其他伪类选择器：

<p id="target1">Target Test.</p>
……
<p><a href="#target1" >Jump to the Target1.</a></p>
/*页面内锚*/

:lang(zh){
background-color: red;
}
:lang(en){
background-color:green;
}
/*为不同语言设置不同颜色*/

:not(span){
     color:red;
}
/*排除span选择*/

属性选择器：
在这里插入图片描述

小张同学该努力了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3各种类型的选择器总结

内嵌样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内联样式</title></head><body><p>I love CSS.</p><p style="color: red;font-size:14px;">I love HTML.</p&gt.
复制链接

扫一扫