CSS中选择器的介绍

最新推荐文章于 2023-05-19 20:55:42 发布

喜欢编程的夏先生

最新推荐文章于 2023-05-19 20:55:42 发布

阅读量623

点赞数

分类专栏：前端文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_39746820/article/details/123812239

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.元素选择器，即直接将元素进行作为选择器来选择。

例如：在HTML页面有p以及div元素，使用元素选择器将其文本颜色值进行改变。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
        
        div {
            color: orange;
        }
    </style>
</head>

<body>
    <p>我是第一个段落</p>
    <p>我是第二个段落</p>
    <p>我是第三个段落</p>
    <p>我是第四个段落</p>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>

效果如下

2.类选择器，给元素标签增加class(类)属性

比如，将所有具有class=“a”的p元素的文本颜色值修改为紫色

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* p {
            color: red;
        }
        
        div {
            color: orange;
        } */
        
        .a {
            color: purple;
        }
    </style>
</head>

<body>
    <p class="a">我是第一个段落</p>
    <p class="a">我是第二个段落</p>
    <p>我是第三个段落</p>
    <p>我是第四个段落</p>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>

3.id选择器，给元素标签添加id属性值，切记id选择器只能给一个标签使用相同的值，就跟我们自己的身份证一样，不能被重复给其他标签使用。

比如，将id值为ab的div的文本颜色修改为蓝色

       
        #ab {
            color: blue;
        }
    </style>
</head>

<body>
    <p class="a">我是第一个段落</p>
    <p class="a">我是第二个段落</p>
    <p>我是第三个段落</p>
    <p>我是第四个段落</p>
    <div id="ab">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>

小结：上面讲到的3个选择器为基本选择器

4.交集选择器，由多个基本选择器构成。语法格式为基本选择器1基本选择器2...

比如将段落（p）中有类属性d的文本颜色修改为粉红色

    p.d {
            color: pink;
        }
    </style>
</head>

<body>
    <p class="a">我是第一个段落</p>
    <p class="a">我是第二个段落</p>
    <p>我是第三个段落</p>
    <p class="d">我是第四个段落</p>

5.并集选择器，语法格式为基本选择器1,基本选择器2,......跟交集选择器不同，这个中间使用逗号隔开

比如，将p以及div的文本颜色修改为 brown

      p,
        div {
            color: brown;
        }
    </style>
</head>

<body>
    <p class="a">我是第一个段落</p>
    <p class="a">我是第二个段落</p>
    <p>我是第三个段落</p>
    <p class="d">我是第四个段落</p>
    <div id="ab">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

6.后代选择器，选择后代的选择器。不管是子元素还是孙子元素只要是后代都会被选中。语法格式：选择器1 选择器2 注意中间是有空格的

 <style>
        p span {
            color: cornflowerblue;
        }
    </style>
</head>

<body>
    <p>
        <span>我是p的子span</span>
        <a href="#"><span>我是p的孙子span</span></a>
    </p>
</body>

7.子选择器，选择亲儿子。只选择儿子，跟其他后代无关。

  <style>
        p>span {
            color: red;
        }
    </style>
</head>

<body>
    <p>
        <span>我是p的子span</span>
        <a href="#"><span>我是p的孙子span</span></a>
    </p>

8.伪类选择器1

  <style>
        /* 对于:link  :visited :hover :active 
        这四个为类选择器一定要按照上面的这个顺序进行编写否则同时使用
        的时候不会生效 */
        
        a:link {
            color: red;
        }
        
        a:visited {
            color: deeppink;
        }
        /* 上面两个为类选择器是仅仅提供给a标签进行使用的 */
        
        a:hover {
            color: purple;
        }
        
        a:active {
            color: yellowgreen;
        }
    </style>
</head>

<body>
    <a href="#">我是没有被点12击过的连接</a>
    <a href="#">我是被点击过12的连接</a>
    <a href="#">我是鼠标被放12在上面</a>
    <a href="#">我是触发了鼠标的点12击，但是还没有离开</a>
</body>

为类选择器2

 <style>
        /* 这个是选择ul中的li且是第一个li的，
        当我们在ul中第一的位置加入span标签的时候这个就不会起作用了 */
        
        ul>li:first-child {
            color: red;
        }
        /* 上面介绍ul中第一的位置如果不是li而是span的话，上面的选择器就会失效
        我们可以使用这个选择器来进行选择，这个就是选择类型 */
        
        ul>li:first-of-type {
            color: blue;
        }
        /* 跟上面一样我们还有下面两个伪类选择器 */
        
        ul>li:last-child {
            color: brown;
        }
        
        ul>li:last-of-type {
            color: yellowgreen;
        }
        /* 我们可以指定第几个，从1开始 */
        
        ul>li:nth-child(1) {
            color: navajowhite;
        }
    </style>
</head>

<body>
    <ul>
        <!-- <span>woshispan</span> -->
        <li>woshi1</li>
        <li>woshi2</li>
        <li>woshi3</li>
        <li>woshi4</li>
        <li>woshi5</li>
        <span>woshispan</span>
    </ul>
</body>

伪类选择器3

<style>
        /* 选择ul后代中有class属性元素 */
        
        ul li[class] {
            color: blue;
        }
        /* 选择ul后代中有class属性且值为man的元素 */
        
        ul li[class="man"] {
            color: red;
        }
        /* 选择ul中后代li但是不包括类属性值为good的 */
        
        ul li:not(.good) {
            color: greenyellow;
        }
    </style>
</head>

<body>
    <ul>
        <!-- <span>woshispan</span> -->
        <li class="man">woshi1</li>
        <li class="good">woshi2</li>
        <li class="good">woshi3</li>
        <li class="man">woshi4</li>
        <li>woshi5</li>
        <!-- <span>woshispan</span> -->
    </ul>
</body>

9.兄弟选择器

   <style>
        /* 选择后面的第一个兄弟节点 */
        /* 这个p后面的第一个兄弟节点就是div其他不好使 */
        
        .pp+div {
            color: red;
        }
        /* 所有的兄弟节点，也是后面的兄弟节点，前面的不会被选择 */
        
        .pp~div {
            color: darkblue;
        }
    </style>
</head>

<body>
    <div>woshidiv</div>
    <p class="pp">woship</p>
    <div>wodhierdiv</div>
    <p>woshierpp</p>
    <div>wodhierdiv</div>
    <p>woshierpp</p>

</body>