CSS3基础学习之选择器篇_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

CSS3基础学习之选择器篇_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:21 AM

在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的。

网页开发过程中，我们需要定义很多class来应用到不同的元素上，由于class本身是没有语义而且是可以复用的，所以过度使用class会使得整个样式表结构非常混乱。为了减少class的使用频度，需要尽可能的使用选择器来指定元素。而且使用选择器还可以定义很多规则，这样也可以减少重复定义class的代码量。

在CSS3中，主要有以下几种选择器：属性选择器、结构性选择器、UI状态选择器、通用兄弟元素选择器。下面分别介绍一下：

（一）属性选择器

顾名思义，属性选择器就是根据各种属性来选定目标的。通常我们还会结合通配符来使用属性选择器。表达式为：[attr=val] {样式内容}，常用通配符有以下3个：

1) [ attr*=val ] 返回'attr'属性中包含val字符串的所有元素。如[id*=section]可选中#section1、#subsection，不能选中sec-tion。

2) [ attr^=val ] 返回'attr'属性以val字符串开头的所有元素。如[id*=section]可选中#section1、不能选中#subsection。

3) [ attr$=val ] 返回'attr'属性以val字符串结尾的所有元素。如[id*=section]可选中#subsection、不能选中#section1。

属性选择器规则简单，但是使用非常灵活多变，恰当使用可以对代码起到很好的精简。

（二）结构性选择器

在CSS中，除了我们自定义的类选择器外，还有CSS已经定义好的选择器，如a元素上的a:link, a:visited, a:hover, a:active这些状态伪类。可以结合类来使用，表达式：选择器类名：伪类/伪元素{样式内容}。在CSS中结构性选择器如下（引自http://www.w3school.com.cn/）：

选择器例子例子描述 CSS

first-line	p:first-line	选择每个元素的首行。	1
:first-letter	p:first-letter	选择每个元素的首字母。	1
:before	p:before	在每个元素的内容之前插入内容。	2
:after	p:after	在每个元素的内容之后插入内容。	2
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:not(selector)	:not(p)	选择非元素的每个元素。	3
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。	2
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的元素的每个元素。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3

这里选一些常用的有内容的选择器来说一下。

1)befor和after选择器：通常会配合content使用，在被选元素内（添加到该元素内的innerHTML）的前后添加content。

 1 <!DOCTYPE html> 2   <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title>各种选择器</title> 6     <style type="text/css"> 7         h2:after { 8            content: "（在后面添加文字，可以指定样式）"; 9            color: blue;10         }11     </style>12   </head>13   <body>14     <p>显示效果：</p>15     <div id="main">16       <h2 id="第一个标题">第一个标题</h2>17       <p>第1个段落</p>18       <h2 id="第二个标题">第二个标题</h2>19       <p>第2个段落</p>20       <h2 id="第三个标题">第三个标题</h2>21       <p>第3个段落</p>22     </div>23   </body>24 </html>

如果有某些元素不加的话，可以为他们设置一个类，设置其content为none即可。h2.noadd:after { content: none; }

此外，content还可以是图片url(pathname.png)，不用img标签而用content的好处可以不用编写大量img标签，常用于购物单上的新货品，文章列表中的新文章等。

看到content的作用，当然大家都能想到他的一个重要用途就是为项目增加序号了，添加序号需要两步：在content中指定couter，然后在目标元素的样式表中定义couter属性，比如couter-increment和counter-reset

 1 <!DOCTYPE html> 2 <html> 3   <head> 4     <meta charset="UTF-8"> 5     <title>各种选择器</title> 6     <style type="text/css"> 7       h2:before { content: '第'counter(hcouter)'项'; color: red;} 8       h2 { counter-increment: hcouter; counter-reset: pcouter;} 9       p:before { content: '第'counter(pcouter)'段'; color: blue;}10       p { counter-increment: pcouter; }11     </style>12   </head>13   <body>14     <span>显示效果：</span>15     <div id="main">16       <h2 id="第一个标题">第一个标题</h2>17       <p>段落</p>18       <p>段落</p>19       <p>段落</p>20       <h2 id="第二个标题">第二个标题</h2>21       <p>段落</p>22       <p>段落</p>23     </div>24   </body>25 </html>

在嵌套中要注意的是需要在子项目前设置counter-reset: 来为下级项目号重置couter，否则上文中的第2标题下的段落就从4开始了。

2)target：使用target选择器来对页面中的target元素(ID被设置为页面中的超链接来使用)指定样式，样式只有在用户点击了该链接，并且跳转到target元素后起作用。

