CSS札记（一）：CSS选择器

yzzz 发布于2019-08-30 14:20 / 837人阅读

一、语法规则

选择器{
    属性1:属性值1;
    属性2:属性值2;
    ......
}
/*注释*/

二、如何在html中应用CSS 1. 外部引用css文件

   css文件：css/layout.css（css文件夹和HTML位于同一个目录下）

2. 内部嵌入css

3. 元素内部使用

三、选择器 1. 基本选择器 1）元素选择器

a div body ul

2）类选择器

.ClassName     例如: .current

3）ID选择器

#IdName         例如: #top_nav

4）普遍选择器

*{
   /*css代码*/
}

5）并且选择器

选择器1选择器2 p.one#first

6）并列选择器

p,.one,#first

2. 层次选择器 1）后代选择器

使用空格分割两个选择器， 例如 【parant son】

2）子代选择器

使用大于号分割两个选择器，例如 【parent > son】

3）下一个兄弟选择器

使用+分割两个选择器，例如 【li:first-child + *】

4）之后所有兄弟选择器

使用波浪线~分割两个选择器，例如【li:first-child ~ *】

3. 属性选择器(过滤器)

配合基本选择器进行筛选


selector[name]        选择具有name属性的元素、无论该属性的值为什么
selector[name=val]    选择具有name属性的、并且name的值为val元素
selector[name*=val]   选择具有name属性的、并且name的值之一为val的元素    
selector[name^=val]   选择具有name属性的、并且name的值以val开头的元素
selector[name$=val]   选择具有name属性的、并且name的值以val结尾的元素
selector[name~=val]   选择具有name属性的、并且name的值包含val的元素

4. 伪类选择器

配合基本选择器进行筛选

1) 子元素

:first-child
:last-child
:nth-child(n)、: nth-last-child(n) 
:first-of-type
:last-of-type
:nth-of-type(n)、:nth-last-of-type(n)

注：n可以为元素的序号，也可以为特殊的字符，比如“odd”，“even

2) 状态

:hover、:active:、focus
:enabled、 :disabled；:checked、 :default
:invalid、 :valid、 :required、 :optional、 :in-range 、:out-of-range

5. 伪元素选择器

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

::after
    常用于清除浮动，让浮动的子元素将父撑起来。
    例：
        
            
            
        

        #nav::after{
            content = "";
            display = block;
            clear = both;
        }

::before        
::first-letter        
::first-line        
::selection

未完待续... ...

GPU云服务器云服务器 css选择器基础选择器css css选择 js css 加载器

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

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

CSS札记（一）：CSS选择器

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

孙淑建 2019-08-02 10:05 评论0 收藏0
CSS札记（二）：级联与继承

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

Caizhenhao 2019-08-30 14:20 评论0 收藏0
CSS札记（二）：级联与继承

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

stonezhu 2019-08-02 10:04 评论0 收藏0