前端-CSS选取器(总)-天涯论坛 - Powered by Discuz! Archiver

b1gc8v 发表于 2024-6-30 10:48:01

前端-CSS选取器(总)

<h2 style="color: black; text-align: left; margin-bottom: 10px;">前言</h2>
 各大浏览器都定义了私有属性,以便让用户体验CSS3的新特性。
 例如WebKit类型的浏览器 , 如Safari,Chrome 私有属性以-moz-前缀起始
 Konqueror类型的浏览器的私有属性是以-kt t m-l 前缀起始
 Opera浏览器的私有属性是-o-前缀起始Internet Explorer 浏览器是以-ms-起始(IE8+)
<h2 style="color: black; text-align: left; margin-bottom: 10px;">本篇博客学习重点</h2>认识CSS选取器运用组合选取器把握属性选取器和伪类选取器的运用办法
<h2 style="color: black; text-align: left; margin-bottom: 10px;">知识点-CSS选取器</h2>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-b92a8dc131bf26a64c7ef4526ae15436_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-24b67b5b2d67b718c035dfffa6c8479e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-1ce10b846b9392d92e8c3ff8ccf6f302_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1 兄弟选取器</h3>
经过浪花号(~)分隔符进行定义兄弟选取器选取前置元素后同级的所有匹配元素
代码
<div style="color: black; text-align: left; margin-bottom: 10px;"> <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>
</div>
效果
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-bba7e3d2e7e7c648901f47ce510c972f_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">2 属性选取器</h3>
以中括号做为语法标识符,在中括号中科院包括HTML属性名或属性值,经过^$|等运算符,定义区别形式的属性选取器,语法如下:
<div style="color: black; text-align: left; margin-bottom: 10px;">[属性选取符]</div>
CSS3的属性选取器重点包含以下几种
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-efe1d1dc257c6e2af755ec87ba0a63aa_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
例
<div style="color: black; text-align: left; margin-bottom: 10px;"> <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>
</div>
效果
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-4b4952150e05b234af6c6661e712681d_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
详细案例
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-0ba1657e2c055f3af0ada8ca0d684b55_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
待续...(2022/2/28)

4lqedz 发表于 4 天前

我完全同意你的观点，说得太对了。

页: [1]

天涯论坛's Archiver

前端-CSS选取器(总)