前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS选择器

CSS选择器

作者头像
用户1624346
发布2018-04-18 10:46:51
1.3K0
发布2018-04-18 10:46:51
举报
文章被收录于专栏:calmound

CSS样式     1.内联式CSS样式表:把CSS代码直接写在现有HTML标签中          (1)<p style="color:red">这里是红色的字</p>          (2)<p> 这里是红色的字</p style="color:red">          注:CSS样式代码要写在style=""双引号中,如果右多条CSS样式代码设置可以写在一起,中间用分号隔开               <p style="color:red" ; font-size:12px>这里是红色的12像素的字</p>     2.嵌入式CSS样式表:把CSS代码写在<style type="text/css"></style>标签中间              <style type="text/css">                   span{                           color:red;                   }                         </style>              <body>                     <span>这里是红色的字</span>              </body>     3.外部式CSS样式:把CSS写在单独的一个文件中         在index.html文件中:                       <link href="style.css" rel="stylesheet" type="text/css" />                 <body>                     <span>这里是红色的字</span>                 </body>         在style.css文件中                  span{                      color:red;                 }        注:           1.CSS样式文件名称以有意义的英文字母命名,如main.css           2.rel="stylesheet" type="text/css"是固定写法不可修改           3.<link>标签位置一般写在<head>标签之内     三种方法的优先级:离修饰的内容距离越近越优先,就近原则

选择器       选择器{           样式       }       在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式"作用于网页中的哪些元素       标签选择器:html代码中的标签            p{pont-size:12px; line-height:1.6em;}               上面的p,就是一个p标签 类选择器            语法: .类选择器名称{CSS样式代码;}                英文圆点开头                名称可以随意起            例:               <style type="text/css">                  .stress{                       color:red;                   }                          </style>               <body>                  <span clss="stress"> 要修饰的文字</span>               </body>

ID选择器             ID选择器类似类选择器,区别在于               1.为标签设置id="ID名称",而不是class="类名称"               2.ID选择符的前面是#,而不是.             例:               <style type="text/css">                  #stress{                       color:red;                   }                          </style>               <body>                  <span id="stress"> 要修饰的文字</span>               </body> 注:ID选择器在文档中只能使用一次           可以用类选择器词列表方法为一个元素同时设置多个样式,ID选择器却不可以           例: .stress{                    color:red;               }               .bigsize{               font-size:25px;              }              <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>

  子选择器       即大于符号(>),用于选择指定标签元素的第一代子元素        例子:    

代码语言:javascript
复制
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>子选择符</title>
 6 <style type="text/css">
 7 .food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
 8 
 9 </style>
10 </head>
11 <body>
12 <p class="first">三年级时,<span>我还是一个<span>胆小如鼠</span>的小女孩</span>,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
13 <h1>食物</h1>
14 <ul class="food">
15     <li>水果
16         <ul>
17             <li>香蕉</li>
18             <li>苹果</li>
19             <li>梨</li>
20         </ul>
21     </li>
22     <li>蔬菜
23         <ul>
24             <li>白菜</li>
25             <li>油菜</li>
26             <li>卷心菜</li>
27         </ul>
28     </li>
29 </ul>
30 </body>
31 </html>

   包含(后代)选择器       即加入空格,用于选择指定标签元素下的后辈元素     注:与子选择器的区别:子选择器仅是指它的直接后代,或者可以理解为作用于子元素的第一代后代                                    而后代选择器是作用于所有子后代元素。

代码语言:javascript
复制
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>后代选择器</title>
 6 <style type="text/css">
 7 .first span{color:red;}
 8 
 9 .food li{
10     border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/    
11 }
12 </style>
13 </head>
14 <body>
15  <p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
16 <!--下面是本小节任务代码-->
17 <ul class="food">
18     <li>水果
19         <ul>
20             <li>香蕉</li>
21             <li>苹果</li>
22             <li>梨</li>
23         </ul>
24     </li>
25     <li>蔬菜
26         <ul>
27             <li>白菜</li>
28             <li>油菜</li>
29             <li>卷心菜</li>
30         </ul>
31     </li>
32 </ul>
33 
34 </body>
35 </html>

通用选择器      匹配html中所有标签元素 例子:

代码语言:javascript
复制
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>* 选择符</title>
 6 <style type="text/css">
 7 * {color:red;}
 8 
 9 
10 </style>
11 </head>
12 <body>
13     <h1>勇气</h1>
14     <p>三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
15     <p>到了三年级下学期时,我们班上了一节公开课,老师提出了一个很简单的问题,班里很多同学都举手了,甚至成绩比我差很多的,也举手了,还说着:"我来,我来。"我环顾了四周,就我没有举手。</p>
16     <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
17 </body>
18 </html>

  分组选择符    在html中多个标签元素设置同一个样式时,可以用分组选择符(,)    如:       h1,span{color:red;}       相当于:        h1{color;red;}          span{color:red;}

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014-11-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档