常见的css选择器包含：常用选择器、基本选择器、层级选择器、伪类选择器、属性选择器，其中常用选择器分为：1.html选择符*{}//给页面上所有的标签设置模式；2.类选择符.hcls{}//给class是hcls的一类标签设置模式；3.id选择符#h3{}//给id是h3的标签设置样式；4.关联选择符#div h1、#div h1.ljhcls；5.div,h1,pmspan,button{}基本选择器分为:first-child第一个、::first-letter第一个字母、::fist-line第一行、:last-child最后一个元素、:nth-child(n)第几个元素，层级选择器分为a,b组合、a b后代、a>b子代、a+b a的一个是b，伪类选择器:hover鼠标经过、:focus焦点、::selection文字选中背景色，属性选择器[属性]、[属性=值]、[属性~=值]//包含任意一个值、[属性^=值]以什么开始、[属性$=值]以什么结束。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>学习css常用基本层级伪类属性选择器</title>

     <style type="text/css">

     /*常用选择器*/

     /*html选择符*//* *{}给页面上所有的标签设置模式*/

     *{

         color: royalblue;

     }

     /*类选择符*//*.hcls{}给class是hcls的一类标签设置模式；*/

     .hcls{

         font-weight: bold;

     }

     /*id选择符*//*#h3{}给id是h3的标签设置样式 */

     #h3{

         font-style: italic;

     }

     /*关联选择符 */

     div h1{

         font-size: 18px;

     }

     /*组合选择符*/

     div,button{

         background-color: #ccc;

         margin: 5px;

     }

     /*基本选择器*/

     /*::first-letter */

     #h3::first-letter{

         font-size: 30px;

     }

      /*::first-line */

      .h4::first-line{

          color: red;

      }

      /*:first-child */

      .shuiguo li:first-child{

         color:#f90;

      }

      /*:last-child */

      .shuiguo li:last-child{

         text-decoration: line-through;

      }

       /*:nth-child(n) */

       .shuiguo li:nth-child(2){

         text-decoration: overline;

         background-color: sienna;

      }

      /*层级选择器*/

      /*a,b组合 */

      #h3,.box{

         background-color: #ccc;

         margin: 5px;

     }

     /*a b a后代中的b */

     .h4 p{

         text-decoration: overline;

         font-size: 30px;

     }

     /*a>b a的子元素b */

     div>p{

         font-style: italic;

     }

     /*a+b a后面的第一个元素b */

     div+span{

         height: 40px;

         background-color: teal;

         color: #fff;

     }

     /*伪类选择器*/

     /*:hover*/

     input:hover{

      border-radius: 5px;

     }

     /*:focus焦点*/

     input:focus{

         outline-color: teal;

     }

     /*::selection文字选中背景色*/

     p::selection{

         color: #fff;

     }

     /* 属性选择器 */

     .shuiguo li[title]{

         font-size: 100px;

         background-color: aqua;

     }

     /* 选择器[属性=值]  值唯一才可以用,包含多个值的测试不行*/

     .shuiguo li[title=pg]{

     color: red;

     list-style: square;

     background-color: #fff;

     font-size: 60px!important;

     }

     /* 选择器[属性^=值]以什么开始 */

     .shuiguo li[title^=pg]{

         font-size: 20px;

         margin: 20px;

     }

     /* 选择器[属性$=值]以什么结束 */

     .shuiguo li[title$=xj]{

         background-color: #ccc;

     }

     </style>

 </head>

 <body>

     <div class="hcls" id="h3">

         <h1>html+css+javascript is very much!</h1>

     </div>

     <div class="hcls h4"><!--多个class用空格分开,id是唯一的-->

         <p>If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early;

             If not for life, I can go to bed early and get up early;If not for life, I can go to bed early and get up early;

             If not for life, I can go to bed early and get up early</p><p>多个class用空格分开,id是唯一的</p>

             <p>多个class用空格分开,id是唯一的</p>

     </div>

     <span>div后面的第一个元素</span>

     <ul class="shuiguo">

         <li title="pg">苹果</li>

         <li title="xg pg">西瓜</li>

         <li title="pg xj">香蕉</li>

     </ul>

     <button class="box">按钮</button>

     <form action="">

         <p>用户名</p><input type="text" name="" id="">

     </form>

 </body>

 </html>

