CSS系列------选择器和选择器的优先级

1.1.基本选择器

  • 通配符选择器(*)
          通配符选择器的使用方法如下

    *{margin:0px; padding:0px;} //*代表所有的
  • ID选择器(#)
      
    ID选择器的使用方式如下:

    *#intro {font-weight:bold;}//也可以省略通配符 
     #intro{font-weight:bold;} //两种方式是一样的。

    不同于其他选择器,id选择器有以下特点
     规范: 同一个id,在一个网页中只能标注一个元素。
      如果有同名id ,则在CSS中用ID选择器时,依旧会匹配所有的同名id元素。只是这么使用的时候会有以下的弊端:
                  1.不符合规范,因为规范要求的是一个id只能被一个元素使用。
                  2.语义的二义性。一般id我们都是作为标示符使用的,一个id只能用来标注一个元素。
                  3.在JS DOM(getElementById)操作或者是jquery("#xx")选择页面中元素时,返回的仅是第一个被找到的素。

  • 类选择器(.)
        类选择器使用比较简单,使用方式如下:
    *.important {color:red;}   //第一种使用方式
     .important {color:red;}  //第二种使用方式,推荐第二种
  • 属性选择器([])
     
         属性选择器用来选择指定属性的 HTML 元素。使用方式如下:

    [title]{ color:red; }  //为带有 title 属性的所有元素设置样式:
    
    [title~=hello] { color:red; }//为包含指定值的 title 属性的所有元素设置样式
    
    属性选择器一览表
    选择器 描述
    [attribute] 用于选取带有指定属性的元素。
    [attribute=value] 用于选取带有指定属性和值的元素。
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。
    [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。
     ========================================================================================================================
       在属性选择器中 [attribute~=value] 与 [attribute*=value] , [attribute|=value] 与 [attribute^=value] 的用法 在描述上很相似,很容易混淆:
    <img title="hello world"/>
    
      对于以上的元素  [title~=hello],[title*=hello]均能匹配,但是 [title~=hell]不能匹配,而[title*=hell]可以匹配,
    
     因为[attribute~=value] 匹配时要求value是一个“单词”,而 [attribute*=value]匹配时,是以正则表达式规则进行匹配
    
    
    同理,也可以类推出 [attribute|=value] 与 [attribute^=value]也是已类似的规则匹配,前者要求是以单词开头,而后者仅仅要求以xxxxx字符串开头即可.
    
    注: 这里所说的单词,并不是我们严格意义上的单词,比如 asdasd wasdas, 这里 asdasd wasdas对于计算机来说就是两个单词。但是[email protected]# 这种含有特殊字符的对于计算机来说就不是单词。
  • 伪类选择器(:)

    CSS2规则中所允许使用的伪类选择器

    
    
    CSS3中伪类选择器使用以及各浏览器的支持情况
    属性 描述 CSS
    :active 向被激活的元素添加样式。 1
    :focus 向拥有键盘输入焦点的元素添加样式。 2
    :hover 当鼠标悬浮在元素上方时,向元素添加样式。 1
    :link 向未被访问的链接添加样式。 1
    :visited 向已被访问的链接添加样式。 1
    :first-child 向元素的第一个子元素添加样式。 2
    :lang 向带有指定 lang 属性的元素添加样式。 2
     
    
    
    ===========================================================================================================
    
    常见的CSS3的规则  
    属性 描述 CSS
    :nth-child() 匹配父元素的第n个子元素 3
    :nth-of-type() 匹配某父元素下第几个某一个类型的元素 3
    :empty { sRules } 匹配没有任何子元素(包括text节点)的元素 3
    :checked { sRules } 匹配用户界面上处于选中状态的元素

    (用于input type为radio与checkbox时)

    3
            
    
    CSS3的这些规则大部分在IE--8中都是不能使用的,  关于CSS3的一些伪类选择器及其使用,详细请见CSS参考手册
  • 伪元素选择器(:或者::)
     

     常见的伪元素选择器如下:

    选择符 版本 描述
    :first-letter/E::first-letter CSS1/3 设置对象内的第一个字符的样式。
    :first-line/E::first-line CSS1/3 设置对象内的第一行的样式。
    :before/E::before CSS2/3 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
    :after/E::after CSS2/3 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
    ::placeholder CSS3 设置对象文字占位符的样式。
    ::selection CSS3 设置对象被选择时的颜色。

    CSS3推荐使用::写法,用以区分伪类选择器和伪元素选择器,但是使用:写法依旧有效。

    但是在使用:first-letter/E::first-letter时,IE6在使用该选择符时有个显式的BUG:选择符与包含规则的花括号之间不能紧挨    着,需留有空格或换行。

2.基本选择器的组合

基本选择器组合结果的复杂选择器无外乎以下几种:兄弟选择器,子选择器,后代选择器,组合选择器,群组选择器。

  • 兄弟选择器(+)

    兄弟选择器又称邻近选择器,选择邻近的元素.使用方式如下:

    selector1+selector2{
    } //由两个基本选择器,==》组合选择器


  • 子选择器(>)

    选择器,选择的是直接后代中所有符合条件的元素。

         selector1>selector2{
          color:red;
          }
  • 后代选择器(空格)

      后代选择器,选择的是子孙后代中所有符合条件的元素

    使用方式:
    
    selector1 selector2{
      color:red;
    }  //A B是基本选择器
  • 组合选择器()

         组合选择器,是两个基本选择器同时使用的情况,匹配需同时满足多个基本选择器

    使用方式如下:
    
    selector1selector2{  color:red; }

      

  • 群组选择器(,)

         群组选择器:选择器同时使用时,多个选择器之间是相互独立的
  • selector1,selector2{
    
    } //第一种
    =========================
    ========================= 两种使用方式,效果是一样的,只是第一种有利于代码的复用。
    selector1{
    
    }
    selector2{
    
    } //第二种       

==================================================================

==================================================================、

=====================================未完待续....下一篇,各类选择器的优先级

本篇中只是大致叙述了一下,CSS选择器的种类,讲的也比较浅显---如果详细学习,推荐

http://www.css88.com/book/css/selectors/pseudo-classes/index.htm...

时间: 2024-10-06 16:05:03

CSS系列------选择器和选择器的优先级的相关文章

CSS系列之后代选择器、子选择器和相邻兄弟选择器

后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用">"符号链接选择器 相邻兄弟选择器,是拥有相同父元素,且两个元素相邻,使用"+"符号链接 1. 后代选择器 比如如下html代码,em是h1的后代元素,如下css样式这样写,只会影响h1中的em标签的内容变为红色,不会影响p中em的内容 css: h1 em {color:red

我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style type="text/css"> h1 {color:red; font-size:14px;} </style> </head> <body > <h1>使用Css让h1标签字体变红</h1> </body> &

CSS中几种选择器和他们的优先级

CSS的基本选择器(三种) id或者class值不能用纯数字表示 可以有 "字母数字-_" 1.元素选择器                                         h1{.......} 2.ID选择器      只能作用于一个标签 因为一个页面中的id不能重复       #id1{......} 3.类选择器    可以作用于多个标签                                .class1{......} CSS的其他选择器 在不更改内

CSS系列:CSS3新增选择器

CSS系列:CSS3新增选择器 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略. E F 包含选择器 选择匹配F的元素,且该元素被包含在匹配E的元素内. E:link 链接伪类选择器 选择匹配E的元素,且匹配元素被定义了超链接并未被访问.例:a:link E:visi

***CSS魔法堂:选择器及其优先级

一.前言     首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::first-letter C. #main::before   D. [type="checkbox"]:checked E. ul#shop-list 二.回顾选择器类型           html片段 <body> <div id="content"&

css笔记09:选择器优先级

1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

前端之CSS的属性引入方式、选择器、选择器优先级

目录 1011 前端之CSS的属性引入方式.选择器.选择器优先级 一.CSS介绍 二.CSS语法 2.1CSS实例 2.2 CSS注释 三.css属性的引入方式 3.1 行内样式 3.2 内部样式 3.3 外部样式 四.CSS选择器 4.1 元素(标签)选择器 4.2 id选择器 4.3 类选择器 4.4 通用选择器 4.5 后代选择器 4.6 儿子选择器 4.7 毗邻选择器 4.8 兄弟选择器 4.9 属性选择器 4.10 分组和嵌套选择器 4.11 伪类选择器 4.12 伪类元素选择器 五.

CSS系列:CSS选择器

选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. CSS选择器包括:标记选择器.类别选择器.ID选择器及复合选择器. 1. 标记选择器 一个HTML页面由很多不同的标记组成,CSS标记选择器用来声明哪些标记采用哪种CSS样式.因此,每一种HTML标记的名称都可以作为相应的标记选择器的名称. 示例: <style type="text/css

03 通配符选择器 选择器深入讨论(父子选择器、多选择器并存问题、优先级)

通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器. * {margin: 0;padding: 0} *(表示所有的元素) 可以让所有html元素的外边框和内边距都默认为0,有时特别有用. 不同的浏览器对不同的左边距和上边距的指定大小是不一样的 一般网页设计师把被内边距和上边距清零,这样就可以避免不同浏览器因边距不同导致打开网页后布局混乱. 这样我们就可以通配符 Margin外边距:定义元素周围的空间. Padding内边距:元素边框与元素内容之间的空白. css11-1.