CSS层叠性、继承性、优先级、常见选择器、列表的样式

文章目录

  • 1.CSS的层叠性
  • 2.CSS的继承性
  • 3.CSS的优先级:要看选择器的权重
  • 4. 块级标签
  • 5. 常见选择器
    • 5.1 属性选择器
    • 5.2 复合选择器
    • 5.3 关系选择器
    • 5.4 伪类选择器
    • 5.5 :focus伪类选择器
    • 5.6 复合选择器总结
  • 6.列表的样式规则

1.CSS的层叠性

指多种CSS样式可以叠加,即一个标签上可以应用多个样式

2.CSS的继承性

指在书写CSS样式表时,子标签会继承父标签的某些样式

  p {
          color:"red";
    }
  <p>
         西安
         <span>span>
   p>

PS:边框属性、定位属性、内/外边距属性、布局属性、背景属性、元素宽高属性不具有继承性

3.CSS的优先级:要看选择器的权重

选择器 权重
标签选择器 1
id选择器 100
类选择器 10

PS:权重值谁大谁优先,权重值相同谁在后面用谁

  1. 权重值越大,优先级越高
  2. 继承样式的权重值为20
  3. 行内样式优先
  4. 当权重值相同时,CSS遵循就近原则
  5. CSS定义了一个!important命令,该命令被赋予最大优先级
    举例:
 <body>
  <p class="father" id="header">
    <strong class="blue">你好呀strong>
  p>
  <div>你好呀div>
 body>
/* 子标签选择器:选择p标签下的子标签strong */
p strong{  
    /* 权重1+1 */
    color: black;
}
strong.blue{
    /* 权重1+10 */
    color: blue;
}
.father strong{
    /* 权重10+1 */
    color: yellow;
}
p.father strong{
    /* 权重1+10+1 */
    color: orange;
}
p.father .blue{
    /* 权重1+10+10 */
    color: gold;
}
#header strong{
    /* 权重100+1 */
    color: pink;
}
#header strong .blue{
    /* 权重100+1+10 */
    color: red;
}

4. 块级标签

可以作为容器(可以放其它块级标签)

5. 常见选择器

5.1 属性选择器

'E’代表标签名,'att’表示标签的属性。

  1. E[att^=value]:含义是标签的某个属性值是以给定的value开头
  2. E[att$=value]:表示标签含有给定的属性,并且属性值是以value值结尾的;
  3. E[att*=value]:表示标签含有给定的属性,并且属性值中含有value
    举例说明:
    a[title^='zhong'] {
        text-decoration: none;
    }gg
    a[title$='cao'] {
        text-decoration: none;
    }
    a[title*="lan"] {
        text-decoration: none;
    }
<a href="http://www.baidu.com" title="zhongguo">百度a>
<a href="http://www.sina.com.cn" title="xinlang">新浪a>
<a href="http://www.hao123.com" title="caocao">hao123a>
<a href="http://www.360.cn" title="xinlang01">360a>

5.2 复合选择器

多个选择器混合使用,选择器和选择器之间用逗号隔开
例:

p,.dd,#d1 {
    color:red;
}

5.3 关系选择器

  • 子元素选择器(>)
    例:
h1>strong {
        color:blue;
    }
  • 兄弟选择器
  1. 临近兄弟选择器(+):。选择器中两个元素有一个父亲,第二个元素必须紧跟第一个元素。
    例:
div>p+div{
   	/* div紧跟p之后 */
   	color: chartreuse;
} 		
  1. 普通兄弟选择器(~):选择器中的两个元素有一个父亲,第二个元素不必紧跟第一个元素。
    例:
div>p~div{
   	color: darkblue;
}

5.4 伪类选择器

  • E:first-child{ },匹配父元素的第一个子元素E。
  • E:last-child{ },匹配父元素的最后一个子元素E。
  • E:nth-child(n){ },匹配父元素的第n个子元素E。
  • E:nth-last-child(n){ },匹配父元素的倒数第n个子元素E。
  • E:empty{ } ,匹配没有任何子元素(包括next节点) 内容为空的元素
a:link      /* 选择所有未被访问的链接 */
a:visited   /* 选择所有已被访问的链接 */
a:hover     /* 选择鼠标指针位于其上的链接 */
a:active    /* 选择活动链接(鼠标按下未弹起的链接)*/

注意

  1. E对象必须是某个对象的子元素
  2. hover和active不仅适用于超链接标签,还适用于段落p标签
  3. 必须按照顺序: link(正常状态) > visited(访问过后的状态) > hover(鼠标放上去的状态) > active(鼠标按下并未抬起的状态)。否则无法显示,只设置一个则不存在该问题。
  4. 记忆法:love hate或者lv 包包 hao

5.5 :focus伪类选择器

用于选取获得焦点的表单元素
焦点就是光标,一般情况类表单元素才能获取,因此这个选择器也主要针对表单元素来说

input:focus {
	background-color:yellow;
}

5.6 复合选择器总结

选择器 作用 特征 使用情况 隔开符号及用法
后代选择器 用来选择后代元素 可以使子孙后代 较多 符号是空格.nav a
子代选择器 选择最近一级的元素 只选亲儿子 较少 符号是大于.nav>p
并集选择器 选择某些相同样式的元素 可以用于集体声明 较多 符号是逗号.nav,.header
链接伪类选择器 选择不同状态的链接 跟链接相关 较多 重点记住a{}和a:hover 实际开发的写法
:focus选择器 选择获得光标的表单 跟表单相关 较少 ==input:focus ==

6.列表的样式规则

  1. List-style-image:用来设置列表项的标记**(项目符号)**图像。若值是none表示没有项目符号。url(路径)
  2. list-style-style:用来设置列表项的项目符号样式。若值为none则没有项目符号。
  3. List-style-position:设置项目符号和文本的位置关系。
    • outside:(默认)项目符号标记在文本之外
    • Inside:项目符号标记在文本之内
 li{
    list-style-image: url(./image/user.png);
    list-style-type: none;
    list-style-position: inside;
}

你可能感兴趣的:(前端,css,html,html5,web,前端)