学习css常用基本层级伪类属性选择器的更多相关文章

  1. 前端学习 --Css -- 子元素的伪类

    :first-child 寻找父元素的第一个子元素,在所有的子元素中排序: :last-child 寻找父元素的最后一个子元素,在所有的子元素中排序: :nth-child 寻找父元素中的指定位置子元 ...

  2. JavaScript 修改 CSS 伪类属性

    背景 有时候我们希望通过JS代码控制伪类属性, 确苦于对策 实际上可通过向document.head中添加style子元素来实现 演示 function css(style_text) { var s ...

  3. CSS样式学习-3、轮廓、伪类/元素、display-flex布局

    一.轮廓 outline绘制于元素周围的一条线,位于边框边缘外围. 属性规定元素轮廓的样式.颜色.宽度. outline-width轮廓宽度,属性:thin细轮廓.medium中等(默认值).thic ...

  4. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  5. CSS选择符、伪类、层叠

    主题,架子(时间架子,空间架子,三角架),素材. CSS 三种方式 行内样式 嵌入样式 链接样式 上下文选择符 祖父 孙 p em {color:red;} 父 子 p > em {color: ...

  6. CSS设计指南之伪类

    伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种. UI伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式. 结构化伪类会在标记中存在 ...

  7. CSS 中功能相似伪类间的区别

    导读: CSS3 中有许多伪类选择器,其中一些伪类选择器的作用近似却又不完全一样,下面我们就来看一看到底有什么不一样. 1.:only-child 与 :only-of-type 测试的代码: < ...

  8. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  9. 重新学习CSS，认识CSS3中的属性

    之前学css,觉得会改个样式就不错了,直到现在,在做前端开发的时候,才发现自己的前端页面是有多垃圾,而且还不知道该怎么适应各个浏览器,总是很“词穷”,最近是想着好久没去慕课上面了,于是就报着逛一逛的心 ...

随机推荐

  1. Egret学习-TiledMap使用

    环境说明: 引擎版本:5.2.4 Egret Wing 4.1.6 1.下载依赖,下载地址https://github.com/egret-labs/egret-game-library/tree/m ...

  2. 5分钟搭建网站实时分析：Grafana+日志服务实战

    原文地址:https://yq.aliyun.com/articles/227006 阿里云日志服务是针对日志类数据一站式服务,用户只需要将精力集中在分析上,过程中数据采集.对接各种存储计算.数据索引 ...

  3. ubuntu文件操作mkdir cp mv rm ln

    pwd:显示当前目录 date:显示当前日期 cal:显示日历 ls:列出目录内容 cd:改变当前工作目录 ‘.’:代表工作目录 ‘..’:代表工作目录父目录 进入当前目录的父目录:cd /home ...

  4. jade 的 考古

    Jade是一款高性能简洁易懂的模板引擎(加上这两个字我想起了发动机,为什么不直接叫发动机呢), Jade是Haml的Javascript实现, 在服务端(NodeJS)及客户端均有支持. haml 是 ...

  5. SpringBoot学习(一):SpringBoot入门

    1.Spring Boot 简介 1) 简化Spring应用开发的一个框架: 2) 整个Spring技术栈的一个大整合: 3) J2EE开发的一站式解决方案: 2.微服务 2014,martin fo ...

  6. 关于mysql8启动后又停止(windows10系统),忘记密码以及密码过期等坑解决办法总结!

    一 我遇到的问题 1 mysql连接不了,mysql服务启动后又马上关闭 2 忘记密码或者重装服务后提示安装的随机密码过期 一个一个来,先看第一个: 1 出现这个情况很大原因是mysql安装目录有多余 ...

  7. Paper慢慢读 - AB实验人群定向 Double Machine Learning

    Hetergeneous Treatment Effect旨在量化实验对不同人群的差异影响,进而通过人群定向/数值策略的方式进行差异化实验,或者对实验进行调整.Double Machine Learn ...

  8. 机器学习-NLP之Word embedding 原理及应用

    概述 自然语言是非常复杂多变的,计算机也不认识咱们的语言,那么咱们如何让咱们的计算机学习咱们的语言呢?首先肯定得对咱们的所有文字进行编码吧,那咱们很多小伙伴肯定立马就想出了这还不简单嘛,咱们的计算机不 ...

  9. session、cookie、sessionStorage、localStorage的简要理解

    一.cookie和session 首先 session 和 cookie 用于浏览器客户端与服务端数据交互,通过会话的方式跟踪浏览器用户身份. 1.cookie (1).一般由服务器生成,可以设置失效 ...

  10. 51nod 1133 不重叠的线段 (贪心，序列上的区间问题)

    题意: 最多能选几条不重叠的线段 思路: 按R从小到大排序,维护一个最大的右端点 右端点最小的那个线段是必选的,可以贪心地证明 代码: #include<iostream> #includ ...