CSS选择器-白红宇

CSS选择器

阅读量：6624 次

发布时间：2019-06-25

本文共 4199 字，大约阅读时间需要 13 分钟。

CSS的命名空间是大小写敏感的；选择器在HTML不区分大小写，在XML中大小写敏感。

1. 元素选择器

它是最常见也是最基本的 CSS 选择器，文档的元素就是最基本的选择器。

html {
   color:black;}h1 {
   color:blue;}h2 {
   color:silver;}

在 W3C 标准中，元素选择器又称为类型选择器，会匹配文档语言元素类型的名称，也就是说CSS样式可以应用于XML文件


     
     
     
      
       George
      
      
       John
      
      
       Reminder
      Don't forget the meeting!

note {
    font-family:Verdana, Arial;margin-left:30px;}to {
   font-size:28px; display: block;}from {
   font-size:28px; display: block;}heading {
   color: red; font-size:60px; display: block;}body  {
   color: blue; font-size:35px; display: block;}

2. 类选择器

要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器，允许以一种独立于文档元素的方式来指定样式，

.error{
   color:red;}

也可以与其他元素结合使用，如元素选择器，通配符等

*.important {
   color:red;}p.urgent {
   color:yellow;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）

.important.urgent {
   background:silver;}

3. ID选择器

ID 同类选择器一样，利用它们可以不用考虑文档的层次结构，可以给id 和class 属性设定任何值，但不能以数字或特殊符号开头

4. 属性选择器

可以根据属性名进行选择，多个属性链接在一起即可

a[href] {
   color:red;}a[href][title] {
   color:red;}

可以选择特定属性名，属性值的元素(完全匹配)

input[name='password']{
    ...}

也可以部分匹配

a[rel~="copyright"] {
    ... }                    /* 属性值以空格分开，其中一个值为"copyright"*/a[hreflang|="en"]                              /* 值以连字符-分隔，且以en开头，如en-US*/ a[href*="example.com.cn"] {
   color: red;}        /* 值包含example.com.cn的元素*/ a[href^="mailto"] {
   color: red;}　              /* 值以mailto开头的元素*/ a[href$=".png"] {
   color: red;}　　　　　　　　　　/* 值以.png结尾的元素*/

5. 上下文选择器

上下文选择器可以和通配符结合使用，在某些生成的组件中，需定位的元素和其父元素经常会有一定的层级关系

后代选择器

body  p{
   line-height: 1.5em;}                      /*body下面所有的p元素*/div * input[type='text']{
   border:1px solid gray;}  /*input元素和div中间必有某个元素 */

子元素选择器

body > p{
   ...}          /*body的直接子元素p*/div ol>li p{
   ...}       /*div下面的ol元素的子元素li下面的p元素*/

兄弟元素选择器

h1 ~ pre{
   ...}          /*h1同级后面的pre元素, 共一个parent*/h1.opener + h2{
   ...}    /*紧邻在h1后面的兄弟元素h2，共一个parent*/

6. 伪类选择器

伪类可分为UI伪类和结构化伪类

UI伪类

链接是最常使用UI 伪类的元素，由于这4 个伪类的特指度（本章后面再讨论特指度）相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期结果

a:link{
   ...}a:visited{
   ...}a:hover{
   ...}a:active{
   ...}

其他常用的有 :focus, :enable, :disable, :checked, :target, :lang

input:focus {
   border:1px solid blue;}input:enabled{
   ...}input:disabled{
   ...}input:checked{
   ...}#more_info:target {
   background:#eee;}

结构化伪类

:nth-last-child(1)和:last-child(1)等价，:nth-child(1)同:first-child等价

tr:nth-child(2n+1) /* represents every odd row of an HTML table */tr:nth-child(odd)  /* same */tr:nth-child(2n+0) /* represents every even row of an HTML table */tr:nth-child(even) /* same *//* Alternate paragraph colours in CSS */p:nth-child(4n+1) {
    color: navy; }p:nth-child(4n+2) {
    color: green; }p:nth-child(4n+3) {
    color: maroon; }p:nth-child(4n+4) {
    color: purple; }li:nth-child(5) tr:nth-last-child(-n+2)    /* represents the two last rows of an HTML table */foo:nth-last-child(odd)    /* represents all odd foo elements in their parent element, counting from the last one */ol > li:last-child

7. 伪元素

::first-letter pseudo-element applies to block-like containers such as block, list-item, table-cell, table-caption, and inline-block elements.

p::first-line {
    text-transform: uppercase }p::first-letter {
    color: green; font-size: 200% }

以下代码常用于清除浮动

.clearfix:after {
   　　content:".";　　display:block;　　height:0;　　visibility:hidden;　　clear:both;}

8. 命名空间

@namespace foo url(http://www.example.com); foo|h1 {
    color: blue }     /* The first rule (not counting the @namespace at-rule) will match only h1 elements in the "http://www.example.com" namespace. */ foo|* {
    color: yellow }    /* The second rule will match all elements in the "http://www.example.com" namespace. */ |h1 {
    color: red }         /* The third rule will match only h1 elements with no namespace.*/ *|h1 {
    color: green }      /* The fourth rule will match h1 elements in any namespace (including those without any namespace).*/ h1 {
    color: green }        /* The last rule is equivalent to the fourth rule because no default namespace has been defined.*/

8. 更多信息

CSS3选择器：

CSS2选择器：

小结：