css选择器介绍

1.2 选择器

1.2.1 标签选择器


html 标签名  {属性:值;}
常用的属性:
    color                         前景色(文字颜色)
    background-color              背景色
    font-size                     设置文字大小
    width                         设置宽度
    height                        设置高度
    text-align:left|right|center   设置内容对齐方式(内容,图片)
    text-indent                    设置首行缩进
    
//举例:
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
    div{
        color:green;
        font-size: 25px;
        background-color: pink;
        width: 500px;
        height: 500px;
    }
    style>
head>
<body>
    <div>
        css学习css学习css学习css学习
    div>
body>
html>
1.2.1.1 单位介绍
px    像素
em    1em = 一个文字的大小
1.2.1.2 颜色的表示方式
  • 用英文单词直接设置颜色 red、green、pink......

  • 16进制表示 #0-f

    
     background-color: #D82F92;
     color: #0F0000;
  • 使用三原色表示 rgb

    将一个颜色,使用红(R,red), 绿(G,green), 蓝(B,blue)来表示。
    这3个叫做“基本颜色”,都按0-255分为256个层级。
    
    形式:rgb(红的配比, 绿的配比,蓝的配比);
    举例:background-color:rgb(23,25,65);
    
  • 使用rgba , 实现半透明效果

    
    A代表“透明度”,值从0到1的小数。0表示全透明。1表示不透明,此时就是RGB颜色
    形式:rgba(红的配比, 绿的配比,蓝的配比,透明度);
    background-color: rgba(25,5,35,0.5);                        
  • 使用opacity实现半透明

    
     background-color: #D82F92;
    
     opacity:0.3;    //取值:0~1
    
     注意:opacity会影响其中的文字也变化

1.2.2 类选择器

语法:  .自定义类名{属性:值}
举例:

...

 

文字颜色变红

  //调用类样式

注意:

  1. 一个类样式可以被多个标签同时调用

    
     

    ..红色..

    ..黄色..

    ..绿色..

  2. 一个标签可以同时调用多个类样式

    
     

    ....

类选择器的命名规范
  1. 起名的时候尽量起一些有意义的名字 , 最好在之前添加注释 , 以便自己查阅

  2. 不能使用纯数字或者以数字开头定义类名

  3. 不能使用特殊字符或者以特殊字符开头定义类名, 如:% $ & @

  4. 不推荐使用汉字定义类名

  5. 不推荐使用标签名定义类名

1.2.3 id选择器

