CSS3選擇器新增問題的實現(xiàn)
我要評論基本選擇器擴展
1.子元素選擇器
:tomato: #wrap > .inner {color: pink;} 也可稱為直接后代選擇器,此類選擇器只能匹配到直接后代，不能匹配到深層次的后代元素 總結(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代
2. 相鄰兄弟選擇器
:tomato: #wrap #first + .inner {color: #f00;}它只會匹配緊跟著的兄弟元素
3. 通用兄弟選擇器
:tomato: #wrap #first ~ div { border: 1px solid;}它會匹配第二個元素,條件是它必須跟(不一定是緊跟)在第一個元素之后,且他們都有一個共同的父元素所有的兄弟元素
4. 選擇器分組
:tomato: h1,h2,h3{color: pink;} 此處的逗號我們稱之為結(jié)合符
屬性選擇器
1. 子串值屬性選擇器
:tomato: [attr|=val] : 選擇attr屬性的值是val（包括val）或以val-開頭的元素。
:tomato: [attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。
:tomato: [attr$=val] : 選擇attr屬性的值以val結(jié)尾（包括val）的元素。
:tomato: [attr*=val] : 選擇attr屬性的值中包含字符串val的元素 少數(shù)瀏覽器支持子串選擇元素
2. 存在和值屬性選擇器
:tomato: [attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。[attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。
:tomato: [attr~=val]：表示帶有以 attr 命名的屬性的元素，并且該屬性是一個以空格作為分隔的值列表，其中至少一個值為val。 比如位于被空格分隔的多個類（class）中的一個類。比如name="atguigu_llc atguigu"
:tomato: [name =val]：該選擇器僅選擇 name 屬性被賦值為 val 的所有元素。
偽類與偽元素選擇器
1. 鏈接偽類
:tomato: :link 表示作為超鏈接，并指向一個未訪問的地址的所有錨
:tomato: :visited 表示作為超鏈接，并指向一個已訪問的地址的所有錨
:tomato: :target 代表一個特殊的元素，它的id是URI的片段標(biāo)識符
:exclamation: 注意:link，:visited，:target是作用于鏈接元素的！前兩者只能在a標(biāo)簽上起作用
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 200px;
line-height: 200px;
background: palegreen;
color: hotpink;
text-align: center;
display: none;
}
a:visited{
color:orange;
}
:target{
display: block;
}
2. 動態(tài)偽類
:tomato: :hover表示懸浮到元素上
:tomato: :active表示匹配被用戶激活的元素（點擊按住時）
:tomato:由于a標(biāo)簽的:link和:visited可以覆蓋了所有a標(biāo)簽的狀態(tài)，所以當(dāng):link，:visited，:hover，:active同時出現(xiàn)在a標(biāo)簽身上時 :link和:visited不能放在最后?。?！
:tomato: 隱私與:visited選擇器只有下列的屬性才能被應(yīng)用到已訪問鏈接：color、background-color、border-color
:exclamation: 注意:hover，:active基本可以作用于所有的元素！
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: black;
display: block;
}
a:hover{
font-size:24px;
/*color: red;*/
}
a:link{
font-size:48px;
/*color: pink;*/
}
a:visited{
/*font-size:96px;*/
/*color: deeppink;*/
}
</style>
3. 表單相關(guān)偽類
①:disable 匹配被禁用的表單
②:checked 匹配被選中的表單
③:focus 匹配獲焦的表單
④：enabled匹配可編輯的表單
實操練習(xí)1
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:enabled{
background: skyblue;
}
input:disabled{
background: deeppink;
}
input:checked{
width: 200px;
height: 200px;
}
input:focus{
background: pink;
}
</style>
</head>
<body>
<input type="text" />
<input type="text" disabled="disabled" />
<input type="checkbox" />
<input type="text" />
</body>
實操練習(xí)2 自定義單選按鈕
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
label{
position: relative;
float:left; /*轉(zhuǎn)換為塊級元素?fù)伍_大小*/
width:100px;
height:100px;
border:2px solid;
border-radius: 50%;
overflow:hidden;
}
label > span{
position: absolute;
left:0;
top:0;
bottom:0;
right:0;
}
input{
position: absolute;
left:-50px;
top:-50px;
}
input:checked + span{
background:pink;
}
</style>
</head>
<body>
<label>
<input type="radio" name="rongtuowulian" />
<span></span>
</label>
<label>
<input type="radio" name="rongtuowulian" />
<span></span>
</label>
<label>
<input type="radio" name="rongtuowulian" />
<span></span>
</label>
</body>
4. 偽元素
:tomato: 概念：偽元素表示頁面中一些特殊的并不真實存在的元素（特殊的位置）
:tomato: 語法使用 ：：開頭
:tomato: 類別：①：：first-letter ②::first-line ③::selection ④::before ⑤::after 注意：④和⑤必須結(jié)合content屬性來使用
:tomato: 代碼示例：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible"content="ie=edge" />
<title></title>
<style type="text/css">
p:first-letter{
color: #008000;
font-size: 2.5rem;
}
p:first-line{
color: aqua;
}
p::selection{
color:red;
}
p:before{
content: ''I will love you forever';
color:blue;
}
p:after{
content: 'sure are you';
color:green；
}
</style>
</head>
<body>
<div>Hello are you okay</div>
<p> 我還是一個段落 我是一個很多很多解放碑還不錯保持經(jīng)濟刺激
哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈
</p>
</body>
5. 結(jié)構(gòu)性偽類(重點)
:tomato: index的值從1開始計數(shù)?。。。ndex可以為變量n(只能是n)index可以為even odd
:tomato: #wrap ele:nth-child(index)表示匹配#wrap中第index的子元素，這些偽類都是根據(jù)所有的子元素進行排序，這個子元素必須是ele
:tomato: #wrap ele:nth-of-type(index)表示匹配#wrap中第index的ele子元素
除此之外:nth-child和:nth-of-type有一個很重要的區(qū)別??！nth-of-type以元素為中心，在同一類型中排序，nth-child (相對于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
/* even表示偶數(shù)
odd表示奇數(shù)
first-of-type:在p類型中排
first-child:所有元素排
*/
:tomato::nth-child(index)系列
:first-child
:last-child
:nth-last-child(index)
:tomato::nth-of-type(index)系列
:first-of-type :last-of-type :nth-last-type(index) :only-of-type(相對于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1)) :not :empty(內(nèi)容必須是空的，有空格都不行，有attr沒關(guān)系)
代碼實例
*{
margin: 0;
padding: 0;
}
#wrap li:nth-of-type(1){
color: pink;
}
p:only-of-type{
border: 1px solid;
}
6. 偽元素選擇器
::after
::before
::firstLetter
::firstLine
::selection
#wrap::before{
content:"";
display:block;
width:200px;
height:200px;
background: #00FFFF;
}
#wrap::after{
content:"";
display:block;
width:200px;
height:200px;
background: #0000FF;
}
到此這篇關(guān)于CSS3選擇器新增問題的實現(xiàn)的文章就介紹到這了,更多相關(guān)CSS3選擇器新增內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了CSS 選擇所有子元素添加樣式的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-09-02
這篇文章主要介紹了CSS選擇器中的正則表達式使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-03-11- 這篇文章主要介紹了CSS3 新增選擇器的實例,需要的朋友可以參考下2019-11-13
- 這篇文章主要介紹了一文教你玩轉(zhuǎn)CSS 組合選擇器,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-20
