css选择器的总结

最新推荐文章于 2024-09-11 20:31:47 发布

溜溜球q

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量124

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/Sky_msk/article/details/115190173

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css（Cascading Style Sheet）层叠样式表

概念

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
  /* 
    问题：
      1.样式表的全称？cascading style sheets
      2.样式表的组成？
      3.浏览器读取编译css的顺序？
  */
  /* 
    1.样式表
    2.规则
    3.选择器+声明块
    4.css属性名+css属性值组成的键值对
  */
    *{
      margin: 0;
      padding: 0;
    }
    /* 
      浏览器读取选择器的顺序是从右往左
      例：从右开始找到#box直接结束查找
    */
    div ul li #box {}
  </style>
</head>
<body>
  
</body>
</html>

选择器

基本选择器
坑点：可继承样式，不会被选择器影响

/* id选择器 */
#wrap { color: pink; }
/* 类选择器 */
.box { font-size: 14px; }
/* 标签选择器 */
div { background: green; }
/* 通配符选择器 */
* { margin :0; padding: 0;}
/* 后代选择器 */
ul li { color: aqua; }
/* 分组选择器 ,(结合符) */
h1,h2,h3 { font-size: 20px; }
/* 子元素选择器 */
.wrap > .bar { border: 1px solid rebeccapurple; }
/* 相邻兄弟选择器 */
/* 紧跟着的！！！ */
#box > .outer + p { text-align: center; }  
/* 通用兄弟选择器 */
/* 跟着的！ */
#box > .outer ~ p { text-align: center; }

属性选择器

/* 属性选择器 */
div[name] { border: 1px solid #eee; }
/* 属性值选择器 */
div[name="msk"] { border: 1px solid #eee; }
/* |属性值只有msk自身 msk- 开头才可以匹配 */
div[name|="msk"] { border: 1px solid #eee; }
/* ^属性值以msk开头 */
div[name^="msk"] { border: 1px solid #eee; }
/* $属性值以msk结尾 */
div[name$="msk"] { border: 1px solid #eee; }
/* *属性值包含msk */
div[name*="msk"] { border: 1px solid #eee; }
/* 属性值以msk必须以空格分隔 */
div[name~="sky"] { border: 5px solid pink; }
/* 
  例：可被~=选中
  <div name="sky aaa">1</div>
  <div name="bbb sky aa">2</div>
*/

伪类和伪元素选择器

注意：伪类和伪元素不存在与DOM树中
坑点：注意先后顺序不能混乱
原因：link和visited已经可以把a标签所有状态含盖住了, 所有只能写在前面

链接伪类和动态类型

/* 默认状态  只能链接使用  */
a:link { color: #333; }
/* 已经访问后的状态  只能链接使用，只能修饰关于颜色的属性 */
a:visited { color: salmon; }
/* 鼠标覆盖时的状态 */
a:hover { color: seagreen; }
/* 鼠标点住按住时的效果  */
a:active { color: yellow; }

表单伪类

/* 可编辑状态 */
input:enabled { background-color: pink; }
/* 禁用状态 */
input:disabled{ background-color: aquamarine; }
/* 禁用状态 */
input:disabled{ background-color: aquamarine; }
/* 选中状态 */
input:checked { background-color: brown; }
/* 获取焦点状态 */
input:focus { border-bottom: 1px solid blue; }
/* 内容为空的标签（空格都不能存在！！） */
div:empty{ background-color: brown; }

结构型伪类
坑点：nth-of-type 只对标签选择器有效

/* #wrap下的所有子元素, 选中第一个子元素,并且必须是ele */
#wrap ele:nth-child(1) { color: red; }
/* 选中#wrap下第一个/最后一个子元素, 并且必须是div */
#wrap div:first-child { color: chartreuse; }
#wrap div:last-child { color: chartreuse; }
/* #wrap下的所有子元素, 选中倒数第二个子元素,并且必须是ele */
#wrap ele:nth-last-child(2) { color: red; }
/* #wrap下只有p一个标签时才生效(独生子) */
#wrap p:only-child { color: coral; }

/* #wrap下的所有子元素, 选中第一个ele元素,*/
#wrap ele:nth-child(1) { color: red; }
/* 选中#wrap下第一个/最后一个div子元素,  */
#wrap div:first-child { color: chartreuse; }
#wrap div:last-child { color: chartreuse; }
/* #wrap下只包含一个p标签时才生效(独生子) */
#wrap p:only-of-child { color: coral; }
/* #wrap下的所有子元素, 选中倒数第二个ele 子元素*/
#wrap p:nth-last-of-type(2) { color: coral; }

/* not 设置除了个选择器以外的样式 */
#wrap li:not(:last-child) { border-right: 1px solid; }
/* 如下案例： 去除最后一个样式 */

在这里插入图片描述

伪元素选择器
注意：不存在于DOM树中

/* ::before和::after  必须有content: "", after一般用于清除浮动  */
/* ::first-letter 选中第一个字   ::first-line 选中第一行 */
.box p::first-line { color: red; }
.box p::first-letter { font-size: 24px;font-weight: bold; }
.box p::selection { background: coral; }

在这里插入图片描述

溜溜球q

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器的总结

css层叠样式表概念<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
复制链接

扫一扫

专栏目录