id选择器的形式上是一个英文井号(#)后面紧跟一个id名。

id名是在标签上通过id属性而设定。我们可以自己设定id名。

如下所示:



这是一个信息化的时代

特别注意

一个网页中的id不能 “重名”(但class名可以重复)。

1.2.4 通配符选择器

通配符选择器非常简单,就一个星号(*),表示“所有标签”, 该选择器会将页面上的所有标签都选中。

*{ 属性:值 }

表示所有标签都应用该css样式的设定。

1.2.5 关系选择器

关系选择器是通过元素之间的“位置关系的特征”来确定所选元素。

1.2.5.1. 子代选择器:S1>S2

匹配S1中的下一级S2。下一级就是“子级”,或子代。

其中S1,S2都可以是独立使用的选择器(比如id选择器,class选择器,标签选择器等)。

比如 : S1为div, S2为p,即形式为"div > p",就表示找出div中的所有子级p标签。

又比如:

#p1>a{ ... } :表示找出id为p1的标签中的所有子代a标签。

.cc>p{ ... } :表示找出class为cc的标签中的所有子代p标签。

#p2>.cc2>img{ ... } :表示找出id为p2中的子代的class为cc2中的所有子代img标签。

1.2.5.2 后代选择器:S1 S2

匹配S1内部的所有后代S2。

此时就不仅仅局限于子代标签了,还包括孙代,曾孙代,等等。

简单说,就是找出放在S1所选中的标签中的所有S2所选中的标签。

比如:

div p{ ... } :匹配div中的所有后代p标签,即凡是放在div中的p标签都会找出来。

#p1 a{ ... } :匹配id为p1的标签中的所有a标签,即只要a标签在#p1中就可以。

.cc p{ ... } :匹配class为cc的标签中的所有p标签,即只要p标签在.cc中就可以。

#p2 .cc2 img{ ... } :匹配id为p2中的class为cc2中的所有img标签.

1.2.5.3 相邻选择器:S1+S2

匹配S1后面紧挨着的同级(兄弟)元素S2。

1.2.5.4 兄弟选择器:S1~S2

匹配S1后面的所有同级(兄弟)元素S2。

1.2.6 属性选择器

属性选择器是通过元素的属性的特征信息来确定所选元素。

1.2.6.1 [attr]

匹配具有所给定属性名称的标签。

其中attr是一个“示意性符号”,表示“属性名”。

比如:

[style] { background: yellow; } //能选中具有color属性的所有标签。

[class] { border: 1px solid red; } //能选中具有width属性的所有标签。

1.2.6.2 [attr="val"]

匹配具有某个属性且属性值为给定值的标签。

比如:

[color="red"] { background: yellow; } //能选中具有color属性且值为”red”的所有标签。

[width="100"] { border: 1px solid red; } //能选中具有width属性且值为”100”的所有标签。


....
1.2.6.3 [attr~="val"]

匹配具有某个属性且属性值包含所给定单词的标签。

注意:

1,必须是一个“单词”形式,比如属性值为”a dog”,则使用”dog”可以匹配,而使用”do”不能匹配。

2,对于中文,除非有明确的空格,否则一句连续的句子(含中文标点符号)也只能算一个单词。

<p title="a dog">...</p>

[title~="dog"]{ .... } //可以选中上面那个p标签

[title~="do"]{ ..... } //选不上。。。

1.2.6.4 [attr*="val"]

匹配具有某个属性且属性值包含给定的字符的标签。只要包含该字符就可以,不一定要是完整的词.

1.2.6.5 [attr^="val"]

匹配具有某个属性且属性值以给定的字符开头的标签。

1.2.6.6 [attr$="val"]

匹配具有某个属性且属性值以给定的字符结尾的标签。

1.2.7 伪类选择器

伪类选择器是通过单冒号(:)和特定的具有某种含义的单词来确定所选元素。

所谓伪类选择器,是相对于“类选择器”来说的,对比如下:

类选择器:

说明:类的名称是由我们程序员来设定的,符合命名规范就行。

形式:.类名称{ ... }

伪类选择器:

说明:伪类的名称是css标准中所预先设定的,我们不能自己设定。可用的伪类名不多。

形式::伪类名称{ ... }

1.2.7.1 :link, :visited, :hover, :active,

这4个伪类主要用于表示一个链接(也就是a标签)的4种不同状态。

它们可以设定一个链接在不同状态下的外观表现(样式表现)。

:link ——表示一个链接初始时候的状态。

:visited ——表示一个链接在访问(点击)过之后的状态。

:hover ——表示一个链接在“鼠标移上去”(鼠标悬停)的时候的状态。

:active ——表示一个链接在“活动状态”的时候的状态,通常就是点击的瞬间(按住不放能看到)。

注意:

1,:hover可以用于其它标签,并且经常用!

2,对于a链接的这4个状态,他们有顺序问题,必须按上述顺序才有合理效果(lvha,Lv哈)

1.2.7.1 E:focus

表示一个元素在成为可输入状态(获得焦点)的时候,主要用于表单元素。

其中“E”表示某个元素(或某个选择器所选中的元素)。

这样连着写,即表示该元素在获得焦点的时候,其样式表现如何。后面的“E”也都是这个意思。

也可以不用前面写“E”,而是直接用“:focus”,但实际应用中,一般会在前面有这个限定。

比如:

input:focus{ .... } //表示input元素在获得焦点的时候

也可以不用input,如下所示:

:focus{ .... }

但此时其实所选择的范围扩大了(不仅仅针对input元素)。

1.2.7.3 E:first-child, E:last-child, E:only-child, E:nth-child(n)

这几个伪类用于表示(或选中)“具有某种特征的子元素E”。

E:first-child ——匹配作为父元素的第一个子元素E。

E:last-child ——匹配作为父元素的最后一个子元素E。

E:only-child ——匹配作为父元素的唯一一个子元素E。

E:nth-child(n) ——匹配作为父元素的第n个子元素E。括号中的n是一个具体数字

还可以这样用:nth-child(2n+1)表示奇数项, nth-child(2n+2)表示偶数项

举例:

li:first-child{ ... } //表示作为第一个子元素的li标签

td:last-child{ ... } //表示作为最后一个子元素的td标签

p:only-child{ ... } //表示作为父元素中只有这一个子元素的p标签

li:nth-child(2){ ... } //表示作为第2个子元素的li标签

注意:

上述也可以单用(不要冒号前面的部分),但一般较少这样用。

1.2.7.4 E:empty,E:checked,E:enabled,E:disabled

E:empty

——匹配元素内部为空(没有内容)的元素。

“内容”指的是一个标签内是否有其他html代码或文字。显然,单标签内是不可能有内容的。

E:checked

——匹配被选中的元素(用于input且type为radio或checkbox的时候)

E:enabled

——匹配“可用的/有效的元素”(用于表单元素)。

E:disabled

——匹配“不可用的/有效的元素”(用于表单元素)。

1.2.8 伪元素选择器

伪元素选择器是通过双冒号(::)和特定的具有某种含义的单词来确定所选元素。

伪元素选择器通常是“本没有这个元素(标签)”,但会创建出一个隐性元素并对其进行样式设定。

伪元素选择器又称为“伪对象选择器”。

1.2.8.1 E::before

表示在元素E的内部的最前面创建一个元素(伪元素)。

其中必须写上一个属性:content:”内容”; //当然,内容可以为空。

1.2.8.2 E::after

表示在元素E的内部的最后面创建一个元素(伪元素)。

其中必须写上一个属性:content:”内容”; //当然,内容可以为空。

表示将元素E中“选中的文字”单独作为一个元素(伪元素)。

1.2.8.3 E::first-letter

表示元素E中的“第一个字符”可以单独作为一个元素(伪元素)。

1.2.8.4 E::first-line

表示元素E中的“第一行”可以单独作为一个元素(伪元素)。

1.2.9 常见选择器的组合

1.2.9.1 E.className

举例:

div.c1{ .... }

p.cc2{ .... }

注意:他们是“紧挨在一起的”! 否则就成为了后代选择器了。

1.2.9.2 E#id

div#id1{ ... }

p#id2{ ... }

1.2.9.3 E[属性选择器]

[src] //找所有有src属性的标签

img[src] //找img标签并且有src属性

img[src*="dog"] 找img标签并且有src属性并且属性中包含“dog”这个字符!

1.2.9.4 并集选择器:S1, S2

两个选择器,可以使用一个英文逗号(,)连接起来。

表示这两个选择器,都使用同样一个样式设定(属性设定)。

比如:

p, div{ ... }

#price, .addr{ ... }

p.cc, .cc, div .cc2{ ... }

1.2.9.5 更复杂的选择器组合举例

#main .container div { .... }

#main .box>p[align="center"] { .... }

table#m2 div .box2 p:nth-child(2) { .... }

div#m1 .box1 div input[type='text']:focus { .... }

你可能感兴趣的:(CSS学习总结)