<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试css选择器2</title>
<link rel="stylesheet" href="css/testCssSelector2.css">
</head>
<body>
<h3>CSS :lang 选择器 p:lang(it)</h3>
<div class="c1">
<p>我没有任何设置</p>
<p lang="it">我设置了lang=it</p>
<p lang="it2">我设置了lang=it2</p>
</div>
<h3>CSS3 element1~element2 选择器 div~p</h3>
<div class="c2">
<p>我前面没有同级div</p>
<div></div>
<p>我前面有同级div</p>
<p>我前面是p元素</p>
</div>
<h3>CSS3 [attribute^=value] [attribute$=value] [attribute*=value]:p[lang^="it"];p[lang$="it"];p[lang*="itm"]</h3>
<div class="c3">
<p>我没有任何设置</p>
<p lang="it">我设置了lang=it</p>
<p lang="it2">我设置了lang=it2</p>
<p lang="2it">我设置了lang=2it</p>
<p lang="2itm2">我设置了lang=2itm2</p>
<p lang="hello world">我设置了lang=hello world</p>
<p lang="welcome-to-北京">我设置了lang=welcome-to-北京</p>
</div>
<h3>CSS3 :first-of-type last-of-type only-of-type only-child</h3>
<div>
<div class="c4">
<p>我是第一个p元素</p>
<p>我是第二个p元素</p>
<p>我是第三个p元素</p>
</div>
<div class="c4">
<span>我是span</span>
<p>我是唯一的一个p元素</p>
</div>
<div class="c4">
<p>我是唯一的子元素</p>
</div>
</div>
<h3>CSS3 :empty</h3>
<div class="c5">
<div>
<p></p>
</div>
<p></p>
</div>
<h3>CSS3: enabled disabled checked </h3>
<div class="c6">
<input type="text" value="输入框内容" disabled>
<input type="text" value="输入框内容" ><br>
<input type="checkbox" value="bike" checked>自行车<br>
<input type="checkbox" value="Car">汽车<br>
<input type="radio" value="male" name="r">男人
<input type="radio" value="female" name="r">女人<br>
</div>
<div class="c7">
姓名:<input type="text" value="ddd" required>
邮件:<input type="email" value="ddd">
</div>
</body>
</html>
/*1,设置了lang属性;2,属性的值为it*/
div.c1 p:lang(it) {
color: red;
}
/*1,p和div必须是同级2,p的前面必须有div*/
div.c2 div~p{
color: red;
}
/*1,针对属性值;2,^开头,$结尾,*包含*/
div.c3 p[lang="it"] {
color: red;
}
div.c3 p[lang^="it"] {
color: red;
}
div.c3 p[lang$="it"] {
color: blue;
}
div.c3 p[lang*="itm"] {
color: blueviolet;
}
/*1,针对单词;2|单词开头且属性为单个单词,可以识别-链接,~包含单词*/
div.c3 p[lang|="welcome"] {
color: yellowgreen;
}
div.c3 p[lang~="world"] {
color:darkblue;
}
/*1,同级别。2,first:第一个,last:最后一个*/
div.c4 p:first-of-type,p:last-of-type{
color: red;
}
/*只能有一个类型元素,可以有其他类型*/
div.c4 p:only-of-type{
color: blue;
}
/*只能有一个类型元素,不可以有其他类型*/
div.c4 p:only-child{
color: yellowgreen;
}
/*p里面不能有文字*/
div.c5 p:empty:after{
color: yellowgreen;
content: "我是空节点插入内容";
}
div.c6 input:enabled{
color: black;
}
div.c6 input:disabled{
color: red;
}
div.c6 input:checked{
color: blue;
}
div.c7 input:invalid{
border-color: red;
}