无标题html第三话之选择器

Posted 别碰我的宏定义

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无标题html第三话之选择器相关的知识,希望对你有一定的参考价值。

html第三话
1.选择器:根据不同的需求将不同的标签选择出来。简单来说就暗示选择标签用的。示例如下:通过选择器来改变标签属性。

<!DOCTYPE html>
<!--通过改变选择器改变标签属性-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<style>
    /*选择器就是根据不同的需求将不同的标签选择出来。简单来说就暗示选择标签用的*/
   /*标签选择器将同一标签设置为同一种样式*/
   /*可以用 .classname,直接用classname调用即可*/
     p 
        color: green;
    
    div 
        color: pink;
    
    .suibian 
        color: blue;
        font-size: 50px;
    
</style>

<body>
    <p class="suibian">男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
    <ul>
        <li class="suibian">例会</li>
        <li>晚餐</li>
        <li>爱情</li>
        <li>面包</li>
    </ul>
</body>
</html>

2.选择器的分类:标签选择器,id选择器,类选择器,通配符选择器,使用方式如下:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<!--选择器-->
<style>
    /*标签选择器*/
    p

    
    /*类选择器*/
    .red 
        
        background-color: red;
        font-size: 35px;
    
    .green 
        background-color: green;
        font-size: 35px;
    
    .Red 
        color: red;
    
    .fontsize 
        width: 100px;
        height: 100px;
    
    /*id选择器。用#idname定义,在标签里用id = "idname"只能调用,别人切勿使用*/
    #pink 
        color: pink;
    
    /*通配符选择器不需要去调用,自动就给所有的元素添加样式*/
   /*   *

    
       */
</style>
<body>
    <!--多类名就是将多个类名添加给同一个元素用空格隔开隔开-->
    <div class="red fontsize">红色</div>
    <div class="green fontsize">绿色</div>
    <div class="red fontsize">红色</div>
    <div class="Red fontsize">刘德华</div>
    <div id="pink">迈克尔 杰克逊</div>
</body>
</html>

以上是关于无标题html第三话之选择器的主要内容,如果未能解决你的问题,请参考以下文章

无标题html第三话之选择器

selenium+Page Objects(第三话)

贯穿设计模式第三话--依赖倒转原则

Vue实现无限级树形选择器(无第三方依赖)

python走起之第十三话

如何在 Java 中选择撒克逊 TransformerFactory