首页 > 代码库 > Css（选择器）

Css（选择器）

2024-09-06 06:11:16   217人阅读

语法

  1. <style type="text/css>
  3. </style>

     标签选择器

  1. li {
  2. 	color: red;
  3. }


     ID选择器

  1. #li{
  2. 	color: yellow;
  3. }
        唯一的，同一页面只能有一个
        优先级高于类选择器

    类选择器

  1. .li{
  2. 	color: blue;
  3. }

        优先级高于标签选择器

     通用选择器  

        优先级最低

  1. *{
  2. }

     后代选择器

        
  1. div li{
  2.     color:red;
  3. }

>子代选择器，只能选择下一层级的类或标签，不能越级使用

  1. div>ul>li{
  2.     color:red;
  3. }

     交集选择器

  1. .li#li{
  2. /*
  3. 元素必须同时满足.li和#li才能使用
  4. */
  5. }

     并集选择器

  1. .li,#li,div{
  2. /*
  3. 元素只要具备一个条件即可生效
  4. */
  5. }

    CSS3新增选择器

选择器优先级

    1.第一原则：近者优先，最内层选择器永远比外层优先
        例：div ul li >div #ul,li在ul内层，所以li标签选择器能覆盖外层id选择器
    2.当作用在同一层时，ID选择器>class选择器>标签选择器
        例：div #li>div .li>div li
    3.当作用于同一层，且最后一层选择器没有优先关系（均为class或id）
        例：div ul li >div li,作用范围选的更精准，则优先级更高
    4.优先级完全相同时，按照代码执行顺序，后面的选择器会覆盖前面的选择器


null


Css（选择器）


联系
我们