CSS选择器（基本+复合+伪类）

news2024/11/25 11:54:23

CSS选择器

基本选择器

标签选择器：使用标签名作为选择器->选中同名标签设置样式

类选择器：给类选择器定义一个名字.类名，并给标签添加class="类名"

id选择器：跟类选择器非常相似，给id选择器定义一个名字#id，并给标签添加class="id"

通配符选择器 : *

复合选择器

后代选择器

子代选择器

并集选择器

伪类选择器

超链接状态

:link （点击前的状态）

:visited （点击后的状态）

:hover (鼠标悬停的状态)

:active (点击时的状态)

CSS选择器

作用：查找标签，设置样式

分类：CSS基本选择器和CSS高级选择器（扩展类）

基本选择器

作用：查找元素，对元素进行修饰

分类：标签选择器，类选择器，id选择器，通配符选择器

标签选择器：使用标签名作为选择器->选中同名标签设置样式

<html>
    <head>
        <title>网页标题</title>
        <style>
            div{
                font-size:px
            }
        </style>
    </head>
    <body>

       <div>hello world</div>
     </body>
 </html>

类选择器：给类选择器定义一个名字.类名，并给标签添加class="类名"

作用：为了使相同的标签具有差异化

<html>
    <head>
        <title>网页标题</title>
        <style>
            .green{
                color:green;
            }
        </style>
    </head>
    <body>
       <p class="green">what can i say</p>
     </body>
 </html>

id选择器：跟类选择器非常相似，给id选择器定义一个名字#id，并给标签添加class="id"

<html>
    <head>
        <title>网页标题</title>
        <style>
            #green{
                color:green;
            }
        </style>
    </head>
    <body>
       <p id="green">what can i say</p>
     </body>
 </html>

通配符选择器 : *

作用：查找页面所有标签，设置相同样式

<html>
    <head>
        <title>网页标题</title>
        <style>
            * {
                color:green;
                font-size: 30;
            }
        </style>
    </head>
    <body>
       <p >what can i say</p>
       <p>man<p>
     </body>
 </html>

复合选择器

复合选择器由两个或两个以上的基本选择器组成

作用：可以更加高效，准确的选择目标元素

分类：后代选择器，子选择器，并集选择器

后代选择器

作用：选中某元素的后代元素

选择器写法：父选择器子选择器{CSS属性},父选择器和子选择器之间用空格隔开

选择器会选中选择元素的所有子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div span{
            font-size: 50px;
        }
    </style>
</head>
<body>
    
    <div>
        <span><p>hello world</p></span>
    </div>
    <span><p>hello world</p></span>
</body>
</html>

子代选择器

作用：选中某元素的后代元素

选择器写法：父选择器>子选择器{CSS属性} ，父选择器和子选择器之间用>隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div>p{
            font-size: 50px;
        }
    </style>
</head>
<body>
    
    <div>
        <span>hello world</span>  <!--这里span和p是同级的-->
        <p>你好世界</p>
    </div>
</body>
</html>

由于这里的span和p是同级的，如果用后代选择器的写法span和p里面的字体都会被修改

并集选择器

作用：选中多组标签设置相同的样式

选择器写法：选择器1，选择器2，...,选择器N{CSS属性},选择器之间用,隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         div,
         span,
         p{
            font-size: 50px;
        }
    </style>
</head>
<body>
    
    <div> 你好你好</div>
        <span>hello world</span>  <!--这里span和p是同级的-->
        <p>你好世界</p>

</body>
</html>

伪类选择器

作用：伪类表示元素的状态，选中元素的某个状态设置样式

超链接一共有4个状态：

点击前
点击后
鼠标悬停
点击时

超链接状态

:link （点击前的状态）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
         a:link{
            color:red;
        }
    </style>
</head>
<body>
    
    <div> 你好你好</div>
        <span><p>hello world</p></span>  
       <a href="KD.html">凯文杜兰特</a>
    
</body>
</html>

:visited （点击后的状态）

         a:visited{
            color:red;

:hover (鼠标悬停的状态)

a:hover{
            color:red;

:active (点击时的状态)

 a:active{
            color:red;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1652351.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！