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整理C语言知识点

    C语言是一门非常基础的编程语言,学习它的难点不在于语言的理解,而在于繁琐的记忆点,而当我们使用思维导图将细碎的知识点拉到框架中去后,C语言的难度就大大降低了. 接下来就为大家介绍一下我使用iMindM ...

  2. Camtasia Studio，一款好用到爆炸的视频录制软件

    目前网络中有很多视频录制软件,各有特色,经过亲测今天小编为大家推荐一款比较好的视频录制软件就是Camtasia Studio软件,Camtasia支持视频的高清录制以及视频的导入导出,而且最支持导出的 ...

  3. distinct关键字

    对于distinct关键字,distinct关键字应用于所有列而不仅是前置它的列,如果给出多个列,将会比较两个列. 这是完整表, 首先是select distinct username from us ...

  4. Contest 1445

    A \(a\) 中第 \(i\) 小的配 \(b\) 中第 \(i\) 大的. 限制相同,这样配最平均. 时间复杂度 \(O\left(tn\log n\right)\). B 最终的一百名至少是第一 ...

  5. Linux服务器学习----tomcat 服务配置实验报告（一）

    一.实验目的 1. 掌握 tomcat 服务的搭建 二.实验内容 1. 搭建一台缓存 tomcat 服务器 三.实验环境1. tomcat 服务器 centos7 对应主机 ip 为 10.10.64 ...

  6. JavaScript原型链及其污染

    JavaScript原型链及其污染 一.什么是原型链? 1.JavaScript中,我们如果要define一个类,需要以define"构造函数"的方式来define: functi ...

  7. day102:MoFang:后端完成对短信验证码的校验&基于celery完成异步短信发送&flask_jwt_extended&用户登录的API接口

    目录 1.用户注册 1.后端完成对短信验证码的校验 2.基于celery实现短信异步发送 2.用户登录 1.jwt登录验证:flask_jwt_extended 2.服务端提供用户登录的API接口 1 ...

  8. 【2020.12.02提高组模拟】球员(player)

    题目 题目描述 老师们已经知道学生喜欢睡觉,Soaring是这项记录保持者.他只会在吃饭或玩FIFA20时才会醒来.因此,他经常做关于足球的梦,在他最近的一次梦中,他发现自己成了皇家马德里足球俱乐部的 ...

  9. Java中正则表达式的使用（常用的方法）

    这两天回想了一下正则表达式的使用,顺便就总结了一下java的javascript中使用正则表达式的用法,需要看javascript中使用正则的朋友可以看我的另一篇总结,下面我就简单的介绍一下java中 ...

  10. PyQt（Python+Qt）学习随笔：QMainWindow的tabifyDockWidget方法将QDockWidget两个停靠窗选项卡式排列

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 主窗口的tabifyDockWidget方法用于将主窗口的两个停靠窗口 ...