css选择器

最新推荐文章于 2023-02-27 22:00:00 发布

yCodeM

最新推荐文章于 2023-02-27 22:00:00 发布

阅读量282

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_38594777/article/details/87854337

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.标签选择器

通过标签名进行样式修改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标签选择器</title>
        <style type="text/css">
            div {
                color : pink;
            }
        </style>
    </head>
    <body>
        <div>hello world</div>
    </body>
</html>

2.类选择器

通过类名,css样式表中.类名{ 属性：属性值； }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标签选择器</title>
        <style type="text/css">
            .div {
                color : red;
            }
        </style>
    </head>
    <body>
        <div class="div">div1</div>
        <div>div2</div>
        <div class="div">div3</div>
        <div>div4</div>
    </body>
</html>

3.id选择器

通过id，id具有唯一性,css中声明id通过#id名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标签选择器</title>
        <style type="text/css">
            #nav {
                color : yellow;
            }
        </style>
    </head>
    <body>
        <div id="nav">div1</div>
        <div>div2</div>
        <div>div3</div>
        <div>div4</div>
    </body>
</html>

4.后代选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标签选择器</title>
        <style type="text/css">
            ul li {
                color : blue;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>li1</li>
            <li>li2</li>
            <li>li3</li>
        </ul>
    </body>
</html>

注意：父标签后代标签 { 属性：属性值 }

父标签 > 后代标签 { 属性：属性值 }

两者的区别:前者选择父标签的所有后代

后者选择父标签的直系后代标签

5.群组选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标签选择器</title>
        <style type="text/css">
            div,span,p {
                color : yellow;
            }
        </style>
    </head>
    <body>
        <div>div1</div>
        <div>div2</div>
        <span>这是span</span>
        <p>这是p段落</p>
    </body>
</html>

6.通配符选择器

* { 属性：属性值 },通配符选择所有的标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标签选择器</title>
        <style type="text/css">
            *{
                margin : 0;
                padding : 0;    
                color : blue;
            }
        </style>
    </head>
    <body>
        <div>div1</div>
        <div>div2</div>
        <span>这是span</span>
        <p>这是p段落</p>
    </body>
</html>

7.属性选择器

选择标签的属性相应的属性值

[属性=“属性值”]{ 属性：属性值 }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标签选择器</title>
        <style type="text/css">
           [type="text"] {
                background-color : red
            }
        </style>
    </head>
    <body>
       <input type="text"/>
    </body>
</html>

8.伪类选择器

通过标签：状态{ 属性 : 属性值 }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>标签选择器</title>
        <style type="text/css">
           a:hover {
               color : red;
            }
        </style>
    </head>
    <body>
       <a href="#">点我</a>
    </body>
</html>