02CSS选择器

最新推荐文章于 2022-11-18 21:39:05 发布

输出机器

最新推荐文章于 2022-11-18 21:39:05 发布

阅读量55

点赞数

分类专栏： CSS 文章标签： css html css3 开发语言前端

本文链接：https://blog.csdn.net/qq_44974028/article/details/123394999

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS选择器：筛选具有相似特征的元素

分类：

1. 基础选择器

1）. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一

语法：#id属性值{}

2）. 元素选择器：选择具有相同标签名称的元素

语法：标签名称{}

注意：id选择器优先级高于元素选择器

3）. 类选择器：选择具有相同的class属性值的元素。

语法：.class属性值{}

注意：类选择器选择器优先级高于元素选择器

<!DOCTYPE html>
<html>
    <head>
        <title>
            02基础选择器
        </title>
        <style>
            /* id选择器 */
            #myid{
                background-color: rgb(41, 74, 219);
                font-size: 30px;
                text-align: center;
            }
            /* 元素选择器 */
            p{
                text-align: center;
                color: brown;
                font-size: 20px;
            }
            /* 类选择器 */
            .lei{
                color: blueviolet;
                text-align: center;
                border: 12px solid;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        
         <div id="myid">id选择器：选择具体的id属性值的元素</div>
         <p>元素选择器：选择具有相同标签名称的元素</p>
         <p class="lei">类选择器</p>
    
    </body>
</html>

运行结果：

2. 扩展选择器：

1）. 选择所有元素：

语法： *{}

2）. 并集选择器：

选择器1,选择器2{}

3）. 子选择器：筛选选择器1元素下的选择器2元素

语法：选择器1 选择器2{}

4）. 父选择器：筛选选择器2的父元素选择器1

语法：选择器1 > 选择器2{}

5）. 属性选择器：选择元素名称，属性名=属性值的元素

语法：元素名称[属性名="属性值"]{}

6）. 伪类选择器：选择一些元素具有的状态

语法：元素:状态{}

如：超链接标签 <a>

状态：

link：初始化的状态

visited：被访问过的状态

active：正在访问状态

hover：鼠标悬浮状态

<!DOCTYPE html>
<html>
    <head>
        <title>
            02基础选择器
        </title>
        <style>
            /* 1.选择所有元素 */
            *{
                background:rgb(187, 255, 0);
            }
            /* 2.并集选择器 */
            #myid,div,p,ol,.myclass{
                color: rgb(216, 148, 46);
            }
            /* 3.子选择器 */
            ul li{
                font-size: 8px;
                color: aliceblue;
                border: 1px solid;
                text-align: center;
            }
            /* 4.父选择器 */
            tr > td{
                background-color: rgb(228, 30, 30);
                border: 4px solid;
            }
            /* 5.属性选择器 */
            input[type=text]{
                border: 13px solid;
            }
            input[type="password"]{
                border: 3px solid;
            }
            /* 6.伪类选择器 */
            a:link{
                color: rgb(235, 97, 18);
            }
            a:hover{
                color: rgb(252, 248, 11);
            }
            a:active{
                color: rgb(247, 248, 242);
            }
            a:visited{
                color: rgb(247, 11, 255);
            }

        </style>
    </head>
    <body>
        
         <div>并集选择器</div>
         <p>并集选择器</p>
         <b class="myclass">并集选择器</b><br>
         <ol type="A">
             <li>并集选择器</li>
             <li>并集选择器</li>
             <li>并集选择器</li>
         </ol>
         <i id="myid">并集选择器</i>
         <ul>
             <li>子选择器</li>
             <li>子选择器</li>
             <li>子选择器</li>
         </ul>
         <table>
             <tr>
                 <td>父选择器</td>
                 <td>父选择器</td>
                 <td>父选择器</td>
             </tr>
             <tr>
                 <td>父选择器</td>
                 <td>父选择器</td>
                 <td>父选择器</td>
             </tr>
         </table>
        属性选择器<br>
        用户 <input type="text" name="user">
        密码 <input type="password" name="passwd"><br>
        <a href="#">伪类选择器：选择一些元素具有的状态</a>
    
    </body>
</html>

运行结果：

输出机器

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
02CSS选择器

CSS选择器：筛选具有相似特征的元素分类： 1. 基础选择器 1）. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一语法：#id属性值{} 2）. 元素选择器：选择具有相同标签名称的元素语法：标签名称{} 注意：i...
复制链接

扫一扫