119 CSS及其选择器

最新推荐文章于 2024-09-05 22:06:38 发布

Pinkman2k

最新推荐文章于 2024-09-05 22:06:38 发布

阅读量771

点赞数

本文链接：https://blog.csdn.net/qq_40808228/article/details/108626426

版权

0 文本样式的4种导入方式：

https://www.cnblogs.com/linhaifeng/articles/9004021.html#_label3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    嵌入式-->
    <style>
        p{
            color: red;
            font-size: 30px;
        }
    </style>
<!--    导入式：不是所有浏览器都支持-->
    <style>
        @import url(a.css);
    </style>

<!--    外联式-->
    <link rel="stylesheet" href="a.css">

</head>

<body>
<p>
    嵌入式样式
</p>

<p>
    外链式
</p>
<!--行内式（内联式）-->
<p style="color: #5a42ff; font-size: 30px">
    你好！
</p>

<p id="p2">p2</p>
<p class="p3">p3</p>

</body>
</html>

https://www.cnblogs.com/linhaifeng/articles/9005117.html

1 基本选择器和组合选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*=======基本选择器=======*/
        /*标签选择器*/
        p{
            color: lightgrey;
        }
        
        /*id选择器*/
        #p2{
            color: red;
        }

        /*类选择器*/
        .p1{
            color: red;
        }
        .p2{
            font-size: 50px;
        }
        .p3{
            text-decoration: underline;
        }

        /*=======组合选择器=====*/
        /*后代选择器：后代中的子子孙孙*/
        div p{
            color: yellowgreen;
        }
        /*儿子选择器：只要儿子不要孙子*/
        div>p{
            color: yellowgreen;
        }

        /*毗邻选择器：相邻的兄弟，不能被隔开*/
        div+p{
            color: yellowgreen;
        }

        /*兄弟选择器：隔开也可以*/
        div～p{
            color: yellowgreen;
        }

        /*交集选择器，没有连接符号，实际上和.part1效果一样*/
        p.part1{
            color: lightgrey;
        }
        /*并集选择器，用逗号隔开*/
        h3,h4{
            color: green;
            text-decoration: underline;
        }

    </style>
</head>
<body>
<p id="p2">我的id是p2</p>
<p class="p1 p3">我属于类p1p3</p>
<p class="p2 p3">我属于类p2p3</p>
<p class="p1 p2">我属于类p1p2</p>
<p></p>
<ul>
    <li>
        <p>嘻嘻</p>
    </li>
    <li>
        <p>嘻嘻</p>
    </li>
    <li>
        <p>嘻嘻</p>
    </li>
</ul>
<p class="part1">我是p的part1</p>

<h3>我是h3！</h3>
<h4>我是h4！</h4>
</body>
</html>

2 序列选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*同级别的第一个，这个类型是p*/
        p:first-child{
            color:red;
        }
        /*同级别的最后一个，这个类型是p*/
        p:last-child{
            color: green;
        }
        /*同级别的第n个，这个类型是p*/
        p:nth-child(3){
            color: blue;
        }
        /*同类型的第一个*/
        h1:first-of-type{
            color: #5a42ff;
        }
        h1:last-of-type{
            color: aquamarine;
        }
        /*只有一个孩子，孩子类型是p*/
        p:only-child{
            color: gold;
        }
        /*同级别只有一个类型p*/
        p:only-of-type{
            color: gold;
        }
    </style>
</head>
<body>
<p>我是第1行p</p>
<h1>我是第1行h1</h1>
<p>我是第2行p</p>
<h1>我是第二行h2</h1>
<p>我是第3行p</p>
<p>我是第4行p</p>
<p>我是第5行p</p>
<p>我是第6行p</p>



</body>
</html>

3 属性选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [id]{
            color: gold;
        }
        [class*="part"] {
            color: #5a42ff;
        }
        a[href^="127"]{
            color: aquamarine;
        }

        a[href$=".com"]{
            color: red;
        }
        input[type='text']{
            color: rebeccapurple;
            background-color: antiquewhite;
        }

    </style>

</head>
<body>
    <h1 id="id1">哈哈啊</h1>
    <p id="id2">我是段落</p>
    <p class="part1">我是段落</p>
    <p class="xxx part2 yyy">我是段落</p>
    <a href="#">我是我</a>
    <a href="127.0.0.1">127xxxx</a>
    <a href="http://www.b.com">http://www.baidu.com</a>
    <a href="https://www.bdu.com">https://www.baidu.com</a>
    <img src="1.png" alt="">
    <img src="2.jpg" alt="">
    <p>我是段落</p>
    <p>我是段落</p>
    <input type="text">
</body>
</html>

4 伪类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*初始状态*/
        a:link {
            color: red;
        }
        /*悬浮状态*/
        a:hover{
            color: green;

        }
        /*按住状态*/
        a:active{
            color: violet;
        }
        /*浏览过的状态*/
        a:visited{
            color: rebeccapurple;
        }

        input:focus{
            font;
            background-color: violet;
            outline: none;
        }

    </style>
</head>

<body>
<a href="www.sss.com">www.sss.com</a>
<br>
<input type="text">
</body>
</html>

5 伪元素选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter{
            font-size: 50px;
        }

        /*在前面加东西*/
        p:before{
            content: ">>>";
            color: violet;
        }
        /*在后面面加东西*/
        p:after{
            content: "<<<";
            color: darkcyan;
        }
    </style>
</head>
<body>
<p>
    需要你，我是一只鱼
</p>

</body>
</html>