[提高总结六]css选择器2

来源：互联网发布：淘宝网创业计划书编辑：程序博客网时间：2024/06/05 17:36

<!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;}

0 0