複雜選擇器1
阿新 • • 發佈：2018-12-26
!-- CSS高階-1
一、複雜選擇器
1、兄弟選擇器
1)相鄰兄弟選擇器
相鄰兄弟選擇器匹配指定元素的相鄰兄弟元素，如果需要選擇緊鄰在某元素的下一個元素，而且二者有相同的父元素，可以使用該選擇器，使用+作為連線符。
2)通用兄弟選擇器
通用兄弟選擇器是匹配某元素後面的所有兄弟元素，使用~作為連線符，也就是說，兩種元素有相同的父元素，但是不必緊鄰
2、屬性選擇器
將元素附帶的屬性用於選擇器中，可以對帶有指定屬性的元素設定樣式
3、偽類選擇器
1）目標偽類
突出顯示活動的html錨點，用於選取當前活動的目標元素，其語法為E:target選擇匹配E的所有元素，其匹配元素被url指向，可以通過超連結處理另一個元素的樣式
2）元素狀態偽類（大多應用在表單元素）
:enabled，匹配每個已啟動的元素
:disabled,匹配每個被禁用的元素
:checked,匹配每個被選中的input元素，注意，只用於單選或複選按鈕
-->
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#name3{
width: 100px;
height: 30px;
border: 1px solid black;
}
a+img{
width: 100px;
height: 100px;
border: 1px solid black;
}
a~p{
width: 100px;
height: 30px;
background: gray;
}
/*//屬性選擇器，附帶id屬性的元素*/
[id]{
width: 200px;
height: 30px;
background: red;
}
/*div中包含id屬性的元素*/
div[id]{
}
/*包含id屬性和class屬性的div*/
div[id][class]{
}
/*附帶id屬性且值為d1的div元素*/
div[id="d1"]{
}
/*帶有class屬性，且class包含c1單詞，也就是說class的值是以空格隔開的單詞列表*/
div[class~="c1"]
{
}
/*class的值以a開頭的div元素*/
div[class^="a"]{
}
/*class值包含a*/
div[class*="a"]{
}
/*class的值以a開頭的div元素a結尾 */
div[class$="a"]{
}
p:target{
width: 300px;
height: 50px;
border: 1px solid black;
}
#name3:target{
width: 300px;
height: 50px;
border: 1px solid black;
}
input:enabled{
font-size: 20px;
}
input:disabled{
background: gray;
color: white;
}
input:checked{
width: 100px;
}
</style>
</head>
<body>
<div>
<a href="">超連結</a>
<img src="">
<img src="" id="i1">
<p></p>
<b></b>
<p></p>
<div id="d1"></div>
<div class="c1 c3"></div>
</div>
<div>
<p></p>
</div>
<a href="#name6">錨點一</a>
<p id="name6"></p>
<a href="#name3">毛墊</a>
<div id="name3"></div>
<input type="text" disabled="disabled"value="12345"><br>
<input type="text" value="123">
<br>
<input type="radio" name="r1">按鈕1
<input type="radio" name="r1" checked="checked" vlaue="0" id="dd1"><label for="dd1">按鈕</label>
</body>
</html>
一、複雜選擇器
1、兄弟選擇器
1)相鄰兄弟選擇器
相鄰兄弟選擇器匹配指定元素的相鄰兄弟元素，如果需要選擇緊鄰在某元素的下一個元素，而且二者有相同的父元素，可以使用該選擇器，使用+作為連線符。
2)通用兄弟選擇器
通用兄弟選擇器是匹配某元素後面的所有兄弟元素，使用~作為連線符，也就是說，兩種元素有相同的父元素，但是不必緊鄰
2、屬性選擇器
將元素附帶的屬性用於選擇器中，可以對帶有指定屬性的元素設定樣式
3、偽類選擇器
1）目標偽類
突出顯示活動的html錨點，用於選取當前活動的目標元素，其語法為E:target選擇匹配E的所有元素，其匹配元素被url指向，可以通過超連結處理另一個元素的樣式
2）元素狀態偽類（大多應用在表單元素）
:enabled，匹配每個已啟動的元素
:disabled,匹配每個被禁用的元素
:checked,匹配每個被選中的input元素，注意，只用於單選或複選按鈕
-->
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#name3{
width: 100px;
height: 30px;
border: 1px solid black;
}
a+img{
width: 100px;
height: 100px;
border: 1px solid black;
}
a~p{
width: 100px;
height: 30px;
background: gray;
}
/*//屬性選擇器，附帶id屬性的元素*/
[id]{
width: 200px;
height: 30px;
background: red;
}
/*div中包含id屬性的元素*/
div[id]{
}
/*包含id屬性和class屬性的div*/
div[id][class]{
}
/*附帶id屬性且值為d1的div元素*/
div[id="d1"]{
}
/*帶有class屬性，且class包含c1單詞，也就是說class的值是以空格隔開的單詞列表*/
div[class~="c1"]
{
}
/*class的值以a開頭的div元素*/
div[class^="a"]{
}
/*class值包含a*/
div[class*="a"]{
}
/*class的值以a開頭的div元素a結尾 */
div[class$="a"]{
}
p:target{
width: 300px;
height: 50px;
border: 1px solid black;
}
#name3:target{
width: 300px;
height: 50px;
border: 1px solid black;
}
input:enabled{
font-size: 20px;
}
input:disabled{
background: gray;
color: white;
}
input:checked{
width: 100px;
}
</style>
</head>
<body>
<div>
<a href="">超連結</a>
<img src="">
<img src="" id="i1">
<p></p>
<b></b>
<p></p>
<div id="d1"></div>
<div class="c1 c3"></div>
</div>
<div>
<p></p>
</div>
<a href="#name6">錨點一</a>
<p id="name6"></p>
<a href="#name3">毛墊</a>
<div id="name3"></div>
<input type="text" disabled="disabled"value="12345"><br>
<input type="text" value="123">
<br>
<input type="radio" name="r1">按鈕1
<input type="radio" name="r1" checked="checked" vlaue="0" id="dd1"><label for="dd1">按鈕</label>
</body>
</html>