《图解CSS》选择器

作者 : 开心源码 本文共7195个字,预计阅读时间需要18分钟 发布时间: 2022-05-14 共163人阅读

在CSS简介一节中,我们理解到,CSS的语法如下:

选择器 { 属性1:属性值; 属性2:属性值}

那么有哪些选择器可以使用呢?

  • 上下文选择符:基于祖先或者同胞元素选择一个元素
  • ID和类选择符:基于id和class属性的值选择元素
  • 属性选择符:基于属性的有无和特征选择元素

上下文选择符

基于祖先

语法

祖先标签 子标签 {公告}

或者

祖先标签 ... 父标签 子标签 {公告}

这里的祖先标签可以是子标签的父标签,也可以是子标签的任何一个上级标签。
示例:

<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        article h3 { color: red; }        article section p {color: blue;}    </style></head><body>    <article>        <header>            <h3>Header</h3>        </header>        <section>            <p>文章段落</p>        </section>        <footer>            <span>                Footer            </span>        </footer>    </article></body>

基于祖先选择

子选择符>

语法:

父标签>子标签

此时父标签必需包裹着子标签,也就是子标签的父元素只能是父标签。
示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        article>h3 { color: red; }        article>section>p {color: blue;}    </style></head><body>    <article>        <header>            <h3>Header</h3>        </header>        <section>            <p>文章段落</p>        </section>        <footer>            <span>                Footer            </span>        </footer>    </article></body></html>

子选择符

该示例只是在基于父标签选择符的示例上加了子选择符,跨级选择的header中的还h3就不起作用了。

紧邻同胞选择符+

语法:

标签1 + 标签2

标签2必需紧跟在其同胞标签1的后面。
示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        header+section { color: red; }  /*起作用*/        header+footer {color: blue;} /*不起作用*/    </style></head><body>    <article>        <header>            <h3>Header</h3>        </header>        <section>            <p>文章段落</p>        </section>        <footer>            <span>                Footer            </span>        </footer>    </article></body></html>

紧邻同胞选择符

一般同胞选择符~

语法:

标签1~标签2

标签2必需跟(不肯定紧跟)在其同胞标签1后面。
示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        header~section { color: red; }  /*起作用*/        header~footer {color: blue;} /*起作用*/    </style></head><body>    <article>        <header>            <h3>Header</h3>        </header>        <section>            <p>文章段落</p>        </section>        <footer>            <span>                Footer            </span>        </footer>    </article></body></html>

一般同胞选择符

通用选择符*

*是一个通配符,匹配任何元素
示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        * { color: red; }        footer * {color: blue;} /* 覆盖上面的样式*/    </style></head><body>    <article>        <header>            <h3>Header</h3>        </header>        <section>            <p>文章段落</p>        </section>        <footer>            <span>                Footer            </span>        </footer>    </article></body></html>

通配符

ID和类选择符

ID和类为我们选择元素提供了另一套手段,利用它们可以不用考虑文档的层次结构。只需在HTML标记中为元素增加了id和class属性,即可以在CSS选择符中使用ID和类名,直接选中文档中特定的区域。

注意

id和clss不能以数字或者特殊符号开头。id具备唯一性,一篇HTML文档不能具备相同命名的id。

class属性

常规 语法:

.类名{公告}

标签带类选择符,语法:

标签.类名{公告}

多类选择符,语法:

.类名1 .类名2{公告}

示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .header{color: red;}  /*常规*/        div.footer{ color: blue;} /*标签带类选择符*/        .body.content{color:darkred}  /*多类选择符*/    </style></head><body>    <div class="article">        <div class="header">文本头部</div>        <div class="body content">文本内容</div>        <div class="footer">文本尾部</div>    </div></body></html>

class选择符

id属性

id与class相似,id选择符使用“#”选择。
常规 语法:

#id{公告}

标签带id选择符,语法:

标签#id{公告}

示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        #header{color: red;}  /*常规*/        div#body{ color: blue;} /*标签带类选择符*/    </style></head><body>    <div id="article">        <div id="header">文本头部</div>        <div id="body">文本内容</div>        <div id="footer">文本尾部</div>    </div></body></html>

id选择符

从上面的示例中可以看出,class和id还是有很多类似的地方,那么该如何选择呢?

id 还是 class?

个人观点:能不用就都不用,使用上下文选择符。假如为了调整样式使用class,为了操作数据,配合JavaScript使用id。

属性选择符

语法:

标签名[属性名]

或者

标签名[属性名="属性值"]

示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        div[title] {color: red;}        div[title="footer"] {color: blue;} /*覆盖上面的样式*/    </style></head><body>    <div title="header">header</div>    <div title="body">body</div>    <div title="footer">footer</div></body></html>

属性选择符

伪类

