Detailed explanation of the selector of Hybird App (1)

Learning to develop hybrid app s requires learning some basics. This paper mainly introduces element selector, selector group and class selector

element selector

The most common selector is the element selector, and the document element is the most basic selector
For example: h1{} a {}
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selector</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p>Hello Dwyane!</p>
</body>
</html>

style.css

p{
    color: green;
}
Selector group
<body>
    <h1>Title 1</h1>
    <h2>Title 2</h2>
</body>

style.css

h1, h2{
    color: green;
}

result:


image.png

In addition, there is a wildcard *, which usually sets the value of margin and padding in the wildcard

*{
    margin: 0px;
    padding: 0px;
}
Class selector

1. Class selectors allow styles to be specified in a document element independent way
For example,. class {}
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selector</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="div">hello,Dwyane</div>
</body>
</html>

style.css

.div{
    color: blue;
}

result:


image.png

2. Combine element selectors: for example: a.class {}
index.html

<body>
    <div class="div">hello,Dwyane</div>
    <a class="div">hello,Dwyane</a>
</body>

style.css

a.div{
    color: blue;
}

Only the div of a tag is specified to change, so the unspecified div will not change
result:


image.png

3. Multiclass selector
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>selector</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p class="p1">this is my web page</p>
    <p class="p2">this is my web page</p>
    <p class="p3">this is my web page</p>
</body>
</html>

style.css

.p1{
    color: blue; //p1 change color
}
.p2{
    font-size: 30px; //p2 change font size
}
.p3{
    font-style: italic; //p3 italics
}

result:


image.png

With multi class selectors, we can
index.html

<body>
    <p class="p1">this is my web page</p>
    <p class="p2">this is my web page</p>
    <p class="p1 p2">this is my web page</p> //p1 p2 is separated by spaces, which inherits the characteristics of the first two class es
</body>

style.css

.p1{
    color: blue; //p1 change color
}
.p2{
    font-size: 30px; //p2 change font size
}
.p1.p2{
    font-style: italic; //p1 p2 italics
}

The effect is the same as above

Posted on Mon, 04 May 2020 16:36:11 -0400 by Jay87