CSS选择器就是 通过选择器来 定位 你要控制的样式的部分，分为以下几种

　　1.HTML选择符（标签选择器）

　　　　就是把HTML标签作为选择符使用

　　　　如 p {.......} 网页中所有的P标签采用此样式

　　　　     h2 {........} 网页中所有h2标签采用此样式

　　2.class类选择器 （使用 . 将自定义名{类名} 来定义的选择器 ）

　　　　使用语法：  <html 标签 class=“类名”></html标签>

　　　　.类名{

　　　　　　color=xxx;

font-size=xxx;

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>选择器练习</title>

    <style type="text/css">



        .name1{

            font-size: 15px;

            color: red;

        }

        .name2{

            font-size: 20px;

            color: blue;

        }

    </style>

</head>

<body>

  <h1>

   这是标题一

  <p class="name1">美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p>

  </h1>

  <h2 class="name2">

      美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻

  </h2>

</body>

</html>

　　3.ID选择器

　　　　定义： #id 名 { 样式 }

　　　　使用：<html 标签 id="id名" >....</htmL标签>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>选择器练习</title>

    <style type="text/css">



        #p1{

            font-size: 40px;

            color: #999;

        }

        #p2{

            font-size: 20px;

            color: blue;

        }

    </style>

</head>

<body>

  <h1>

   这是标题一

  <p id="p1">美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p>

  </h1>

  <h2 id="p2">

      美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻

  </h2>

</body>

</html>

特点：ID是唯一的，如果id不唯一的话，也不会报错

　　　4.通配符选择器

语法：

　　　　*{ key : value ; key : value }

　　　　功能：对所有HTML标签起作用（一般用于页面的初始化工作，统一字体，边框，内外边距）

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>选择器练习</title>

    <style type="text/css">

        *{

            color: red;

        }



        #p1{

            font-size: 40px;

        }

        #p2{

            font-size: 20px;

        }

    </style>

</head>

<body>

  <h1>

   这是标题一

  <p id="p1">美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻</p>

  </h1>

  <h2 id="p2">

      美媒：拜登目前所获选票数为历届总统候选人之最|拜登|总统|贝拉克·侯赛因·奥巴马|大选_网易新闻

  </h2>

</body>

</html>

特点：通配符选择器一般写到样式的最前面

5.关联选择器（只控制标签中的一部分）

等等等等，还有很多的标签选择器 ~ ~ ~

CSS练习 —— css选择器的更多相关文章

  1. CSS基础及选择器

    CSS层叠样式表与表相分离.常用CSS2和CSS3. HTML引入CSS 1.行内样式 <div style="color:red"></div> 2.内部 ...

  2. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  3. Lining.js - 为CSS提供 ::nth-Line 选择器功能

    在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际 ...

  4. CSS 子元素选择器与后代选择器区别实例讲解

    css子元素选择器和后代选择器在功能描述上非常相同,但是他们其实是有区别的,本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别,需要的朋友可以参考一下. 首先我们来了解一下子元素选择器与 ...

  5. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  6. CSS的总结(选择器,伪类等...)

    关于组合选择器可参考:http://www.cnblogs.com/starof/p/4453458.html 主要内容 CSS概述 CSS和HTML结合的四种方式 CSS样式优先级和代码规范 CSS ...

  7. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  8. CSS之后代选择器与多类选择器

    <新人报到,欢迎拍砖#- -> 一.后代选择器 说起CSS的后代选择器.它属于派生选择器中的一种,两者附属关系如下: -->派生选择器 ----CSS 后代选择器 ----CSS 子 ...

  9. 日常：css样式、选择器、个别知识点、数组array

    优先加入css引入文件定义,个别的在下面用style改变.(从左往右,从上往下)CSS样式表1.内联样式表(优先级最高)(改个别的)<div style="width:100px; h ...

  10. jQuery的hover方法搭配css的hover选择器，实现选中元素突出显示

    问题简述: 今天做帮一个师姐做网页遇到一个这样的要求: 鼠标不移动进表格,表格透明度不变. 鼠标移动进表格,hover到的单元格透明度不变,没hover到的单元格透明度改变. 先贴我已经实现好的效果, ...

随机推荐

  1. iMindMap思维导图中可以插入哪些附件？

    iMindMap(Windows系统)不仅拥有灵活的排版功能,而且还允许用户插入多种附件,丰富思维导图的内容.用户可以为思维导图添加图片.网址.录音等文件,让导图更显生动性.实用性. 将图片.录音等文 ...

  2. 带你体验Folx的智能化下载功能

    BT下载器,也就是种子下载器,其优点是下载的人越多,下载的速度就越快,可以更快速地下载热门资源.这是因为,每个下载种子的用户,在下载的同时,也会上传资源,从而加速其他用户的下载速度. Folx软件,作 ...

  3. 详细了解IDM的队列功能

    队列的种类 IDM(Internet Download Manager)下载器的队列分为2种:主要下载队列和同步队列.此外,我们也可以自己创建附加队列. 在左边的[分类]窗口中,黄色的图标为主要下载队 ...

  4. 教你怎么设置Vegas渲染输出的选定范围

    在制作视频时,很多用户进行到渲染时,常常会发生这样那样的问题,导致导出的视频效果不甚理想.归结原因,还是用户在渲染输出时的选定范围存在问题. 接下来小编就为大家具体介绍下:vegas如何设置渲染输出的 ...

  5. word-流程图

    将 业务洽谈 签订合同 客户付费 发货 收获 信息反馈 制作成流程图: 插入-SmartArt-根据需要选择图形,如下图所示 点击红框选中部分,变成如下图所示,将要编辑的内容选中复制粘贴进去,一般最后 ...

  6. 对KVC和KVO的理解

    html { overflow-x: initial !important } :root { --bg-color: #ffffff; --text-color: #333333; --select ...

  7. 蓝桥杯——螺旋折线(2018JavaB组第7题19分)

    螺旋折线(18JB-7-19') 如图p1.pgn所示的螺旋折线经过平面上所有整点恰好一次. 对于整点(X, Y),我们定义它到原点的距离dis(X, Y)是从原点到(X, Y)的螺旋折线段的长度. ...

  8. JVM(四)-虚拟机对象

    概述: 上一篇文章,介绍了虚拟机类加载的过程,那么类加载好之后,虚拟机下一步该干什么呢.我们知道java是面向对象的编程语言,所以对象可以说是java'的灵魂,这篇文章我们就来介绍 虚拟机是如何创建对 ...

  9. JZOJ8月8日提高组反思

    JZOJ8月8日提高组反思 T1 一开始打了个暴力 后来突然觉得是不是可以构造答案 然后就奇奇怪怪的调了1h 结果呢 Re-- 估计还是没调完 T2 这这这 好熟悉 往0点连,然后最小生成树跑一遍 结 ...

  10. 老猿学5G：多量纲计费与QoS的QCI、5QI、ARP、GBR和MBR

    ☞ ░ 前往老猿Python博文目录 ░ 一.多量纲计费 多量纲计费是与传统的计费模式相区别的一种计费模式,传统的计费基本上都是通过使用量.使用时长或包固定时长等方式计费,而多量纲计费是指在考虑以上方 ...