Hybird-App之选择器详解(二)

最新推荐文章于 2024-01-24 16:12:07 发布

Dwyane_Coding

最新推荐文章于 2024-01-24 16:12:07 发布

阅读量360

点赞数

分类专栏： iOS知识笔记文章标签：前端 ios 混合开发 android

本文链接：https://blog.csdn.net/wojiaoweide/article/details/78946942

版权

iOS知识笔记专栏收录该内容

54 篇文章 0 订阅

订阅专栏

Hybird App之选择器详解(一)

学习混合app开发，要学会一些基础才能上手。本文主要介绍ID选择器、属性选择器、后代选择器、子元素选择器，其中ID选择器和属性选择器较为常用

ID选择器详解

1、ID选择器：

ID选择器类似于类选择器；不过也有一些重要差别
例如： #id{}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div id="div">你好！Dwyane</div>-
</body>
</html>

style.css

#div{
    color:blue;
}

结果：

2、类选择器和ID选择器区别：

ID只能在文档中使用一次，而类可以多次使用
ID选择器不能结合使用
当使用js时候，需要用到id

属性选择器

1、简单属性选择：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        [title]{
            color: red;
        }
    </style>
</head>
<body>
    <p title="title">属性选择器</p>
</body>
</html>

结果：

2、根据具体属性值选择：
除了选择拥有某些的元素，还可以进一步缩小选择范围，只选择特定属性值的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--<link href="style.css" type="text/css" rel="stylesheet">-->
    <style>
        a[href="http://www.baidu.com"]{
            color: darkgreen;
            font-size: 30px;
        }
    </style>

</head>
<body>
    <a href="http://www.baidu.com">百度搜索</a>
    <a href="http://www.sina.com.cn">新浪网</a>
</body>
</html>

结果：

由上可看出，只限定了特殊属性值 http://www.baidu.com为深绿色和字号30px,其他属性值无反应

3、属性和属性值必须完全匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--<link href="style.css" type="text/css" rel="stylesheet">-->
    <style>
        [title="title"]{
            color: red;
        }
    </style>

</head>
<body>
    <p title="title">属性选择器</p>
    <p title="t">属性选择器2</p>
</body>
</html>

结果：

由上可看出，只有属性title的属性值为title="title"才为红色

4、根据部分属性选择
在上面3的例子稍微改动，把

[title="title"]{
            color: red;
        }

改为(title后加上’~’)

[title~="title"]{
            color: red;
        }

完整例子为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <!--<link href="style.css" type="text/css" rel="stylesheet">-->
    <style>
        [title~="title"]{
            color: red;
        }
    </style>
</head>
<body>
    <p title="title">属性选择器</p>
    <p title="t">属性选择器2</p>
    <p title="title html">属性选择器3</p>
</body>
</html>

结果：

由上可看出，改动加了”~”后，只要包含”title”即可生效

后代选择器(针对子标签)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p>This is my <strong>web</strong> page</p>
</body>
</html>

style.css

p strong{
    color: orangered;
}

结果：

针对子标签的strong标签里面的文字进行改变，用于着重特殊字符

子元素选择器

1、与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素
例如：h1>strong{};
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1>你好！<strong>hybird app</strong> 我来了</h1>
</body>
</html>

style.css

h1 > strong{
    color: blue;
    font-size: 50px;
}

结果：

跟后代选择器有点相像

相邻兄弟选择器（使用不多）

可选择紧接在另一个元素后的元素，且二者有相同父元素
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
</body>
</html>

style.css

li+li{
    color: blue;
    font-size: 30px;
}

结果：

都有共同的父元素ul，第一个li的标签都将改变颜色和字号

总结：大家主要熟悉常用的类选择器、ID选择器、属性选择选择器、元素选择器，其余选择器作为理解即可

Dwyane_Coding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Hybird-App之选择器详解(二)

Hybird App之选择器详解(一) 学习混合app开发，要学会一些基础才能上手。本文主要介绍ID选择器、属性选择器、后代选择器、子元素选择器，其中ID选择器和属性选择器较为常用ID选择器详解1、ID选择器： ID选择器类似于类选择器；不过也有一些重要差别例如： #id{}index.html<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