-
偽類一 : target仿造錨點
CSS3里面利用target偽類來實現錨點的某些功能
target加在目標的位置上具體見代碼 - E:disabled表示不可點擊的表單控件
- E:enabled表示可點擊的表單控件
- E:checked表示以選中的checkbox或radio只有在OPREA瀏覽器下可以
- E:first-line表示E元素中的第一行
- E:first-letter表示E元素中的第一個字符
- E:selection表示E元素在用戶選中文字的時候
- E:before生成內容在E元素之前。他里面必須有content:這個屬性
- E:after生成內容在E元素之后,同理他里面必須有content這個屬性
- E:not(s)表示E元素不被匹配S表示標簽名
- E~F表示E元素毗鄰的F元素(同級節點。并且只能是比E的順序要低)
- Content屬性
2017-05-03_152524.jpg
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3偽類和偽元素</title>
</head>
<style>
*{margin:0px;padding:0px;}
a{font-size:18px;}
div{width:100px;height:100px;background: red;display: none;}
div:target{display: block;}/*代表的就是最終目的*/
input[type=button]:disabled{color:red;} /*找到disabled*/
input[type=checkbox]:checked{width:50px;height:50px;} /*找到checkbox*/
h2~h1{color:gold;}/*第一個h1沒有變化。而是h2后面的節點發生了變化*/
label{overflow:hidden;position:relative;}
input[type=radio]{position:absolute;left:-100px;top:-100px;}
span{width:50px;height:50px;border:5px solid #ccc;display: block;}
input[type=radio]:checked~span{background: gold;}
</style>
<body>
<p>主要是就是測試CSS3里面的偽類target</p>
<a href="#div1">a1</a>
<a href="#div2">a2</a>
<a href="#div3">a3</a>
<div id="div1">第一個</div>
<div id="div2">第二個</div>
<div id="div3">第三個</div>
<input type="button"value="點擊" disabled>
<input type="checkbox">籃球
<h1>第一名</h1>
<h2>第二名</h2>
<h1>第一名</h1>
模擬單選框
<label>
<input type="radio"name="r1">
<span></span>
</label>
<label>
<input type="radio"name="r1">
<span></span>
</label>
<label>
<input type="radio"name="r1">
<span></span>
</label>
</body>
</html>
自定義單選框.gif
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3偽類和偽元素</title>
</head>
<style>
*{margin:0px;padding:0px;}
label{overflow:hidden;position:relative;display:block;} /*超出后隱藏。定位相對*/
input[type=radio]{position:absolute;left:-100px;top:-100px;} /*input絕對定位*/
span{width:50px;height:50px;border:5px solid #ccc;display: block;}/*要替換的*/
input[type=radio]:checked~span{background: gold;}/*選中后要替換的*/
</style>
<body>
模擬單選框
<label>
<input type="radio"name="r1">
<span></span>
</label>
<label>
<input type="radio"name="r1">
<span></span>
</label>
<label>
<input type="radio"name="r1">
<span></span>
</label>
</body>
</html>
這里要特別注意:first-letter,first-line,在CSS里面查找的越準確，級別優先度最高而不是看!important
222.png
文本偽類
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content="text/html; charset=utf-8">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>CSS3偽類和偽元素</title>
</head>
<style>
*{margin:0px;padding:0px;}
#p1{width: 300px; border: 1px solid #000; font: 12px/30px "微軟雅黑"; padding: 10px;}
#p1:first-line{color:blue;font-size:12px;}
#p1:first-letter{font-size:24px;color:red;}
#p1::selection{color:gold;}
#p1:before{content:"帥哥";font-size:24px;color:gold;}/*這樣他是不會改變樣式的,只是加了帥哥*/
#p1:after{content:"美女";font-size:24px;color:gold;} /*這樣他就會發生變化了。因為沒有first-letter*/
</style>
<body>
<p id="p1">
前端開發的世界從未有過無聲的寂靜，精彩紛呈的互聯網也不曾出現片刻安寧，在HTML5&CSS3被炒至沸沸揚揚的今天，全面系統地掌握此項技能，是加重技術含金量的重要砝碼！現已為你開啟一個嶄新的職業規劃……
</p>
</body>
</html>
對應的效果圖
2017-05-04_105011.jpg
排除元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1:not(.h2) {background: red;} /*也就是除了class是h2的以外都變成紅色*/
</style>
</head>
<body>
<h1>h1</h1>
<h1 class="h2">h1</h1>
<h1>h1</h1>
</body>
</html>
