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. 简单实用的Boom 3D基础入门教程分享

    Boom 3D可以很大限度的弥补声音设备或是环境的不足,满足您更加高级的声学体验.Boom 3D用简单明了的方式帮助您设计声音,即使您不是专业的声音编辑,也可以达到专业相似的效果. 打开Boom 3D ...

  2. 常用命令合集『Postgres、Redis、Docker等等』每周更新，建议收藏备用

    Command CMD POSTGRES 进入数据库命令行 psql -U 用户名 -d 数据库名 psql -U example -d exampledb 导出数据库 pg_dump -U 用户名 ...

  3. 【PYTEST】第三章参数化

    知识点: 参数化 1. parametrize() 参数化测试用例 实际工作中,我们不可能就传一组数据,参数化支持多组数据测试,并且每组都会去执行,parametrize(), 第一个参数用逗号开分隔 ...

  4. java线程与内存的关系

    转载: https://blog.csdn.net/hellozhxy/article/details/91972846

  5. LaTeX的字体字号设置

    字体属性: 字体族代码及注释: 显示效果: 字体系列设置及字体形状设置代码及注释: 显示效果: 字体大小及中文字号的设置代码及注释: 显示效果: ctex文档有关中文字号的排版: ctex文档的打开方 ...

  6. java面试复习重点：类的管理及常用工具，教你抓住面试的重点！

    java复习: 类的管理及常用工具类 包 写在程序文件的第一行 一个Java 源文件中只能声明一个包, 且声明语句只能作为源文件的第一条指令 导入类能导入非public类,但是不能用因为在其他包缺省的 ...

  7. Guava中EventBus分析

    EventBus 1. 什么是EventBus 总线(Bus)一般指计算机各种功能部件之间传送信息的公共通信干线,而EventBus则是事件源(publisher)向订阅方(subscriber)发送 ...

  8. MOS管基础知识

    一些关于MOS管的基础知识,很多资料来源于网络. 场效应管(FET)分类:(按材料) 1. 结型 2. 绝缘栅型(MOS) 耗尽型:在SiO2绝缘层中掺入了大量的碱金属正离子Na+或K+(制造P沟道耗 ...

  9. WriteFile，CreateFile，ReadFile

    原文链接:https://blog.csdn.net/Jeanphorn/article/details/44982273 将数据写入一个文件.该函数比fwrite函数要灵活的多.也可将这个函数应用于 ...

  10. go语言之---数组(array)和切片(slice)

    一.数组 1.什么是数组? 1.数组是一系列同一类型数据的集合 2.数组中包含的每个数据被称为数组元素 3.一个数组中包含的元素个数成为数组长度 4.数组的长度是固定的 5.一个数组可以由零个或者多个 ...