CSS的选择符（二）

通用选择符

通用选择符是一个特殊的群组选择符，就是用通配符*表示任意标记，为页面中的所有元素定义通用的样式规则
例如 * { margin:0; padding:0; }

  如果为body定义样式表 body { 样式规则; } 则有些样式在子元素中不能继承，尤其对<h>、<table>等标记不起作用，而*通用选择符样式表则对所有标记有效。

试一试：W3C实例

群组选择符

群组选择符可以为任意多种不同类型的选择符定义一个统一的样式表。
例如：p, h3 { 样式规则; }
则该样式表对页面中所有的<p>和<h3>标记都有效。
再如：#first, .sec, .item, p { 样式规则; }
试一试：W3C实例

后代选择器

使用空格表示后代选择器，又称为包含选择器。用于选择元素内部的元素(包括儿子,孙子,重孙子等)，称为其后代。

使用格式：

element1 element2 {
    样式规则1;
    样式规则2;
    ...
}

例如：h2 span{color:red;text-decoration:underline;}

仅对包含在指定父元素内符合条件的子元素有效。

例:选择并设置位于
元素内部的每个
元素的样式：

div p
{ 
   background-color:yellow;
}

试一试：W3C实例

包含选择符中多个选择符中的第一个选择符可以是html标记名、class类和id选择符中任意一种，最后一个选择符则通常都是html选择符

例如：（实际敲代码）

div span { 样式规则; } 
div p span { 样式规则; } 
#sidebar  img { 样式规则; }
.fancy  td { 样式规则; }

补充：span标签

若要特别强调一段文字内部的某几个字，可采用SPAN标签设置

<SPAN>是行内容器标签，不可以包含图片、标题、段落等，只能包含文字内容

<html>
  <body>
    <h2>所有韩款童装<span style=“color:#FF66FF; font- 
       size:50px;”>10</span>元/件起拍喽
    </h2>
    <img src="show.gif" width="360" height="195"><BR/>
  </body>
</html>

子代选择器

使用>表示子代选择器，也称子元素选择器。与后代选择器相比，子元素选择器只能选择作为某元素直接子元素的元素。如果在指定页面元素的时候，我们不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，就可以使用子代选择器。

使用格式：

element1>element2 {
    样式规则1;
    样式规则2;
    ...
}

例如div>p，仅仅表示当前

元素中的子代（不包含孙子...）元素<p>。

如果要对父元素标记内包含的某种特定子标记定义样式，可使用子代选择器。
与包含选择符不同的是，子对象选择符只对父元素内一级子元素定义样式
例子：选取父元素是
元素的每个 <p> 元素，并设置其背景色：

div>p
{ 
background-color:yellow;
}

试一试：W3C实例

例子：

<head>
<style type=“text/css”>
 .content{width:450px;height:80px;font-size:12pt;border:blue 1px solid;}
 .content>#left{color:red;font-size:22pt;font-weight:bold;}
</style>
</head>
<body class=‘content’>
  <div>页面内容</div>
  <div id=‘left’>叠加样式</div>
</body>

综合练习

小综合：运行以下代码，并分析代码中都有哪些选择符？

<!DOCTYPE html>
<html>
    <head>
       <style>
         * { margin:0;  padding:0; }
          h1,p{ text-align:center;}          
         
          
          #content>p
          {
    text-align:right;
}
          #content p{
             background-color:yellow;
          }
       </style>
    </head>
    <body>
       <h1>欢迎来到我们的主页</h1>
       <div id="content">
          <p>唐老鸭，米老鼠</p>
          <div>
              <p>我是唐老鸭。</p>
              <p>我住在 Duckburg。</p>
              <p>我最好的朋友是米老鼠。</p>
              <p>我是米老鼠。</p>
              <p>我住在 Duckburg。</p>
              <p>我最好的朋友是唐老鸭。</p>
          </div>
       </div>
   </body>
</html>

对比练习：

<!DOCTYPE html>
<html>
<head>
<style>
div span /*后代选择器*/
{
background-color:yellow;
}
div>span /*子代选择器*/
{
color:red;
}
</style>
</head>

<body>
<h1>欢迎来到我到的主页</h1>

<div><span>123</span>
<p>我是<span>唐老鸭</span>。</p>
<p>我住在 Duckburg。</p>
</div>

<p>我最好的朋友是米老鼠。</p>

<div>
<span><p>我的样式不会改变。</p></span>
</div>

</body>
</html>

“更高级”选择符

相邻选择符

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

试一试：W3C实例

属性选择符

属性选择符可以根据元素的属性及属性值来选择元素。

属性选择符必须在选择符后面用中括号[ ]包含指定的属性，且选择符与[ ]之间不能有空格，一般只定义一些与字体样式有关的简单样式规则。

简单属性选择器

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

例子：

把包含标题（title）的所有元素变为红色，可以写作：

[title] {color:red;}

只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

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

可以采用一些创造性的方法使用这个特性。

试一试：W3C实例

具体属性选择器

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

img[alt] {border: 5px solid red;}

试一试：W3C实例

伪对象（伪元素）选择符

- 设置指定标记内第一行文本的样式p::first-line {color:blue;}
- 置指定标记内第一个字符的样式p::first-letter {color:red; font-size:24pt;}
- 在CSS3中推出了大量的伪对象选择符，例如::after、::before、::placeholder、::selection等等，此处不做详细介绍，感兴趣的读者可自行查阅相关资料。

例子：

<html>
<style type="text/css">
 #main:first-letter{ color:blue; font-size:3em; font-weight:bold;}
 #main:first-line{ color:red; font:bold 1.5em "黑体";} </style>
</head>
<body>
 <p id="main">2019年1月24日，中共中央总书记、国家主席、中央军委主席习近平来到河北省张家口市，看望慰问基层干部群众，考察脱贫攻坚工作。这是习近平在张北县小二台镇德胜村村民徐学海家中看望。新华社记者 李涛 摄</p>
</body>
</html>

试一试：W3C实例

首字下沉的设置方法：https://www.h5course.com/a/2015042739.html

伪类选择符

伪类的名称是由系统定义而不是用户随意指定的

伪类样式可以继承、覆盖父标记定义的样式。

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

样式规则的优先级

如果页面中定义了若干样式规则，到底按照哪个显示呢？

优先级由低到高依次为：

通用选择符→标记名选择符→class类选择符→id选择符→包含选择符→行内选择符

用!important提高样式优先级

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>!important</title>
</head>
<style type="text/css">
    #test p{
        color: #000;
    }
    .fontstyle{
        color:#00FF00 !important;
    }
</style>
<body>
    <div id="test">
        <p class="fontstyle">样式带有!important的元素优先级最高</p>
    </div>
</body>
</html>   //.fontstyle样式使用了!important，所以有优先级最高，覆盖掉#test p的color样式

下一节项目实训2-2

返回网页设计与开发

CSS的选择符（二）

目录

通用选择符

群组选择符

后代选择器

补充：span标签

子代选择器

综合练习

“更高级”选择符

相邻选择符

属性选择符

简单属性选择器

具体属性选择器

伪对象（伪元素）选择符

伪类选择符

样式规则的优先级

导航菜单

个人工具

命名空间

变种

视图

更多

搜索

导航

工具