CSS选择器

最新推荐文章于 2024-07-06 14:50:23 发布

Cmaningyuan

最新推荐文章于 2024-07-06 14:50:23 发布

阅读量36

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/Cmaningyuan/article/details/131639940

版权

CSS选择器

元素选择器

元素选择器会选择所有指定类型的元素。

        p{
            color: aqua;
        }   //元素选择器（选中所有的p标签）


        div{
            font-size: 40px;
        }   //选中所有的div

另外，由于<html>是整个页面的父元素，所以如果要它里面的所有元素都继承相同的样式，那么可以这么做：

html {

}

id选择器

id选择器只会选择具有指定id、指定类型的元素（单一HTML页面中，每个ID只对应一个元素）。

       #wang{
            color: blueviolet;
        }    //id选择器

如果遵循上述规则，那么会匹配下面元素：

<p id="wang"></p>
<a id="wang"></a>   //这两者不可同时在一个html页面中存在。

类选择器

类选择器会匹配具有特定类的元素（单一页面中，一个类可以有多个实例）

        .level2{
            width: 300px;
            height: 300px;
            background-color: blue;
        }    //类选择器

如果遵循上述规则，那么会匹配下面的元素：

<p class="level2"></p>
<a class="level2"></a>   //这两者可以同时存在

通配符选择器

通配符选择器匹配所有的元素。

* {
    color: red;
  }

包含选择器

子代选择器是针对列表的。可以只匹配子代，也可以匹配所有的后代。

注意，子代选择器要与class类型名连用

如果只匹配子代，则需要使用>

        .a>li{
            background-color: aqua;
        }    //只匹配子代

    <ul class="a">
        <li>words</li>   //子代
        <li>words</li>   //子代
            <ul>
                <li>technologists</li>   //非子代
                <li>thinkers</li>        //非子代
                <li>builders</li>        //非子代
            </ul>
    </ul>

如果将<删去，那么此时就会匹配所有后代。

     .a li{
            color: brown;
        }      //匹配所有后代（包括亲生和派生）

直接使用<ul>也可以达到同样的效果：

        ul{
            color: brown;
        }      //匹配所有后代（包括亲生和派生）

属性选择器

属性选择器会匹配具有特定属性的元素。

div[id]                   //匹配具有id的<div>元素
input[type="password"]    //匹配type值等于password的input
input[type^="te"]         //匹配type值以"te"字符开头的input
input[type$="l"]          //匹配type值以"l"字符结尾的input
input[type*="e"]          //匹配type值含有"e"字符的input

伪类选择器

        a:hover{
            font-size: 40px;  //鼠标悬停时的效果
            cursor: cell;
        }

        a:visited{
            color:brown;
        }

        a:link{
            color:chartreuse;
        }

        a:active{
            font: size 70px;
        }

结构伪类选择器

    父元素 子元素:nth-child{
    
    }      //匹配父元素中第n个子元素

    <style>
        ul li:first-child{
            background-color: pink;
        }

        ul li:last-child{
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>

        ul li:nth-child(4){          //匹配父元素中的第4个子元素。
            background-color: aqua;
        }

        ul li:nth-child(2n){
            background-color: aqua;  //使用even也可以达到同样的效果
        }

        ul li:nth-child(odd){
            background-color: aqua;  //使用2n - 1也可以达到同样的效果
        }

    <style>
        ul li:nth-of-type(4){
            background-color: brown;    //匹配第四个<li>子元素。
        }
        ul li:nth-child(4){
            background-color: blue;    //匹配第四个子元素（<p>也是<ul>的子元素）。
        }

    </style>
</head>
<body>
    <ul>
        <p>I am text.</p>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

注意两者的区别：nth-child是在所有子元素中匹配；而nth-od-type只在<li>子元素中匹配。

        ul li{
            height:30px;
            list-style: none;   //去掉默认样式
            list-style: circle; //重置样式
        }

伪元素选择器

        ul li::before{
            content: "~";
        }

尽管原本的<li>中并没有~前缀，但是依然可以通过伪元素选择器来添加类似元素的内容。

   input::placeholder{
            color: red;
        }

<form>
        <input type="text" name="dsf" id="" placeholder="default">
    </form>

如果要对行内元素设置宽、高，则需要将其转换为行内块元素。

        span {
            width: 300px;
            height: 300px;
            display: inline-block;   //展示为行内块元素
            background-color: aqua;
        }

display:block;   //转换为块元素           
display:none;    //隐藏元素属性（脱离文档流）

color=“blue”>转换为行内块元素。

        span {
            width: 300px;
            height: 300px;
            display: inline-block;   //展示为行内块元素
            background-color: aqua;
        }

display:block;   //转换为块元素           
display:none;    //隐藏元素属性（脱离文档流）

Cmaningyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS选择器

元素选择器会选择所有指定类型的元素。另外，由于<html>是整个页面的父元素，所以如果要它里面的html {
复制链接

扫一扫

CSS选择器

CSS选择器

元素选择器

id选择器

类选择器

通配符选择器

包含选择器

属性选择器

伪类选择器

结构伪类选择器

伪元素选择器

“相关推荐”对你有帮助么？