css选择器的使用

最新推荐文章于 2022-07-12 17:36:21 发布

打豆豆。

最新推荐文章于 2022-07-12 17:36:21 发布

阅读量146

点赞数

分类专栏： css选择器文章标签：选择器

本文链接：https://blog.csdn.net/weixin_42323802/article/details/82765805

版权

css选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

3种基础选择器；

元素，id，类

扩展选择器；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3种选择器</title>
    <style type="text/css">
        /*使用后代选择器 父类选择器加空格
         或者使用 直接后代选择器(直接后代选择器)
         */
        #red > li {
            color: red;
        }
        /*并集选择器*/
        div, span, p {
            color: green;
        }
        /*属性选择器*/
        input[type="password"] {
            background-color: hotpink;
        }
        /*伪类选择器
        适用于a标签的，link ；active 等
        */
        a:link {
            color: red;
        }
        a:visited {
            color: green;
        }
        a:hover {
            color: yellow;
        }
        a:active {
            color: antiquewhite;
        }
    </style>
</head>
<body>
<ul>
    <li>nihao</li>
    <li>nihao</li>
    <li>nihao</li>
</ul>

<ul id="red">
    <li>hello</li>
    <li>hello</li>
    <li>hello</li>
</ul>

<ol>
    <li>hai</li>
    <li>hai</li>
    <li>hai</li>
</ol>

<!--以下是并集选择其使用的-->
<div>jiha</div>
<p>nihaoa</p>
<span>lsdhaflsd</span>
<!--下面是属性使用的-->
<br/>
用户名；<input type="text" name="username" placeholder="请输入用户名">
<br/>
密码；<input type="password" name="password" placeholder="请输入密码">

<!--定义a标签  用于伪类选择器-->
<br/>
<a href="#">点击注册</a>
<input type="text" name="username">

</body>
</html>