学习混合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;
}
结果：
image.png
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>
结果：
image.png
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>
结果：
image.png
由上可看出，只限定了特殊属性值
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>
结果：
image.png
由上可看出，只有属性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>
结果：
image.png
由上可看出，改动加了"~"后，只要包含"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;
}
结果：
image.png
针对子标签的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;
}
结果：
image.png
跟后代选择器有点相像
相邻兄弟选择器（使用不多）
可选择紧接在另一个元素后的元素，且二者有相同父元素
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;
}
结果：
image.png
都有共同的父元素ul，第一个li的标签都将改变颜色和字号
网友评论