你的位置:首页 > 网页设计

[网页设计]CSS学习笔记:选择器


一、元素选择器

HTML文档元素就是最基本的选择器

如:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">  p {color:blue;}</style></head><body>  <p>这一段话是蓝色的。</p></body></html>

示例将<p>元素的字体颜色设置为了蓝色,元素选择器将作用于文档内所有的<p>元素。同样,我们也能够同时为多个元素应用一种样式,如:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">  h1,p {color:blue;}</style></head><body>  <h1>标题颜色</h1>  <p>这一段话是蓝色的。</p></body></html>

为多个元素应用样式时,用逗号分隔。

*作为通配选择器,可以与任何元素匹配。

格式:元素|通配符

二、类选择器

类选择器的样式与元素关联,需要为class属性指定一个适当的值,如:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><style type="text/css">  .one {color:blue;}</style></head><body>  <p class="one">第一段。</p>  <p>第二段</p>  <p class="one">第三段</p></body></html>

格式:.类名

代码中有3个<p>元素,其中有两个指定了class属性,即,在<style>中使用.one类选择器指向这两个<p>元素。与元素选择器不同的是类选择器以[.]开头后面跟上指定的class属性值。类选择器可以对多个且不同元素指定同样的class值。

三、多类选择器

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>index</title>  <style type="text/css">    .one {color:blue;}    .two {color:red;}    .one.two {color:green;}  </style></head><body><p class="one two">第一段。</p><p class="two">第二段</p><p class="one">第三段</p></body></html>

 

效果:

格式:.类名1.类名2……

多类的概念在于可以对class指定多个属性值,如我们为<p>指定了,那么这个<p>元素的class属性就包含了两个属性值"one"和"two",中间空格作为分隔符。在样式表中则使用[.属性值1.属性值2|……]来指向元素。上面的代码中,我们对class值为"one"的元素颜色应用蓝色,class值含有"two"的元素应用红色,为class值同时含有"one"和"two"的元素颜色应用为绿色。如果在样式表中没有为指定.one.two{color:green;},那么<p >第一段。</p>呈现出来的效果是什么呢?答案是红色。因为.one和.two都会指向满足条件的<p >第一段。</p>,这时候样式就会依照层叠来应用样式了。

四、ID选择器

同类选择器类似,但匹配的是id属性,而不是类选择器的class属性。与类选择器不同的是,在一个HTML文档中,ID选择器会使用一次,而且仅一次,虽然在很多浏览器中指定id属性值能够出现多次,但这是不正确的,而且如果在JavaScript中使用getElementById()方法时,会造成不必要的错误。通过#元素ID属性值来指向元素。如:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>index</title>  <style type="text/css">    #p1 {color:blue;}  </style></head><body><p id="p1">第一段。</p><p>第二段</p><p>第三段</p></body></html>

格式:#ID属性值

五、属性选择器

注意:Safari、Opera和所有基于Gecko的浏览器都支持属性选择器,在IE5/Mac和IE6/Win之前,IE并不支持属性选择器。

1.简单属性选择器

  使用情况:如果希望有某个属性的元素,不在乎属性的值是什么。可以使用简单属性选择器。

  

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>index</title>  <style type="text/css">    p[class] {color:blue;}     </style></head><body><p class="one">第一段。</p><p class="two">第二段</p><p>第三段</p></body></html>

效果:

格式:元素|通配符[属性]

可以看到含有class属性的<p>元素的颜色变成了蓝色,并且对class的值并不关注。

还可以根据多个属性进行选择,如:a[href][title]{font-weight:bold;}     //对同时具有href属性和title属性的<a>元素变成粗体。

2.根据具体属性值选择

上面的例子是不关注属性值的选择器,那么现在我们要讲的就是需要关注属性值的选择器了。我们将上面的例子改变一下:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>index</title>  <style type="text/css">    p[] {color:blue;}  </style></head><body><h1 class="one">123</h1><p class="one">第一段。</p><p class="two">第二段</p><p>第三段</p></body></html>

效果:

格式:元素|通配符[属性=属性值]

我们可以看到p[]等同于p.one,但是使用属性选择器可以针对其它属性值来选择元素,而不单单是达到类选择器的效果。

3.根据部分属性值选择

如果属性能接受词列表(词之间用空格分隔),可以根据其中任意一个词进行选择,如:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>index</title>  <style type="text/css">    h1[class~="box"]{color:blue;}  </style></head><body><h1 class="one two box">123</h1></body></html>

效果:

格式:元素|通配符[属性~=属性部分值]

更高级的css选择器(CSS2):

[foo^="bar"]    选择foo属性值以"bar"开头的所有元素

[foo$="bar"]    选择foo属性值以"bar"结尾的所有元素

[foo*="bar"]    选择foo属性值中包含字串"bar"的所有元素

4.特定属性选择类型

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>index</title>  <style type="text/css">    p[lang|="en"]{color:blue;}  </style></head><body><p lang="en">段落1</p><p lang="en-a">段落2</p><p lang="en-b">段落3</p><p lang="cn-en">段落3</p><p lang="encn">段落4</p></body></html>

这个规则会匹配lang属性等于en或者以en-开头的所有元素,encn也不会起作用,因为不是en-开头,效果:

格式:元素|通配符[属性|="属性值"

六、后代选择器

h1 em{color:blue;}

可以看作对作为h1后代元素的em元素颜色改为蓝色,用代码展示就是:

<h1><em>123</em></h1>

需要注意的是,这里是后代元素,而不只是子元素,如下面的代码也是有效的:

<h1><b><em>123</em></b></h1>

如果只想缩小范围,选择子元素而不是后代元素,则可以使用下面的方式:

h1 > em{color:blue;}

选择相邻兄弟元素,如:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>index</title>  <style type="text/css">    h1+p{color:blue;}  </style></head><body><p>段落1</p><h1>段落2</h1><p>段落3</p><p>段落3</p><p>段落4</p></body></html>

效果:

通过h1+p匹配了之前的兄弟元素是<h1>的所有符合要求的<p>元素,如果<p>元素之前元素隔着其它元素,则不符合匹配要求,但中间只隔着文本内容并不会影响匹配。

接下来我们要讲的就是更有意思伪类和伪元素了。

伪类

1.链接伪类

:link           指示作为超链接(即有一个href属性)并指向一个未访问地址的所有锚。有些链接会不正确的解释

:visited      指示作为已访问地址超链接的所有锚

例子:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>index</title>  <style type="text/css">    a:link {color:blue;}    a:visited{color:red;}  </style></head><body><a href="#1">被点击过了了</a><a href="#2">未被点击</a></body></html>

结果:

链接伪类也适用于ID选择器,如:

a#one:link{color:yellow;}

2.动态伪类

:focus             当前拥有输入焦点的元素

:hover             指示鼠标停留元素

:active             指示被用户输入激活的元素

例子:

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>index</title>  <style type="text/css">    input:focus{background-color:black;}    a:hover {background-color:yellow;}    a:active{background-color:red;}  </style></head><body><input type="text"><a href="#6">例子</a></body></html>

无操作效果:

文本框获得焦点效果:

鼠标在文字上停留效果:

鼠标在文字上按下左键时效果:

伪元素

1.设置首字母样式

如将<p>元素中第一个字母变成红色:

p:first-letter{color:red;}

效果:

2.设置第一行的样式

如:

p:first-line{color:red;}

效果:

3.设置之前和之后元素的样式

如:

h2:before{content:"<<";color:blue;}h2:after{content:">>";color:red;}

效果:

 

 

第一次写博客,免不了诸多错误,仅作为个人学习笔记。作为一名在校学生,希望大家多多指教。