CSS 中的选择器总结

以你之姓@ 2022-05-16 06:22 274阅读 0赞

主要应用的选择器就三类：元素选择器，ID选择器，类选择器。

选择器的结合关系有三种：后代结合、子元素结合、相邻兄弟结合。

元素选择器就是以html文档中的标准元素标签作为选择器的标志的。如：

h1 {color:red; font-size:14px;}

ID选择器，以元素的唯一ID作为选择器标志。如：

#red {color:red;}
    #green {color:green;}

类选择器，以元素的类（class）作为选择器标志。如：

.center {text-align: center}

从选择器的结合关系来看：

后代结合，就是两个选择器之间用空格分开。如 “A B”，表示A所选择的元素中包含的B所选择的元素。如：

.fancy td {
    	color: #f60;
    	background: #666;
    	}

上述例子，表示fancy类的元素中包含的td元素。注意：这个包含不一定是相邻子代包含，可以是孙代包含，故名后代结合。

子元素结合，两个选择器之间用“>”隔开。如 “A > B”，表示A所选择元素的相邻子代元素中B所选择的元素。如：

h1 > strong {color:red;}

<h1>This is <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>

上述例子，在第一句中应用了该样式，在第二句中没有。因为第二句中 h1 和 strong 不是相邻子元素关系。

相邻兄弟结合，两个选择器之间用 “+” 隔开。如 “A + B”，表示A和B为相邻元素，并且有同一个父元素，即他俩为兄弟元素。该选择器选择的是B元素。

<!DOCTYPE HTML>  
<html>  
<head>  
<style type="text/css">  
h1 + p \{margin-top:50px;\}  
</style>  
</head>  
  
<body>  
<h1>This is a heading.</h1>  
<p>This is paragraph.</p>  
<p>This is paragraph.</p>  
</body>  
</html>

上例中，第二个p元素没有应用样式，而第一个应用了。

知道了选择器种类以及选择器的结合方式，就会创造出许多种神奇应用了。如：

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

发表评论取消回复

表情：

评论列表（有 0 条评论，274人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3选择器总结

CSS3选择器总结基本选择器 1. 标签选择器 <head> <meta charset="UTF-8">

小鱼儿/ 2022年12月09日 13:58/ 0 赞/ 135 阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 279 阅读

相关 css 属性选择器_CSS选择器：属性选择器

css 属性选择器 ![cssmasterthumb][] The following is an extract from our book, [CSS Master][

本是古典何须时尚/ 2022年12月03日 09:59/ 0 赞/ 285 阅读

相关 css中的一些选择器的用法总结

1.选择器分组如 : h1,h2,h3,p,div \{ color:red; \} 这些分类中的字体颜色都是红色 2.派生选择器（上下文选

向右看齐/ 2022年09月23日 05:59/ 0 赞/ 177 阅读

相关 CSS选择器详解（总结）

一、CSS选择器。 ![这里写图片描述][20160417120833834] a、基本选择器详解。 > <table> > <thead> > <tr>

你的名字/ 2022年07月29日 11:56/ 0 赞/ 178 阅读

相关 css中属性选择器用法总结c

css中属性选择器的书写方式: 1. \[title\] \{ \} 2.属性和值 \[title=hello\] \{ corlor:red;

待我称王封你为后i/ 2022年07月14日 10:09/ 0 赞/ 186 阅读

相关 CSS选择器总结

前言：CSS中的选择器比较多，但是平时自己在书写代码的时候使用的并不多，这里对其进行一个总结常见选择器 p { color: ccc;

﹏ヽ暗。殇╰゛Y/ 2022年06月09日 13:07/ 0 赞/ 165 阅读

相关 CSS选择器总结

css样式中的选择器简介 1.元素选择器,如p,h2,span,a,div等,格式: p\{ 样式属性 \},多个html元素一起声明属性 h1,

超、凢脫俗/ 2022年06月03日 03:52/ 0 赞/ 300 阅读

相关 CSS 中的选择器总结

主要应用的选择器就三类：元素选择器，ID选择器，类选择器。选择器的结合关系有三种：后代结合、子元素结合、相邻兄弟结合。元素选择器就是以html文档中的标准元素

以你之姓@/ 2022年05月16日 06:22/ 0 赞/ 275 阅读

相关 CSS3 选择器的用法总结

本篇博客主要针对CSS3一个很常用的知识点进行归纳总结，那就是选择器。目的：通过选择器的使用，开发者可以快速地选取到目标元素。本篇通过以下几方面介绍选择器：通配符

╰+攻爆jí腚メ/ 2021年09月14日 09:10/ 0 赞/ 306 阅读