day10 - 选择器和伪类选择器

最新推荐文章于 2022-05-09 21:50:37 发布

闪 | 灵

最新推荐文章于 2022-05-09 21:50:37 发布

阅读量229

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/weixin_44616136/article/details/108388415

版权

html5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

选择器是用来选中指定标签来添加样式
常用的选择器:
1.id选择器: 在标签的id属性值前加#作为一个选择器，选中id属性是指定值的标签。（注意：同一个id值在当前页面中只有一个标签）
#p1{} - 选中id是p1的标签

2.类选择器：在标签的class属性值前加.作为一个选择器，选中class属性是指定值的标签。
.c1{} - 选中class是c1的所有的标签
注意：同一个class可以作用于不同的标签，同一个标签可以同时拥有多个class值（有多个的时候中间用空格隔开）

3.元素选择器：直接将标签名作为选择器，选中当前页面中所有指定的标签
p{} - 选中所有的p标签
div{} - 选中所有的div标签

4.通配符：将*作为选择器, 选中当前页面中的所有的标签

5.群组选择器：将多个其他的选择器有逗号隔开作为一个选择器，选中每个独立的选择器选中所有的标签
p,.c1,#p1{} - 选中所有的p标签和class是c1标签，以及id是p1的标签
a,img{} - 选中所有的图片和超链接

6.后代选择器：将多个选择器用空格隔开作为一个选择器
div p{} - 获取所有是div后代的p标签
div .p1 - 选中div中所有class是p1的标签(div 和 .p1的标签是后代关系)

7.子代选择器：将多个选择器用>隔开作为一个选择器
div>p{} - 选中所有div标签子标签中的p标签
div>.p1{} - 选中所有div标签子标签中class是p1的标签

	<meta charset="utf-8">
	<title></title>
</head>
<body>
    <!-- ============1.id选择器 ============-->
    <!-- <h1 id="title1">id选择器</h1>
    <p id="p1">我是段落1</p>
    <p>我是段落2</p>
    
    <style type="text/css">
        #p1{
            color: #FF69B4;
            font-size: 25px;
        }
        #title1{
            color: #8B008B;
            width: 200px;
            background-color: yellow;
        }
    </style> -->
    
    
    <!-- ============2.class和元素选择器 ============-->
    <!-- <h1 class="c1">class选择器</h1>
    <p class="c1">我是段落1</p>
    <p class="c2">我是段落2</p>
    <p class="c1">我是段落3</p>
    <a class="c1 c2" href="">我是超链接1</a>
    <a class="c2" href="">我是超链接2</a>
    
    <style type="text/css">
        /* 元素选择器 */
        p{
            color: red;
        }
        
        /* class选择器 */
        .c1{
            background-color: seagreen;
        }
        
        .c2{
            font-size: 25px;
        }
        
        /* 通配符 */
        *{
            border: 1px solid firebrick;
        }
        
    </style> -->
    
    
    <!-- ============3.群组选择器 ============-->
    <!-- <h1 class="c1">class选择器</h1>
    <p class="c1">我是段落1</p>
    <p class="c2">我是段落2</p>
    <p class="c1">我是段落3</p>
    <a class="c1 c2" href="">我是超链接1</a>
    <a class="c2" href="">我是超链接2</a>
    <style type="text/css">
        p,a{
            color: red;
        }
        h1,.c2{
            background-color: yellow;
        }
    </style> -->
    
    <!-- ============4.后代选择器 ============-->
    <p>我是段落1</p>
    <div id="">
        <p>我是段落2</p>
        <span>
            <p>我是段落3</p>
        </span>
        <a href="">我是超链接1</a>
    </div>
    <div id="">
        <p>我是段落4</p>
        <div id="">
            <p>我是段落5</p>
        </div>
    </div>
    
    <style type="text/css">
        /* 后代选择器 */
        div p{
            color: red;
        }
        /* 子代选择器 */
        div>p{
            background-color: skyblue;
        }
    </style>

伪类选择器

什么是伪类选择器
普通选择器选中的是标签（选中一个标签的所有状态）
伪类选择器选中的是标签的状态

语法：
选择标签的选择器:伪类选择器{}

常用的伪类选择器：
1）link - 链接未被成功访问对应的状态（只针对超链接有效）
2) visited - 链接已经被成功访问对应的状态（只针对超链接有效）
3) hover - 鼠标悬停在标签上对应的状态（针对所有可见标签有效）
4) active - 鼠标按住标签不放对应的状态（针对所有可见标签有效）
–>

我是超链接1

    <style type="text/css">
        a:link{
            color: red;
        }
        
        a:visited{
            color: green;
        }
        
        a:hover{
            color: #0000FF;
            font-size: 30px;
        }
        a:active{
            color: #FF69B4;
        }
    </style>
    
    
    <div id="div1" style="width: 100px; height: 100px;"></div>
    <style type="text/css">
        #div1{
            background-color: #008000;
        }
        #div1:hover{
            background-color: aqua;
        }
        #div1:active{
            background-color: #8B008B;
        }
    </style>

闪 | 灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day10 - 选择器和伪类选择器

选择器是用来选中指定标签来添加样式常用的选择器:1.id选择器: 在标签的id属性值前加#作为一个选择器，选中id属性是指定值的标签。（注意：同一个id值在当前页面中只有一个标签）#p1{} - 选中id是p1的标签2.类选择器：在标签的class属性值前加.作为一个选择器，选中class属性是指定值的标签。.c1{} - 选中class是c1的所有的标签注意：同一个class可以作用于不同的标签，同一个标签可以同时拥有多个class值（有多个的时候中间用空格隔开）3.元素选择器：直接
复制链接

扫一扫