3):nth-child(n),:nth-of-type(n)：child与type的区别在于，child在统计子元素时是不分类型的，而type是区分类型的。举个栗子：

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="UTF-8"> 5         <title>各种选择器</title> 6         <style type="text/css"> 7             h2:nth-child(2) { background-color: blue; } 8             h2:nth-child(3) { background-color: grey; } 9         </style>10     </head>11     <body>12         <h2 id="第一个标题">第一个标题</h2>13         <p>第1个段落</p>14         <h2 id="第二个标题">第二个标题</h2>15         <p>第2个段落</p>16         <h2 id="第三个标题">第三个标题</h2>17         <p>第3个段落</p>18     </body>19 </html>

页面显示：

我们本意是要设置第2第3个

标签的背景色，而浏览器给出的结果却把第二个h2改成了灰底，第3个h2完全没作用。这是因为在统计h2父元素的child时是不分类型的，所以

也被算了进去。这样的话，h2:child(2)就成了“

第1个段落

”，h2:child(3)就是“

第二个标题

”了。

为了解决这个问题，我们可以使用:nth-of-type(n)来指定元素类型就可以得到想要的结果了。

1 <style type="text/css">2     h2:nth-of-type(2) { background-color: blue; }3     h2:nth-of-type(3) { background-color: grey; }4 </style>

另外(n)还可以参数化以实现循环模式，输入xn+y指定x个数为一个循环，y取1~x代表循环里的x种类型，如3n+1，3n+2，3n+3（可简写成3n）。当x=2的时候就是奇偶项了，可以用单词odd（奇数）even（偶数）表示，这个方法常用在列表或者表格背景色交替切换的场景。

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="UTF-8"> 5         <title>各种选择器</title> 6         <style type="text/css"> 7             ul.lis {  8                 width: 140px; 9                 padding: 10px;10                 margin: 0;11             }12             ul.lis li {13                 list-style-type: none;14                 white-space: nowrap;15                 overflow: hidden;16                 text-overflow: ellipsis;17             }18             ul.lis li:nth-child(odd) { background-color: aquamarine; }19             ul.lis li:nth-child(even) { background-color: burlywood; }20         </style>21     </head>22     <body>23         <span>显示效果：</span>24         <div id="main">25             <ul class="lis">26                 交替显示列表项目27                 <li>列表项目1，奇数项目背景色</li>28                 <li>列表项目2，偶数项目</li>29                 <li>列表项目3</li>30                 <li>列表项目4</li>31             </ul>32         </div>33     </body>34 </html>

（三）UI状态伪类选择器

CSS3还提供了11种UI元素状态伪类选择器，但各浏览器对UI元素状态选择器支持不同，如下图：

这些选择器很大一部分是专为PC端设置的，主要是用在一些动态表单中。从屏幕尺寸和交互体验上考虑，移动端页面中一次呈现的表单元素应该尽可能少，因为输入表单在移动端的体验是比较差的（其实PC端也差！）。所以，在不多的内容里面，不需要太多形式上的东西！

（四）通用兄弟元素选择器

使用格式：子元素1 - 子元素2 {样式内容}

返回的是子元素1后面的所有与元素1同级的子元素2。这里的选择规则有两个：元素1后面、同级的子元素2。

总结：选择器规则不多，用法也相当简单，难点在于如何选择适当的选择器组合。上述选择器的优势是精准定位，但同时扩充性就变差了，后续假如要更改结构增减元素的话，使用上述选择器就有可能出现问题了。

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.

HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM

"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)

HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AM

HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AM

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

HTML의 시작 태그의 예는 무엇입니까?Apr 06, 2025 am 12:04 AM

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.

메뉴에서 점선 분할 효과의 중심 정렬을 달성하기 위해 CSS의 Flexbox 레이아웃을 사용하는 방법은 무엇입니까?Apr 05, 2025 pm 01:24 PM

메뉴에서 점선 분할 효과를 설계하는 방법은 무엇입니까? 메뉴를 설계 할 때는 일반적으로 접시 이름과 가격 사이에 왼쪽과 오른쪽을 정렬하는 것이 어렵지 않지만 점선 또는 중간의 점은 어떻습니까?

온라인 코드 편집기는 코드 입력을 구현하는 데 사용하는 HTML 요소는 무엇입니까?Apr 05, 2025 pm 01:21 PM

웹 코드 편집기의 HTML 요소 분석 많은 온라인 코드 편집기를 사용하면 사용자가 HTML, CSS 및 JavaScript 코드를 입력 할 수 있습니다. 최근에 누군가가 제안했습니다 ...

See all articles

핫 AI 도구

뜨거운 도구

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.