资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS札记（一）：CSS选择器

CSS札记（一）：CSS选择器

孙淑建 / 2304人阅读

一、语法规则 
</>复制代码 
  1. 选择器{
  2.     属性1:属性值1;
  3.     属性2:属性值2;
  4.     ......
  5. }
  6. /*注释*/
二、如何在html中应用CSS 1. 外部引用css文件 
</>复制代码 
  1.    css文件：css/layout.css（css文件夹和HTML位于同一个目录下）
  2.    
  3.        
  4.
2. 内部嵌入css 
</>复制代码 
  1.     
  2.     
  3.
3. 元素内部使用 
</>复制代码
三、选择器 1. 基本选择器 1）元素选择器 
</>复制代码 
  1. a div body ul
2）类选择器 
</>复制代码 
  1. .ClassName     例如: .current
3）ID选择器 
</>复制代码 
  1. #IdName         例如: #top_nav
4）普遍选择器 
</>复制代码 
  1. *{
  2.    /*css代码*/
  3. }
5）并且选择器 
</>复制代码 
  1. 选择器1选择器2
  2. p.one#first
6）并列选择器 
</>复制代码 
  1. p,.one,#first
    2. 层次选择器 1）后代选择器 
    </>复制代码 
    1. 使用空格分割两个选择器， 例如 【parant son】
    2）子代选择器 
    </>复制代码 
    1. 使用大于号分割两个选择器，例如 【parent > son】
    3）下一个兄弟选择器 
    </>复制代码 
    1. 使用+分割两个选择器，例如 【li:first-child + *】
    4）之后所有兄弟选择器 
    </>复制代码 
    1. 使用波浪线~分割两个选择器，例如【li:first-child ~ *】
    3. 属性选择器(过滤器) 
    </>复制代码 
    1. 配合基本选择器进行筛选
    3. selector[name]        选择具有name属性的元素、无论该属性的值为什么
    4. selector[name=val]    选择具有name属性的、并且name的值为val元素
    5. selector[name*=val]   选择具有name属性的、并且name的值之一为val的元素    
    6. selector[name^=val]   选择具有name属性的、并且name的值以val开头的元素
    7. selector[name$=val]   选择具有name属性的、并且name的值以val结尾的元素
    8. selector[name~=val]   选择具有name属性的、并且name的值包含val的元素
    4. 伪类选择器 
    </>复制代码 
    1. 配合基本选择器进行筛选
    1) 子元素 
    </>复制代码 
    1. :first-child
    2. :last-child
    3. :nth-child(n)、: nth-last-child(n) 
    4. :first-of-type
    5. :last-of-type
    6. :nth-of-type(n)、:nth-last-of-type(n)
    7. 注：n可以为元素的序号，也可以为特殊的字符，比如“odd”，“even
    2) 状态 
    </>复制代码 
    1. :hover、:active:、focus
    2. :enabled、 :disabled；:checked、 :default
    3. :invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range
    5. 伪元素选择器

    伪元素以"::"开头，用在选择器后，用于选择指定的元素。

    </>复制代码 
    1. ::after
    2.     常用于清除浮动，让浮动的子元素将父撑起来。
    3.     例：
    4.         
    5.         #nav::after{
    6.             content = "";
    7.             display = block;
    8.             clear = both;
    9.         }
    10. ::before        
    11. ::first-letter        
    12. ::first-line        
    13. ::selection
    </>复制代码 
    1. 未完待续... ...
    云服务器 GPU云服务器 css选择器 基础选择器css css选择 js css 加载器

    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

    转载请注明本文地址：https://www.ucloud.cn/yun/52117.html

    相关文章

    • CSS札记（一）：CSS选择器

      一、语法规则 选择器{ 属性1:属性值1; 属性2:属性值2; ...... } /*注释*/ 二、如何在html中应用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夹和HTML位于同一个目录下） 2. 内部嵌入css /*css代码*/ 3...

      yzzz 评论0 收藏0

    • CSS札记（二）：级联与继承

      摘要：一级联概念级联是的简写，说明级联是非常重要的。二继承中有些规则将会默认被子元素继承，有些则不会。应用浏览器的默认样式不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。 一、级联 概念:级联（The cascade）,CSS是Cascading Style Sheet的简写，说明级联是非常重要的。从表层来看，级联表明CSS规则的顺序问题，但是级联远比这个复杂，在所有...

      Caizhenhao 评论0 收藏0

    • CSS札记（二）：级联与继承

      摘要：一级联概念级联是的简写，说明级联是非常重要的。二继承中有些规则将会默认被子元素继承，有些则不会。应用浏览器的默认样式不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。 一、级联 概念:级联（The cascade）,CSS是Cascading Style Sheet的简写，说明级联是非常重要的。从表层来看，级联表明CSS规则的顺序问题，但是级联远比这个复杂，在所有...

      stonezhu 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    孙淑建

    男|高级讲师
    我要私信

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <