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. Sonar检测Math.abs(new Random().nextInt()) “Use the original value instead”

    今天早上旁边同事喊我看一个Sonar检测出的问题: 当时看了好几眼没觉得这个有太大问题,于是又看了下Sonar建议: 这是说Math.abs()方法使用在数字上面可能返回最小值,觉得这个挺有意思的,于 ...

  2. mysql 分组查询

    mysql 分组查询 获取id最大的一条 (1)分组查询获取最大id SELECT MAX(id) as maxId FROM `d_table` GROUP BY `parent_id` ; (2) ...

  3. js控制某个div在页面加载完成5秒后隐藏

    <div id="k">测试</div><script>setTimeout("document.getElementById('k' ...

  4. 【linux】串口通讯工具-minicom简介+简单操作

    目录 前言 简介 尝试运行 配置 minicom 运行 minicom minicom 其它操作 前言 windows 上有不少的串口通信工具了,今天介绍一个linux下的一个串口通信工具-minic ...

  5. 1. git简介

    1.1 版本控制理解 版本控制 工程设计领域中使用版本控制管理工程蓝图的设计过程,在 IT 开发过程中也可以使用版本控制思想管理代码的版本迭代 集中式版本控制工具 CVS.SVN.VSS等 分布式版本 ...

  6. C语言讲义——变量的输出

    变量输出·常规 头文件:stdio.h 函数: printf("%", ); 需要占位符%_,要输出几个变量就需要几个占位符. 类型 占位符 助记 int %d d表示十进制dec ...

  7. Appium上下文和H5测试(二)

    坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 文章总览图 一.往期回顾 loc='new UiSelector().text("全程班&q ...

  8. Redis/Mysql/SQLite/MongoDB 数据库对比

    一.Redis: redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(so ...

  9. PyQt(Python+Qt)学习随笔：Qt Designer中主窗口对象documentMode属性

    documentMode属性表示当前主窗口是否启用文档模式,如果是则主窗口的选项卡部件会以适合操作文档的模式呈现,这类似于macOS上的文档模式. 设置此属性时,界面上不会呈现选项卡部件框架.此模式当 ...

  10. PostMan参数传递

    一.先取出返回中需要用的值,并设置变量 二.传入下一接口中