伪类这个叫法源自它们与类类似,但实际上并没有类会附加到标记中的标签上。伪类分两种,UI伪类和结构化伪类。

  • UI(User Interfact,客户界面)伪类会在HTML元素处于某个状态时(比方鼠标指针位于链接上),为该元素应用CSS样式
  • 结构化伪类会在标记中存在某种结构上的关系时(如某个元素是一组元素中的第一个或者最后一个),为相应元素应用CSS样式

UI伪类

UI伪类会基于特定HTML元素的状态应用样式。最常使用UI伪类的元素是链接(a元素),利用UI伪类,链接可以在客户鼠标悬停时改变文本颜色,或者者去掉文本的下划线等等。
一个冒号(:)表示伪类,两个冒号(::)表示CSS3新添加的为元素。

链接伪类

针对链接伪类一共有4个:

  • link: 待被点击
  • visited: 客户此前点击过这个链接
  • hover:悬停在链接上
  • active: 链接正在被点击(鼠标在元素上按下,还没有释放)
注意

这4个伪类的顺序,link、visited、hover、active。假如不按照这样的顺序使用它们,浏览器可能不会显示预期结果

示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        a{ text-decoration: underline; }        a:link { color: rgb(20, 112, 8); }        a:visited { color: black; }        a:hover { color: red; }        a:active { color: cyan;}    </style></head><body>    <a href="http://www.iotzzh.com" target="_blank">http://www.iotzzh.com</a></body></html>

链接伪类

貌似link的样式并没有被应用起来,当把visited移除时它便会被应用,可见这四个伪类并不是每次都是一起出现的。

focus伪类和target伪类
  • focus伪类:取得焦点时的样式
语法 任何标签:focus{公告}
  • target伪类:假如客户点击一个指定页面其余元素的链接,则那个元素就是目标(target),可以用:target伪类选中它。

示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        input:focus { outline: 1px solid red; border: 1px solid red;}         #first-paragraph:target { color: red;}        #second-paragraph:target { text-decoration: underline;}    </style></head><body>    <input type="text"><br>    <a href="#first-paragraph">第一自然段</a>    <a href="#second-paragraph">第二自然段</a>    <div id="first-paragraph">这是第一自然段的内容</div>    <div id="second-paragraph">这是第二自然段的内容</div></body></html>

focus和target

结构化伪类

结构化伪类可以根据标记的结构应用样式,比方根据某元素的父元素的或者前面的同胞元素是什么。

:first-child和:last:child

:first-child代表一组同胞元素中的第一个元素,而:last-child则代表最后一个。

注意

:last-child或者者是:first-child这样的伪类时,其前后都不应该有其它的兄弟节点,所以处理办法是使用一个div将标签包裹起来就可。

:nth-child(n或者odd/even)

示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .box { width: 100px; height: 100px; display: inline-block; }        .box:first-child { background-color: red;}        .box:last-child { background-color: blue; }        table tr:nth-child(odd) {background-color: darkgoldenrod; }        table tr:nth-child(even) {background-color:darkmagenta; }        table tr:nth-child(1) { background-color: red; color: white; }    </style></head><body>    <div>        <div class="box"></div>        <div class="box"></div>        <div class="box"></div>    </div>    <table>        <tr>            <td>cell1</td>            <td>cell2</td>            <td>cell3</td>        </tr>        <tr>            <td>cell1</td>            <td>cell2</td>            <td>cell3</td>        </tr>        <tr>            <td>cell1</td>            <td>cell2</td>            <td>cell3</td>        </tr>        <tr>            <td>cell1</td>            <td>cell2</td>            <td>cell3</td>        </tr>        <tr>            <td>cell1</td>            <td>cell2</td>            <td>cell3</td>        </tr>    </table></body></html>

结构化伪类

伪元素

伪元素就是在文档中若有实无的元素。下面详情几个常用的伪元素:

::first-letter伪元素

段落首字符

::first-line伪元素

文本段落(一般情况下是段落)的第一行

::before和::after伪元素

可用于在特定元素前面或者后面增加特殊内容

示例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        .first-letter::first-letter{font-size: large; color: red;}        .content::first-line {font-style: italic; color: rgba(100, 0, 25, 0.5);}        .before::before { content: '增加before:'; color: sandybrown;}        .after::after {content: ':增加after'; color: skyblue;}    </style></head><body>    <div class="first-letter">测试伪元素::first-letter</div>    <div class="content">        <p>测试伪元素::first-line 第一自然段</p>        <p>测试伪元素::first-line 第二自然段</p>        <p>测试伪元素::first-line 第三自然段</p>    </div>    <div class="before">测试before</div>    <div class="after">测试after</div></body></html>

伪元素

假如我的博客对你有帮助、假如你喜欢我的博客内容,请 “点赞” “评论” “收藏” 一键三连哦!
听说 ? 点赞 ? 的人运气不会太差,每一天都会元气满满哦 嘿嘿!!! ❤️ ❤️ ❤️
大家的支持就是我坚持下去的动力。点赞后不要忘了? 关注 ?我哦!

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 《图解CSS》选择器

发表回复