qzmjef 发表于 2024-6-30 06:53:26

CSS 中的常用选取器


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">常用三种<span style="color: black;">选取</span>器 </h2>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">标签<span style="color: black;">选取</span>器 </h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> p{ </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> color: red; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> } </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">id<span style="color: black;">选取</span>器 </p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"> id:(<span style="color: black;">独一</span>性) </h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> id命名：数字、字母、下划线、中划线（-），不</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">能用数字开头 </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> #p_1{ </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> font-size: 30px; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> color: yellowgreen; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> } </p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">class<span style="color: black;">选取</span>器 </h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> .p_2{ </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> font-weight: bold; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">color: yellow;</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> } </p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">三种<span style="color: black;">选取</span>器的优先级： </h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> id <span style="color: black;">选取</span>器&gt;class <span style="color: black;">选取</span>器&gt;标签<span style="color: black;">选取</span>器 </p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">后代<span style="color: black;">选取</span>器 只要<span style="color: black;">包括</span>该标签对象<span style="color: black;">就可</span> </h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> div span{ </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> font-size: 27px; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> font-family: 宋体; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> color: red; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> } </p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">子<span style="color: black;">选取</span>器 直系子标签 </h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">div&gt;span{ </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> color: red; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> } </p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">兄弟<span style="color: black;">选取</span>器 只会改变下面相邻的元素对象</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> #p_1+p{ </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> color: green; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">} </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">兄弟<span style="color: black;">选取</span>器 后面所有的兄弟对象都会改变 </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> #p_1~p{ </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> color: red; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> font-size: 30px; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> } </p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">伪类<span style="color: black;">选取</span>器 </h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> a:hover{ </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> color: red; </p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">}</p>




星☆雨 发表于 2024-8-21 17:26:42

我完全赞同你的观点，思考很有深度。

nykek5i 发表于 2024-10-18 00:17:17

楼主发的这篇帖子，我觉得非常有道理。

nqkk58 发表于 2024-10-29 18:43:43

你的话语如春风拂面，让我心生暖意。
页: [1]
查看完整版本: CSS 中的常用选取器