CSS选择器篇（所有选择器）

男娘i 2022-05-20 07:56 277阅读 0赞

### CSS选择器篇 ###

.class              ：  类选择器            .className\{\}    //选择类名为className的元素

css代码：

.className{
        width:300px;
        height:200px; brackground-color:red;
    }

html代码：

<div class="className"></div>

\#id                 ：  id选择器     \#idName\{\}         //选择id名为idName的元素

#idName{
        color:red;
    }

\*                   ：  选择所有     \*\{\}               //通配符

*{
       margin:0;
       padding:0;
    }

element             ：  元素选择器     div\{\}             //选择所有的div元素

p:{
       font-size:24px;
    }

element,element     ：  多个元素选择器      div,p\{\}           //选择所有的div和p元素

div,p{
       background:red;
    }

element element     :   子选择器            div p\{\}           //选择div中所有的子元素p

div p{
      color:blue;
    }

element>element     ：  拥有某父元素的元素  div>p\{\}           //选择所有父元素为div的p元素

div>p{
       font-size:29px;
    }

element+element     ：  相邻选择器          div+p\{\}           //选择所有div后紧挨的p元素

div+p{
       color:red;
    }

element~element     ：  之后选择器          div~p\{\}           //选择所有div后的p元素

div~p{
      color:red;
    }

\[attribute\]         ：  属性选择器          \[width\]\{\}         //选择所有拥有width属性的元素

[width]{
        height:100px;
    }

\[attribute=value\]     :   属性值选择器        \[class="a"\]       //选择所有拥有class属性且名为a的元素

[class=a]{
       background-color:red;
    }

\[attribute~=value\]     :   属性值选择器        \[class="a"\]       //选择所有拥有class属性且名 包含 为a的元素

[class~=a]{
       color:red;
    }

\[attribute|=value\]     :   属性值选择器        \[class="a"\]       //选择所有拥有class属性 且名起始以a开头 的元素

[class|=a]{
       clolr:red;
    }

element\[attribute^=value\]:   属性值选择器        div\[class="a"\]    //选择所有拥有class属性 且名以a开头 的div元素

div[class="a"]{ color:red;}

element\[attribute$=value\]:   属性值选择器        div\[class$="a"\]    //选择所有拥有class属性 且名以a结尾 的div元素

img[src$=".jpg"]{
    width:200px;
    }

element\[attribute\*=value\]:   属性值选择器        div\[class\*="a"\]    //选择所有拥有class属性 且名包含a   的div元素

div[class*="a"]{ padding:10px 10px;}

##### 伪类： #####

：link     正常情况未被访问的样式      a：link\{\}     //未被访问的超链接a的样式

a:link{
      text-decoration:none;
    }

：visited  已经被访问了的样式          a：visited\{\}  //已经访问的样式

：active   当被鼠标点击那一刻时的样式  a：active\{\}   //当超链接被鼠标点击那一刻时的样式

：hover    当鼠标移上去的样式          div：hover\{\}  //当鼠标移在这个层上时的样式

：focus    选择获取焦点的元素          input：focus\{\}//选择获取焦点的输入框

：before   在该元素前添加的内容样式    p：before\{\}   //在所有的p元素前添加的内容及内容样式

：after    在该元素后添加内容及样式    p：after\{\}    //选择所有的p元素在其后添加内容及样式

：first-letter   选择该元素的第一个字母    p：first-letter\{\}  //选择所有p元素的第一个字母

：first-line     选择该元素的第一行        p：first-line\{\}    //选择所有p元素的第一行

：first-child    该元素为其父元素的第一个子元素    p：first-child\{\}  //指定p元素为其父元素的第一个子级

：first-of-type  该元素的父元素的第一个该元素      p：first-of-type\{\} //选择作为父元素的第一个p元素

：last-of-type   该元素的父元素的最后一个该元素    p：first-of-type\{\} //指定其父元素的最一个p元素  
   
   ：last-child     该元素为其父元素的最后一个子元素  p：last-child\{\}    //选择其父元素最后一个子元素为p元素

：nth-child(n)   该元素其父元素的第n个该子元素     p:nth-child(2)\{\}   //选择其父元素正数的第2个p元素

：nth-of-type(n) 该元素其父元素的的第n个子元素

：root           根元素

：emmpty         没有子元素的元素

：target         当前活动的\#news元素（包含锚名）

：enabled        当前启用的元素

：disabled       当前禁用的元素

：checked        每个选中的元素

：not            除该元素外的元素

::selection      匹配元素中被用户选中或处于高亮状态下的部分

：out-of-range   匹配值在指定值域外时的样式

：in-range       匹配值在值域内时的样式

：require        匹配设置了require的元素

：optional       匹配可选的元素

：valid          匹配合法时的样式

：invalid        匹配不合法时的样式

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3-选择器，子代选择器 ">"、顺序选择器、下一个兄弟选择器、后面所有的兄弟选择器的用法

文章目录子代选择器顺序选择器下一个兄弟选择器

傷城~/ 2023年08月17日 16:42/ 0 赞/ 22 阅读

相关 css选择器_CSS选择器

css选择器 CSS选择器简介 (Introducing CSS Selectors) A CSS selector is the part of a CSS rule

客官°小女子只卖身不卖艺/ 2022年12月03日 11:26/ 0 赞/ 285 阅读

相关 css通用选择器用_通用选择器（CSS选择器）

css通用选择器用描述 (Description) The universal selector matches any element type. It can b

朱雀/ 2022年12月03日 11:26/ 0 赞/ 265 阅读

相关 css 属性选择器_CSS选择器：属性选择器

css 属性选择器 ![cssmasterthumb][] The following is an extract from our book, [CSS Master][

本是古典何须时尚/ 2022年12月03日 09:59/ 0 赞/ 292 阅读

相关 CSS3 选择器——属性选择器

上一切在《[CSS3选择器——基本选择器][CSS3]》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CS

淡淡的烟草味﹌/ 2022年06月10日 05:24/ 0 赞/ 364 阅读

相关 CSS3 选择器——基本选择器

[CSS的选择器][CSS]，我想大家并不会陌生吧，因为天天在使用，但对于[CSS3的选择器][CSS]，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:n

我就是我/ 2022年06月10日 05:24/ 0 赞/ 391 阅读

相关 JQuery选择器之CSS选择器

核心选择器 <table> <thead> <tr> <th>语法</th> <th>描述</th> </tr> </thead>

系统管理员/ 2022年06月03日 20:13/ 0 赞/ 295 阅读

相关 CSS选择器篇（所有选择器）

CSS选择器篇 .class ：类选择器 .className\{\} //选择类名为className的

男娘i/ 2022年05月20日 07:56/ 0 赞/ 278 阅读

相关 CSS选择器二（高级选择器）

今天来整理一下剩下的四个高级选择器高级选择器后代选择器：用空格隔开伪类选择器父子选择器组合选择器（分组选择器）：用逗号隔开 1后代选择器，规定用

淡淡的烟草味﹌/ 2021年12月08日 20:23/ 0 赞/ 248 阅读

相关 BeautifulSoup 基本选择器，标准选择器，css选择器

注意事项 1、测试工具pycharm,请自行安装， 2、python3.x 3、需要导入requests库和bs4库 4、项目目录结构 ![31414-20190

╰+哭是因爲堅強的太久メ/ 2021年12月03日 15:09/ 0 赞/ 526 阅读