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. jQuery 第十章 工具方法-高级方法 $.ajax() $.Callbacks() .....

     $.ajax() $.Callbacks() $.Deferred() .then() $.when() ---------------------------------------------- ...

  2. 理解go语言的shellcode加载器

    序言 本文假设你知道unsafe包常见函数的用法,若否,请查看 https://books.studygolang.com/gopl-zh/ch13/ch13-01.html  第13章. 例子和代码 ...

  3. Java反射——读取XML文件，创建对象

    读取XML文件,创建对象 config.xml <?xml version="1.0" encoding="UTF-8"?> <beans&g ...

  4. 1.Cobaltstrike 安装与简介

    1.Cobaltstrike 安装与简介 一.简介 Cobalt Strike是一款美国Red Team开发的渗透测试神器,常被业界人内称为CS.自去年起, Cobaltstrike升级到3.0版本, ...

  5. 一周一个中间件-hbase

    前言 hbase是大数据的生态的一部分,是高可靠性.高性能.列存储.可伸缩.实时读写的数据库系统.介于nosql和RDBMS之间.主要存储非结构化和半结构化的松散数据. 海量数据存储 快速随机访问 大 ...

  6. Verilog之阻塞赋值非阻塞赋值

    verilog设计进阶 时间:2014年5月6日星期二 主要收获: 1. 阻塞赋值与非阻塞赋值: 2. 代码测试: 3. 组合逻辑电路和时序逻辑电路. 阻塞赋值与非阻塞赋值: 1. 阻塞赋值" ...

  7. 面经手册 · 第20篇《Thread 线程，状态转换、方法使用、原理分析》

    作者:小傅哥 博客:https://bugstack.cn Github:https://github.com/fuzhengwei/CodeGuide/wiki 沉淀.分享.成长,让自己和他人都能有 ...

  8. NetSuite实现pdf打印中的条形码的功能

    2020-11-27 提起NS,在程序员这一块应该不怎么被人知道,算是比较小众的一门技术了,毕竟Netsuite兴起的时间算不上早,进入中国的时间更晚,除了从事这一块的程序员,可能都没有见过,恰好我是 ...

  9. PyQt开发案例：结合QDial实现的QStackedWidget堆叠窗口程序例子及完整代码

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.案例说明 本案例是老猿在学习QStackedWidget中的一个测试案例,该案例使用QStack ...

  10. PyQt（Python+Qt）学习随笔：枚举类QTreeWidgetItem.ItemType、QListWidgetItem.ItemType的取值及含义

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在Model/View的便利类QTreeWidget.QListWidgetItem中的项类型分别是 ...