前言
各大浏览器都定义了私有属性,以便让用户体验CSS3的新特性。
例如WebKit类型的浏览器 , 如Safari,Chrome 私有属性以-moz-前缀起始
Konqueror类型的浏览器的私有属性是以-kt t m-l 前缀起始
Opera浏览器的私有属性是-o-前缀起始 Internet Explorer 浏览器是以-ms-起始(IE8+)
本篇博客学习重点认识CSS选取器运用组合选取器把握属性选取器和伪类选取器的运用办法
知识点-CSS选取器
1 兄弟选取器
经过浪花号(~)分隔符进行定义 兄弟选取器选取前置元素后同级的所有匹配元素
代码
<body>
<!-- 兄弟选取器 -->
<style>
p ~ span{
bac公斤round: red;
display: block;
margin-top: 10px;
}
</style>
<p>hjhj</p>
<span>dnmd1</span>
<span>dnmd2</span>
<div>fff</div>
<span>dnmd3</span>
<span>dnmd4</span>
<span>dnmd5</span>
</body>
效果
2 属性选取器
以中括号做为语法标识符,在中括号中科院包括HTML属性名或属性值,经过^$|等运算符,定义区别形式的属性选取器,语法如下:
[属性选取符]
CSS3的属性选取器重点包含以下几种
例
<body>
<!-- 属性选取器 -->
<style>
/* 匹配属性 */
a[href] {
bac公斤round: red;
color: white;
}
/* 匹配属性值 */
input[type=text] {
bac公斤round: red;
color: white;
}
/* 匹配空白 */
ul li[class~=t] {
bac公斤round: blue;
}
ul li[class=s] {
bac公斤round: red;
}
ul li[class=f] {
bac公斤round: yellow;
}
/* 匹配连字符 */
ol li[class|=f] {
bac公斤round: blue;
}
/* 匹配前缀 */
p[title^=hello] {
font-size: 40px;
}
/* 匹配后缀 */
p[title$=good] {
font-size: 40px;
}
</style>
<!-- 匹配属性 -->
<a href="#">baidu</a>
<!-- 匹配属性值 -->
<p>
<input type="text" name="checkbox" value="cao" />
</p>
<!-- 匹配空白 -->
<ul>
<li class="f">f</li>
<li class="s">s</li>
<li class="t">t</li>
<li class="f s">f</li>
<li class="f f">f</li>
<li class="s t">f</li>
<li class="s t f">f</li>
</ul>
<!-- 匹配连字符 -->
<ol>
<li class="f">f</li>
<li class="s">s</li>
<li class="t">t</li>
<li class="f-s">f</li>
<li class="s-t">f</li>
<li class="s-t-f">f</li>
</ol>
<!-- 匹配前缀 -->
<p title="hello">hello</p>
<p title="ghello2">hello2</p>
<p title="hello3gggs">hello3</p>
<!-- 匹配后缀 -->
<p title="good">good</p>
<p title="ghellogood">good2</p>
<p title="goodgggs">good3</p>
</body>
效果
详细案例
待续...(2022/2/28)
| 
发表于 2024-6-30 10:48:01
