學(xué)習(xí)混合app開發(fā)暂筝，要學(xué)會(huì)一些基礎(chǔ)才能上手。本文主要介紹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;
}
結(jié)果：
2蛤奢、類選擇器和ID選擇器區(qū)別：
ID只能在文檔中使用一次，而類可以多次使用
ID選擇器不能結(jié)合使用
當(dāng)使用js時(shí)候陶贼，需要用到id
屬性選擇器
1啤贩、簡(jiǎn)單屬性選擇：
<!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>
結(jié)果：
2、根據(jù)具體屬性值選擇：
除了選擇擁有某些的元素拜秧，還可以進(jìn)一步縮小選擇范圍痹屹，只選擇特定屬性值的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<!--<link href="style.css" type="text/css" rel="stylesheet">-->
<style>
a[]{
color: darkgreen;
font-size: 30px;
}
</style>
</head>
<body>
<a >百度搜索</a>
<a >新浪網(wǎng)</a>
</body>
</html>
結(jié)果：
由上可看出，只限定了特殊屬性值
http://www.baidu.com為深綠色和字號(hào)30px,其他屬性值無反應(yīng)
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>
結(jié)果：
由上可看出痢掠，只有屬性title的屬性值為
title="title"才為紅色
4、根據(jù)部分屬性選擇
在上面3的例子稍微改動(dòng)嘲恍，把
[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>
結(jié)果：
由上可看出足画，改動(dòng)加了"~"后，只要包含"title"即可生效
后代選擇器(針對(duì)子標(biāo)簽)
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;
}
結(jié)果：
針對(duì)子標(biāo)簽的strong標(biāo)簽里面的文字進(jìn)行改變佃牛，用于著重特殊字符
子元素選擇器
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;
}
結(jié)果：
跟后代選擇器有點(diǎn)相像
相鄰兄弟選擇器（使用不多）
可選擇緊接在另一個(gè)元素后的元素象缀，且二者有相同父元素
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;
}
結(jié)果：
都有共同的父元素ul，第一個(gè)li的標(biāo)簽都將改變顏色和字號(hào)
