CSS的简介及其选择器

最新推荐文章于 2024-09-28 18:51:04 发布

Better Me

最新推荐文章于 2024-09-28 18:51:04 发布

阅读量172

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Despicable_Me/article/details/99635798

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS的简介

css的作用
1.实现了样式和html的代码分离。
2.弥补html对属性的的控制不足。
3.精确的控制页面的布局。
4.可以提高页面的执行效率。
5.css还有特殊的功能。
css的特性
1.继承性
2.层叠性
基本语法

基本语法
<style type="text/css">
选择器{
       属性1:属性值；
       属性2：属性值
       。。。。。。
     }
</style>

选择器

选择器的分类：
1.类选择器
2.id选择器
3.标记选择器
4.包含选择器
5.伪类

类选择器

<html>
 <head>
  <title> New Document </title>
  <style>
    .p1{ color:red }           //类选择器，用.加类名即可
  </style>
 </head>
 <body>
    <p>查看文字内容</p>
	 <p>查看文字内容</p>
	  <p   class="p1">查看文字内容</p>
	   <p>查看文字内容</p>
	    <p>查看文字内容</p>
 </body>
</html>

ID选择器

<html>
 <head>
  <title> New Document </title>
  <style>
	#p2{ font-size:100px;}         //ID选择器用#加ID名字即可
  </style>
 </head>
 <body>
    <p   id="p2">查看文字内容</p>
	 <p>查看文字内容</p>
	  <p   class="p1">查看文字内容</p>
	   <p>查看文字内容</p>
	    <p>查看文字内容</p>
 </body>
</html>

标签选择器

<html>
 <head>
  <title> New Document </title>
  <style>
	p{color:red;}           //直接写标签名字即可  p标签就写 p{}就行  div标签就写 div{}就行
  </style>
 </head>
 <body>
    <p>查看css的效果</p>
	<p>查看css的效果</p>
	<p>查看css的效果</p>
 </body>
</html>

包含选择器

<html>
 <head>
  <title> New Document </title>
  <style>
	ol  ul  li{font-size:50px; color:red}
  </style>
 </head>
 <body>
    <ol>
	<li>zhangsan
	<li>23
	<ul>
     <li>lisi
	 </ul> 
	</ol>
 </body>
</html>

通配符选择器

* {


}
选择所有标签

伪类

1.未连接     a:link
 2.已经访问链接  a:visited
 3.进入链接  a:hover
 4.激活（按下）状态  a:active
其中的hover 和active 可以用于其他控价
<html>
 <head>
  <title> New Document </title>
  <style>
    a:hover{font-size:50px;}
  </style>
 </head>
 <body>
    <a  href="#">我的链接</a>
 </body>
</html>

选择器优先级

在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高
2、类选择器
3、标记选择器

子选择器

div >p{
意思是 div 里面所有的子标签p 都被会选中 注意对孙子标签是不起作用的
}

相邻选择器

div +p{

意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p 
之间隔着一个元素 那是选不中的

}

相邻所有选择器 div ~p

div ~p{

意思是 选中 div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元素

}

属性选择器

a[title] {
意思是选中 a标签 里面只要有 title 这个属性的 都会选中
}
a[title=num1] 意思是选中 属性title=num1 的a 标签
a[title^=num] 选中title的属性值以num 开头的a标签
a[title$=num]选中title的属性值以num 结尾的a标签a[title|=num] 选中title的属性值以num-连接的a标签 如<a title=“num-ai”>
a[title~=num] 选中title的多个属性值以 空格隔开的 有其中一个属性值都能选中 例如<a tilte=“num num2 num3”> 三个属性值你任意选一个都能选中
比如a[title~=num2] 和 a[title~=num3] 选中的其实是同一个标签
a[title*=num] 选中title属性值 包含num的都能选中 例如<a  title=“mynumaaaa”>
a[title=num][name=lisi] 多个属性选择 意思 是选中 title=num 并且 name=lisi 的这个a标签  <a title=“num” name=“lisi”>

过滤选择器

:first-letter   div:first-letter  选中div中的第一行的第一个字母或者汉字
:first-line   div:first-line 选中 div 中子元素第一行
:first-child   p:first-child      选中父元素中的第一子元素p  注意要有子父级 嵌套关系 才能选中 只有一层子父级关系
:last-child    p:last-child 选择属于其父元素最后一个子元素 <p> 元素。
:not(selector)    li:not(#my) 选择id不是my的所有li元素。
:selection  当鼠标左键选中文本时  这里注意是两个冒号 前面不加任何标签
:root 选择文档的根元素。  跟* 这个选择器很相似
:empty      p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。
例如<p></p> 这里面没有任何子标签和文本 就会被选中
:enabled input:enabled 选择每个启用的 <input> 元素。
:disabled input:disabled 选择每个禁用的 <input> 元素
:checked input:checked 选择每个被选中的 <input> 元素。
:focus input:focus 选择获得焦点的 input 元素。
:first-of-type p:first-of-type 选择的这个p元素是父元素中的第一个 注意要有子父级关系 注意可以包含多层子父级关系
:last-of-type p:last-of-type 选择的这个p元素是父元素中的最后一个 注意要有子父级关系系 注意可以包含多层子父级关系
:only-of-type p:only-of-type 选择的这个p元素在父元素中只有一个,换句话说这个父元素中只有一个元素p 也可能有其他元素,但是p元素只有一个.系 注意可以包含多层子父级关系
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。这个父元素只有一个p 再没有其他元素,只有一层子父级关系
:nth-child(n) p:nth-child(2) 选择属于其父元素中的第二个p元素
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。意思就是 父元素 div 里面的第二个子元素里面嵌套的第二个p元素会被选中
:before p:before 在每个 <p> 元素的内容之前插入内容。
:after p:after 在每个 <p> 元素的内容之后插入内容。