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

最新推荐文章于 2024-06-24 12:31:03 发布

灵眼儿上方

最新推荐文章于 2024-06-24 12:31:03 发布

阅读量241

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/liyanq528/article/details/62041610

版权

WEB 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
[提高总结六]css选择器2

测试css选择器2 CSS :lang 选择器 p:lang(it) 我没有任何设置我设置了lang=it 我设置了lang=it2CSS3 element1~element2 选择器 div~p 我前面没有同级div 我前面有同级div 我前面是p元素CSS3 [attribute^=value] [attri
复制链接

扫一扫

专栏目录