css选择器

2023-03-04 20:40:01html-css027

css选择器,第1张

CSS（Cascading Style Sheet），中文译为层叠样式表，可以让设计者方便灵活地控制Web页面的外观表现。CSS是1996年由W3C审核通过并且推荐使用的。CSS的引入，就是为了使HTML语言更好地适应网页的美工设计。CSS详细规范说明要查阅CSS手册，或登录W3C官网（ http://www.w3c.org ）。

使用CSS，要了解常用的各种选择器。

1.标记选择器：

一个HTML页面由很多不同的标记组成，而CSS选择器就是声明哪些标记采用哪种CSS样式。每一种HTML标记的名称都可以作为相应的标记选择器的名称。示例：

每一个选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一标记名称声明多种样式。CSS语言对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。还有一种通配选择器“*”，表示其中设置的样式会应用于所有的网页元素。示例：

<html><head><title>class选择器</title>

.red{ color: redfont-size:18px }

.green{ color: greenfont-size:20px }

</style></head>

<body>

<p class="red">class选择器1</p>

<p class="green">class选择器2</p>

<h3 class="green">h3使用class</h3>

</body>

</html>

<html><head><title>ID选择器</title>

#bold{ font-weight: bold }

#green{ font-size:30pxcolor:#009900 }

</style></head>

<body>

<p id="bold">ID选择器1</p>

<p id="green">ID选择器2</p>

</body></html>

<html><head><title>交集选择器</title>

p{ / 标记选择器 / color: blue }

p.special{ / 标记.类别选择器 / color: red }

.special{ / 类别选择器 / color: green }

</style></head>

<body>

<p >普通段落文本（蓝色）……</p>

<h3 >普通标题文本（黑色）……</h3>

<p class="special">指定了.special类别的段落文本（红色）……</p>

<h3 class="special">指定了.special类别的标题文本（绿色）……</h3>

</body>

</html>

<html><head><title>并集选择器</title>

h1,h2,h3.h4.h5.p{ / 并集选择器 / color: purplefont-size:15px }

h2.special,.special,#one{ / 集体声明 / text-decoration:underline }

</style></head>

<body>

<h1 >示例文字h1……</h1>

<h2 class=”special” >示例文字h2……</h2>

<h3 >示例文字h3……</h3>

<p >示例文字p1……</p>

<p class="special">示例文字p2……</p>

<p id="one">示例文字p3……</p>

</body></html>

<html><head><title>后代选择器</title>

p span{ / 嵌套声明 / color: red }

span{color:blue }

</style></head>

<body>

<p >嵌套使<span>用CSS（红色）</span>标记的方法</p>

嵌套之外的<span>标记（黑色）</span>不生效

</body></html>

:hover :visited :active :first-line :first-letter :first-child :nth-child :nth-of-type :nth-last-child

:nth-last-of-type

#div:not(':last-child')

选择id=div的除了最后一个子元素以外的所有子元素

#div:not(p)选择id=div的元素下所有不是p元素的子元素

标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织。WHATWG致力于Web表单和应用程序，而W3C（WorldWideWebConsortium，万维网联盟）专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。

HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。

HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。

2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

2013年5月6日，HTML5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。

本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

CSS选择器如下：

1. 标签名选择器 div { color：Red} /即页面中的各个标签名的css样式

2.类选择器 .divClass {color:Red} /即定义的每个标签的class 中的css样式

3.ID选择器 #myDiv {color:Red}/即页面中的标签的id

4.后代选择器（类选择器的后代选择器） .divClass span { color:Red} /即多个选择器以逗号的格式分隔命名找到准确的标签

5.群组选择器 div,span,img {color:Red}/即具有相同样式的标签分组显示

选择器的优先级

1.最高优先级是 (直接在标签中的设置样式，假设级别为1000)<div style="color:Red"></div>

2.次优先级是（ID选择器 ,假设级别为100） #myDiv{color:Red}

3.其次优先级是（类选择器，假设级别为10） .divClass{color:Red}

4.最后优先级是（标签选择器，假设级别是 1） div{color:Red}

5.那么后代选择器的优先级就可以计算了啊