精华内容
下载资源
问答
  • css选择器
    千次阅读
    2022-04-04 17:50:37

    一、写在前面
    css选择器有很多,但是常用到的也就几个,今天总结一下。
    二、具体选择器
    2.1、id选择器

    #myId {}
    

    2.2、类选择器

    .myClass {}
    

    2.3、标签选择器

    p,h1 {}
    

    2.4、后代选择器

    div h1 {}
    

    2.5、子选择器

    div>h1 {}
    

    2.6、兄弟选择器(所有的兄弟)

    ul~h1 {}
    

    2.7、相邻兄弟选择器

    ul+h1 {}
    

    2.8、属性选择器

    li[name='sss'] {}
    

    2.9、伪类选择器

    h1:hover {}
    

    2.10

    h1::before{}
    

    2.11、通配符选择器*

    * {}
    
    更多相关内容
  • CSS选择器

    千次阅读 2022-03-29 22:56:42
    详细介绍CSS选择器的用法和分类

    css 选择器就是选取需设置样式的元素(标签),比如如下css代码:

    div {
    	color:red;
    }
    

    如上代码中的 div 就是 css 中的选择器。

    元素选择器

    格式:

    元素名称{color: red;}
    

    特例*,范围是所有标签

    * { color: antiquewhite;}
    

    举例

    <div>
            <p>
                123456
            </p>
            <span>123456</span>
     </div>
    
    div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/
    

    image-20220328230215817

    属性选择器

    元素名称[标签]----元素名称Element 标签attribute 
    

    举例

    <div>sdfgs</div>
    <div id="zz">123</div>
    <div id="xxzz">123</div>
    <div id="zzxxyy">456</div>
    <div id="zzgg">456</div>
    
    div[id] {
        color: red
    }
    

    image-20220328231541256

    CSS 属性选择器 ~=, |=, ^=, $=, *= 的区别

    “value 是完整单词” 类型的比较符号: ~=, |=

    "拼接字符串" 类型的比较符号: *=, ^=, $=

    1.attribute 属性中包含 value:

    [attribute~=value] 属性中包含独立的单词为 value,例如:

    [title~=flower]  -->  <img src="/i/eg_tulip.jpg" title="tulip flower" />
    

    [attribute*=value] 属性中做字符串拆分,只要能拆出来 value 这个词就行,例如:

    [title*=flower]   -->  <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />
    

    2.attribute 属性以 value 开头:

    [attribute|=value] 属性中必须是完整且唯一的单词,或者以 - 分隔开:,例如:

    [lang|=en]     -->  <p lang="en">  <p lang="en-us">
    

    [attribute^=value] 属性的前几个字母是 value 就可以,例如:

    [lang^=en]    -->  <p lang="ennn">
    

    3.attribute 属性以 value 结尾:

    [attribute$=value] 属性的后几个字母是 value 就可以,例如:
    a[src$=".pdf"]
    

    ID选择器

    id选择器

    格式:

    #id属性值{color: red;}
    

    例子:

    <div id="name">hello css2</div>
    
    #name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/
    

    image-20220328231929434

    Class(类)选择器

    类选择器

    格式:

    .class属性值{color: red;}
    

    例子1:直接使用class的属性值选择

    <div class="cls">hello css3</div>
    
    .cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/
    

    image-20220328232154326

    例子2:使div的class属性被选择,p的class属性不被选择

    <div class="cls">hello css3</div>
    <p class="cls">hello css3</p>
    
    div.cls {
        color: red;
    }
    

    image-20220328232454192

    包含选择器

    selector1 selector2
    

    只要包含内就可以,如div中的p和span标签都可以被选择

    例子:选择包含在div下的class="nian"的标签

     <div class="nian">nian</div>
        <div>
            <div class="nian">nian1</div>
        </div>
        <div>
            <p class="nian">nian2</p>
        </div>
    
    div .nian {
        color: red;
    }
    

    image-20220328233307074

    • 注意:div .nian和div.nian的区别,没有空格就是当代,即class为nian的div,加了空格为下一代,即包含在div下的class="nian"的标签
    • 多个祖先可以通过空格区分,如.container ul li .nian,即找class="container"标签下的ul下的li下的class="nian"的标签

    子选择器

    一定要是父子关系的才可以

    selector1>selector2
    

    例子:

     <ul class="nianlist">
            <li>
                <a href="">一级菜单</a>
                <ul>
                    <li><a href="">二级标签</a></li>
                    <li><a href="">二级标签</a></li>
                    <li><a href="">二级标签</a></li>
                </ul>
            </li>
            <li><a href="">一级菜单</a></li>
            <li><a href="">一级菜单</a></li>
            <li><a href="">一级菜单</a></li>
        </ul>
    
    ul.nianlist>li>ul a {
        color: blue;
    }
    
    ul.nianlist>li>ul>a {
        color: blue;
    }
    

    image-20220328235640283

    图一,第一个css可以知道是class="nianlist"的ul下的li下的ul内的a标签被选中------选中部分为蓝色

    图二,第二个css可以知道是class="nianlist"的ul下的li下的ul下的a标签被选中,但是class="nianlist"的ul下的li下的ul下没有a标签,在ul内部存在a标签,该a标签和ul标签不属于父子关系,子选择器不生效,无一选中。

    兄弟选择器

    同级向下找(不包括本身)

    selector1~selector2
    

    例子:把class="java"的li同级向下的标签选择

    <ul class="nianlist">
            <li class="php">php</li>
            <li class="">nian</li>
            <li class="java">java</li>
            <li>nian</li>
            <li class="php">
                <a href="">php</a>
            </li>
            <li class="php">php</li>
            <li class="php">php</li>
        </ul>
    
    .java~li {
        color: red;
    }
    

    image-20220329095811862

    如上图,a超链接的php没有被选择,因为a标签和class="java"的li不是同级,但是a标签的父标签li变红

    选择器的组合

    多个选择器一样的css样式用选择器的组合

    selector,selector2
    

    例子:让类选择器,元素选择器用一样的css样式

        <div></div>
        <p class="nian">nian</p>
        <a href="">nian</a>
        <p>nian</p>
    
    div,
    .nian,
    a {
        color: red;
    }
    

    image-20220329121134223

    伪元素选择器

    什么是伪元素?

    CSS 伪元素用于设置元素指定部分的样式。

    例如,它可用于:

    • 设置元素的首字母、首行的样式
    • 在元素的内容之前或之后插入内容

    语法

    伪元素的语法:

    selector::pseudo-element {
      property: value;
    }
    

    类型

    ::first-line 伪元素

    ::first-line 伪元素用于向文本的首行添加特殊样式。

    下面的例子为所有 p元素中的首行添加样式:

    实例

    p::first-line {
      color: #ff0000;
      font-variant: small-caps;
    }
    

    注意:::first-line 伪元素只能应用于块级元素。

    以下属性适用于 ::first-line 伪元素:

    • 字体属性
    • 颜色属性
    • 背景属性
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • clear

    请注意双冒号表示法 - ::first-line 对比 :first-line

    在 CSS3 中,双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类伪元素的尝试。

    在 CSS2 和 CSS1 中,伪类和伪元素都使用了单冒号语法。

    为了向后兼容,CSS2 和 CSS1 伪元素可接受单冒号语法。

    ::first-letter 伪元素

    ::first-letter 伪元素用于向文本的首字母添加特殊样式。

    下面的例子设置所有 p元素中文本的首字母格式:

    实例

    p::first-letter {
      color: #ff0000;
      font-size: xx-large;
    }
    

    注意:::first-letter 伪元素只适用于块级元素。

    下面的属性适用于 ::first-letter 伪元素:

    • 字体属性
    • 颜色属性
    • 背景属性
    • 外边距属性
    • 内边距属性
    • 边框属性
    • text-decoration
    • vertical-align(仅当 “float” 为 “none”)
    • text-transform
    • line-height
    • float
    • clear

    伪元素和 CSS 类

    伪元素可以与 CSS 类结合使用:

    实例

    p.intro::first-letter {
      color: #ff0000;
      font-size: 200%;
    }
    

    多个伪元素

    也可以组合几个伪元素。

    在下面的例子中,段落的第一个字母将是红色,字体大小为 xx-large。第一行的其余部分将变为蓝色,并使用小型大写字母。该段的其余部分将是默认的字体大小和颜色:

    实例

    p::first-letter {
      color: #ff0000;
      font-size: xx-large;
    }
    
    p::first-line {
      color: #0000ff;
      font-variant: small-caps;
    }
    

    CSS - ::before 伪元素

    ::before 伪元素可用于在元素内容之前插入一些内容。

    下面的例子在每个 h1 元素的内容之前插入一幅图像:

    实例

    h1::before {
      content: url(smiley.gif);
    }
    

    CSS - ::after 伪元素

    ::after 伪元素可用于在元素内容之后插入一些内容。

    下面的例子在每个 h1 元素的内容之后插入一幅图像:

    实例

    h1::after {
      content: url(smiley.gif);
    }
    

    CSS - ::selection 伪元素

    ::selection 伪元素匹配用户选择的元素部分。

    以下 CSS 属性可以应用于 ::selection:

    • color
    • background
    • cursor
    • outline

    下例使所选文本在黄色背景上显示为红色:

    实例

    ::selection {
      color: red; 
      background: yellow;
    }
    

    伪类选择器

    什么是伪类?

    伪类用于定义元素的特殊状态。

    例如,它可以用于:

    • 设置鼠标悬停在元素上时的样式
    • 为已访问和未访问链接设置不同的样式
    • 设置元素获得焦点时的样式

    语法

    伪类的语法:

    selector:pseudo-class {
      property: value;
    }
    

    锚伪类

    链接能够以不同的方式显示:

    实例

    /* 未访问的链接 */
    a:link {
      color: #FF0000;
    }
    
    /* 已访问的链接 */
    a:visited {
      color: #00FF00;
    }
    
    /* 鼠标悬停链接 */
    a:hover {
      color: #FF00FF;
    }
    
    /* 已选择的链接 */
    a:active {
      color: #0000FF;
    }
    

    注意:a:hover 必须在 CSS 定义中的 a:linka:visited 之后,才能生效!a:active 必须在 CSS 定义中的 a:hover 之后才能生效!伪类名称对大小写不敏感。

    伪类和 CSS 类

    伪类可以与 CSS 类结合使用:

    当您将鼠标悬停在例子中的链接上时,它会改变颜色:

    实例

    a.highlight:hover {
      color: #ff0000;
    }
    

    :hover伪类

    在 div 元素上使用 :hover 伪类的实例:

    实例

    div:hover {
      background-color: blue;
    }
    

    :focus 伪类

    实例

    选择获得焦点的输入字段,并设置其样式:

    input:focus
    { 
    background-color:yellow;
    }
    

    CSS - :first-child 伪类

    :first-child 伪类与指定的元素匹配:该元素是另一个元素的第一个子元素。

    匹配首个p元素

    在下面的例子中,选择器匹配作为任何元素的第一个子元素的任何 p 元素:

    实例

    p:first-child {
      color: blue;
    }
    

    CSS - :lang 伪类

    :lang 伪类允许您为不同的语言定义特殊的规则。

    在下面的例子中,:lang 为属性为 lang=“en” 的 元素定义引号:

    实例

    <html>
    <head>
    <style>
    q:lang(en) {
      quotes: "~" "~";
    }
    </style>
    </head>
    <body>
    
    <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
    
    </body>
    </html>
    e;
    }
    

    :focus 伪类

    实例

    选择获得焦点的输入字段,并设置其样式:

    input:focus
    { 
    background-color:yellow;
    }
    

    CSS - :first-child 伪类

    :first-child 伪类与指定的元素匹配:该元素是另一个元素的第一个子元素。

    匹配首个

    元素

    在下面的例子中,选择器匹配作为任何元素的第一个子元素的任何 p 元素:

    实例

    p:first-child {
      color: blue;
    }
    

    CSS - :lang 伪类

    :lang 伪类允许您为不同的语言定义特殊的规则。

    在下面的例子中,:lang 为属性为 lang=“en” 的 q 元素定义引号:

    实例

    <html>
    <head>
    <style>
    q:lang(en) {
      quotes: "~" "~";
    }
    </style>
    </head>
    <body>
    
    <p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
    
    </body>
    </html>
    
    展开全文
  • CSS选择器优先级

    千次阅读 2022-02-14 11:07:06
    CSS选择器优先级 工作中修改css样式时,是不是会经常遇到 写的css样式不生效 改这个地方结果别的地方样式也跟着一起变了 明明是一样的css代码为啥换个地方就不一样了 改了个标签结果把样式改乱了… ​ 几乎所有的...

    CSS选择器优先级

    工作中修改css样式时,是不是会经常遇到
    写的css样式不生效
    改这个地方结果别的地方样式也跟着一起变了
    明明是一样的css代码为啥换个地方就不一样了
    改了个标签结果把样式改乱了…

    几乎所有的样式冲突、样式覆盖等问题都与css声明的优先级错位有关

    那css优先级的计算规则是什么?
    如何避免样式冲突、样式覆盖的问题呢

    css选择器的基本概念

    1 选择器、选择符、伪类、伪元素

    1 选择器

    标签选择器 div span p li …
    类选择器
    属性选择器

    2 选择符

    空格选择符表示后代关系
    >表示父子关系
    +表示相邻兄弟关系
    ~表示兄弟关系
    双管道||表示列关系

    3 伪类
    特征是前面会有一个冒号(:),通常与浏览器行为和用户行为有关,例如

    :hover 
    :focus
    :active 
    :visited
    

    4 伪元素
    特征是前面会有两个冒号(::),常见的有

    ::after
    ::before
    ::first-letter
    ::first-line
    

    css选择器的优先级

    css优先级有着明显不可逾越的优先级制度

    css优先级规则

    1 0级 通配选择器(*)、选择符 和 逻辑组合伪类

    逻辑组合伪类,这些伪类并不影响优先级,起影响作用的是括号内的选择器

    :not()
    :is
    :where
    

    2 1级 标签选择器

    3 2级 类选择器、属性选择器 和 伪类

    .foo
    [foo]
    :hover
    


    4 3级 ID选择器

    #demo {}
    

    5 4级 style 属性内联

    <span style="color:#CCC">优先级</span>
    

    6 5级 !important

    !important是顶级优先级,可以重置JavaScript设置的样式,唯一推荐使用的场景就是使JavaScript设置的无效对于其他场景,没有使用的理由,最好不用,用别的方案替代

    CSS选择器优先级计算规则

    数值计数法:每一段css语句的选择器都对应一个具体的数值,数值越大优先级越高,其中的css语句就优先被渲染。其中,出现一个0级对应的数值+0,1级选择器数值+1,2级选择器数值+10,3级选择器数值+100

    ps 这里的10 不是说真的10个1级选择器的权重等于1个2级选择器,只是一个相对的概念。
    但是在IE浏览器里256个1级选择器是会覆盖1个2级选择器的。

    *01 * 0
    dialog11 * 1
    ul > li22 * 1 + 1 * 0
    li > ol + ol33 * 1 + 2* 0
    .foo101 * 10
    a:not([rel=nofollow])111 + 1 *0 + 1 * 10
    a:hover111 + 1 * 10
    ol li.foo121 + 0 + 1 + 10
    li.foo.bar211 + 10 + 10
    #foo100100
    #foo .bar p111100 + 10 + 1
    <html lang="zh-CN" >
     <body class="foo">我的颜色是?<body>
    <html>
    
    body.foo:not([dir]) { color:red }
    
    html[lang] .foo {color:blue}
    

    当css选择器的优先级数值一样的时候,后渲染的css选择器的优先级更高。并且这个后渲染是相当于整个文档流的,而不是单个的文件。

    增加css优先级的小技巧

    常见的增加优先级的方式是

    • 增加嵌套 .father .foo 或者 增加一个标签选择器 div.foo
    • 使用!mportant
    • 使用id选择器

    但这样做会出现的问题有
    1 出现耦合,父子关系变化之后代码会无效
    2 嵌套层级过深之后修改出来会非常的痛苦
    3 换标签了样式也会失效
    4 一用!important只要覆盖就得同样用

    小技巧
    1 叠加自身 .foo.foo
    2 叠加属性选择器 .foo[class]

    css选择器的命名

    面向属性的类名

    定义

    选择器的命名是跟着具体的css样式走的,与项目、模块、页面统统没有关系。比如

     .clearfix::after {
        display: block;
        content: "";
        clear: both;
      }
      
      
      .dn {display:none}
      .db {display:block}
      .df {display:flex}
      .tl {text-align:center}
    

    使用场景

    细枝末节、特殊场景的微调可以使用面向属性的命名

    .keydata-top-list .keydata-top-item .noLink:hover {
        cursor: default;
    }
    
    .cur-def {
       cursor: default;
    }
    

    面向语义的命名

    根据元素所处的上下文命名。比如 .header .title .desc

    优点缺点
    面向属性的类名重用性高,方便快捷适用场景优先
    面向语义的命名灵活丰富,应用场景广泛代码笨重,效率一般

    命名的小技巧

    1 从HTML标签中找灵感

    header body aside section main nav footer content detail
    
    .my-header
    .my-body
    .my-aside
    

    2 从HTML特定的属性中找灵感

    checkbox radio email number color time url
    

    3 css伪类和HTML布尔属性作为状态管理类名,比如
    .active 来自于 :active
    .disable 来自于 :disable
    .selected 来自于HTML的selected属性
    .checked
    .invalid

    我们一般的用法是在状态类属性下面写当前状态下的样式,但这样会造成一个后果就是代码容易造成代码冲突,所以状态类名下最好不要有css样式,就当成一个状态标识符来用,让其跟其他类名组合使用

    .my-content {
    
    }
    
    .active.my-content {
    
    }
    

    css选择器使用的最佳实践

    命名

    1 使用小写,使用英文单词或者缩写,专有名词可以使用拼音,例如 maoyan
    不建议使用驼峰,驼峰命名建议留给js使用

    2 命名组合,以短横线混合使用,组合个数不超过5个

    .evaluation-card-info-detail-grid-title
    

    3 设置统一前缀,强调品牌同时避免样式冲突

    选择器类型的使用

    1 不要使用id选择器

    因为id选择器的优先级太高了,并且和JavaScript耦合,实在要用可以使用属性选择器[id=“foo”]

    2 不要嵌套选择器 ,不使用标签选择器,建议使用无嵌套的纯类名选择器

    a 渲染性能糟糕

    CSS选择器是从左往右进行匹配渲染的,.box div 是先匹配的页面上所有的div,再匹配的.box类名元素,如果页面上内容丰富、HTML的结构又比较复杂的话,就会产生明显的渲染性能问题

    b 优先级混乱

    .project-detail-wrap .project-detail-left .project-detail-left-top .basic-info .basic-info-content .basicOpt > a

    如果想要覆盖这段样式的方法,只有
    1 写在这段代码后面
    2 以更多的嵌套覆盖
    3 使用id选择器
    4 使用!important

    c 样式布局脆弱

    .project-detail-wrap .project-detail-left .project-detail-left-top .basic-info .basic-info-content .basicOpt > a

    HTML里不用a标签了,那这段样式就失效了,一般大家改的时候不大会记得还需要改css的,改css也得去css文件里找到;或者HTML的结构变了,删除了某个层级,就增加了查找问题和修改问题的时间

    展开全文
  • CSS快速入门 CSS选择器&字体排版

    千次阅读 2022-03-26 23:26:20
    嵌入式样式css设置 借助所谓的css选择器进行设置 选择器:做记号。 ID选择器、class类选择器、元素选择器 语法:必须放在head头部中而且需要使用style标签包裹。 3.外部式引入css设置 (1)创建一个css文件来存储...

    一、CSS的概述

            CSS的使用方式:4种
                    1.行内式样式css设置
                        在标签中有一个属性可以设置css样式
                        style = ""
                    2.嵌入式样式css设置
                        借助所谓的css选择器进行设置
                        选择器:做记号。
                            ID选择器、class类选择器、元素选择器
                        语法:必须放在head头部中而且需要使用style标签包裹。
                    
                    3.外部式引入css设置
                        (1)创建一个css文件来存储所有的css代码
                        (2)在指定的网页中通过link标签在head头部中引入即可
             
                    4.导包式引入css设置
                        必须在head中编写style标签
                        利用import标记实现url导入

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<!-- 嵌入式css样式设置,必须要用style标签包裹 -->
    		<style type="text/css">
    			/* 导包式 */
    			@import url("css/importstyle.css");
    			/* 根据标签上的记号找到指定的标签进行相关样式设置 */
    			#sb{
    				/* 设置背景颜色 */
    				background-color: yellow;
    			}
    		</style>
    		<!-- 外部式引入css文件  通过link标记 -->
    		<link rel="stylesheet" type="text/css" href="css/style.css"/>
    	</head>
    	<body>
    		<!-- 
    			CSS:层叠式样式表,作用:美化HTML标签。
    			因为HTML标签自带的属性比较少,而且有些属性不兼容
    			可以利用CSS解决这些问题。
    			
    			CSS的使用方式:4种
    				1.行内式样式css设置
    					在标签中有一个属性可以设置css样式
    					style = ""
    				2.嵌入式样式css设置
    					借助所谓的css选择器进行设置
    					选择器:做记号。
    						ID选择器、class类选择器、元素选择器
    					语法:必须放在head头部中而且需要使用style标签包裹。
    				
    				3.外部式引入css设置
    					(1)创建一个css文件来存储所有的css代码
    					(2)在指定的网页中通过link标签在head头部中引入即可
    		 
    				4.导包式引入css设置
    					必须在head中编写style标签
    					利用import标记实现url导入
    		 -->
    		<h2 id="sb" color = "red">我是标题2</h2>
    		<h2 style="color: red;">我是通过css设置的标题2</h2>
    		
    		<p id="pid">我是段落标签,我需要通过外部式引入来设置背景颜色</p>
    	
    		<div id="oDiv">
    			天天向上,好好学习
    		</div>
    	
    	
    	</body>
    </html>
    

    二、CSS使用方式 

            1.认识CSS样式
                        CSS全称为"层叠样式表(Cascading Style Sheets)"主要用以定义html内容在浏览器内的显示样式。

                        CSS:层叠式样式表,作用:美化HTML标签。
                因为HTML标签自带的属性比较少,而且有些属性不兼容
                可以利用CSS解决这些问题。

            2.CSS代码语法
                        CSS样式有选择符(选择器)和声明组成,而声明又有属性和值组成。如下:
        p{color:blue}

            3.CSS注释代码
                        /* 代码注释 */

            4.CSS样式的位置及相关的优先级
                        4.1 内联式CSS样式:直接写在现有的html标签中
                        4.2 嵌入式CSS样式:写在当前的文件中,一般位于head标签内
                        4.3 外部式CSS样式:写在单独的一个文件中(.css)<link>标签引入
                        4.4 三种方式的优先级:内联式>嵌入式>外部式

            5.CSS选择器
                        5.1 什么是选择器?
                                每一条css样式定义由两部分组成,形式如下:
                                选择器{样式;}

                        5.2 标签选择器、类选择器、ID选择器(最常用的三种选择器)
                                标签选择器:标签{}
                                类选择器:.class{}
                               id选择器:#id{}  同一个网页中只允许一个id

                        5.3 其它选择器:子选择器(>),包含(后代选择器)(空格)
        通用选择器(*)、伪类选择器(a:hover)、分组选择器(标签,标签)

            6.CSS格式化排版
                        6.1 文字排版--字体  font-family  宋体、微软雅黑
                        6.2 文字排版--字号、颜色   font-size   color
                        6.3 文字排版--粗体  font-weight
                        6.4 文字排版--斜体  font-style
                        6.5 文字排版--下划线 text-decoration:underline
                        6.6 文字排版--删除线 text-decoration:line-through
                        6.7 文字排版--缩进  text-indent:2em    em代表文字的2倍大小
                        6.8 文字排版--行间距(行高)  line-height
                        6.9 文字排版--中文字间距、字母间距 letter-spacing
                        6.10 文字排版--对齐 text-align

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			a{
    				/* 去掉下划线 */
    				text-decoration: none;
    			}
    		/* 字体设置 */
    			#p1{
    				/* 设置字体的大小 */
    				font-size: 50px;
    				/* font属性:复合属性,同时可以设置多个值 */
    				/* 颜色设置 */
    				color: red;
    				/* 加粗 */
    				font-weight: bold;
    				/* 下划线 */
    				text-decoration: underline;
    				/* 对齐方式 */
    				text-align: center;
    				/* 首行缩进指定的像素单位值 */
    				/* text-indent: 120px; */
    				/* line-height */
    				/* 设置边框线 */
    				border:  1px solid red;
    				height: 200px;
    				/* 利用line-height设置行高垂直居中  必须与高度一致 */
    				line-height: 200px;
    			}
    		</style>
    	</head>
    	<body>
    		<a href="http://www.baidu.com">百度一下</a>
    		<hr>
    		<p id="p1">我用双手成就你的梦想</p>
    		<p>面对疾风吧</p>
    		<p>你买单我就来</p>
    		<p>死亡如风,常伴吾身</p>
    		<p>你的剑就是我的剑</p>
    		
    	</body>
    </html>
    

            7.CSS背景(background)
                        background (缩写形式)
                        background-color(背景色 )
                        background-image(背景图 )
                        background-repeat(背景图重复方式 )
                        background-position(位置坐标、偏移量)

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			#oDiv{
    				border: 1px solid red;/*边框线*/
    				width: 500px;
    				height: 300px;
    				/* 背景图片设置 */
    				/* background-image: url(img/R-C.jpg); */
    				/* 设置图片平铺 */
    				/* background-repeat: repeat-x; */
    				/* background-repeat: repeat-y; */
    				background-repeat: no-repeat;
    				/* 图片定位 */
    				background-position: -300px,-50%;
    				background: #FF0000;
    			}
    		</style>
    	</head>
    	<body>
    		<!-- 背景设置background -->
    		
    		<div id="oDiv"></div>
    		
    		
    		
    		
    		
    	</body>
    </html>
    

            8.CSS列表(ul、ol)
                        list-style
                        list-style-image

            9.盒模型
                        9.1 元素分类
                                在布局前,了解:html标签元素分为三种类型:块状元素、内联元素(又叫行内元素)、内联块状元素。display属性设置
        
                        9.2 常用的块状元素有:独占一行,元素的高度、宽度、行高以及顶和底边距都可设置
        <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

                        9.3 常用的内联元素有:和其他元素都在一行上,元素的高度、宽度及顶部和底部边距不可设置
            <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

                        9.4 常用的内联块状元素有:和其他元素都在一行上,元素的高度、宽度、行高以及顶和底边距都可设置
            <img>、<input>

                        9.5 什么盒子模型?(月饼例子)块状元素都具有盒子模型的特定
        由margin、padding、border、content组成

    二、CSS选择器:

    Selectors
    选择符

    CSS Version
    版本

    Compatibility
    兼容性

    Syntax Samples
    语法

    Description
    简介

    类型选择符(Type Selectors)

    CSS1

    IE4+ , NS4+

    E1

    以文档语言对象类型作为选择符

    通配选择符(Universal Selector)

    CSS2

    NONE

    *

    选定文档目录树(DOM)中的所有类型的单一对象

    包含选择符(Descendant Selectors)

    CSS1

    IE4+ , NS4+

    E1 E2

    选择所有被E1包含的E2。即E1.contains(E2)==true

    子对象选择符(Child Selectors)

    CSS2

    NONE

    E1 > E2

    选择所有作为E1子对象的E2

    相邻选择符(Adjacent Sibling Selectors)

    CSS2

    NONE

    E1 + E2

    选择紧贴在对象E1之后的所有E2对象

    属性选择符(Attribute Selectors)

    CSS2

    NONE

    E1[attr]

    选择具有attr属性的E1

    属性选择符(Attribute Selectors)

    CSS2

    NONE

    E1[attr=value]

    选择具有attr属性且属性值等于value的E1

    属性选择符(Attribute Selectors)

    CSS2

    NONE

    E1[attr~=value]

    选择具有attr属性且属性值为一用空格分隔的字词列表,其中一个等于value的E1

    属性选择符(Attribute Selectors)

    CSS2

    NONE

    E1[attr|=value]

    选择具有attr属性且属性值为一用连字符分隔的字词列表,由value开始的E1

    ID选择符(ID Selectors)

    CSS1

    IE4+ , NS4+

    #sID

    以文档目录树(DOM)中作为对象的唯一标识符的ID作为选择

    类选择符(Class Selectors)

    CSS1

    IE4+ , NS4+

    E1.className

    在HTML中可以使用此种选择符。其效果等同于E1[class~=className]

    选择符分组(Grouping)

    CSS1

    IE4+ , NS4+

    E1,E2,E3

    将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组

            选择器的使用:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<style type="text/css">
    			#a1{
    				/* background-color: red; */
    			}
    			/* 元素选择器 */
    			li{
    				/* background-color: yellow; */
    			}
    			.s1{
    				/* background-color: blue; */
    			}
    			/* 通配选择器 */
    			*{
    				/* background-color: green; */
    			}
    			/* 子代选择器  根据指定的父标签指定子标签 */
    			 ol>li{
    				 /* background-color: red; */
    			 }
    			 /* 后代选择器  空格 */
    			 ol li{
    				 background-color: yellow;
    			 }
    		</style>
    		
    		<!-- 
    			JavaScript代码
    		<script type="text/javascript">
    			window.onload = function(){
    				var result = document.getElementById('a1');
    				alert(result.innerHTML);
    			};
    		</script> -->
    	</head>
    	<body>
    		<!-- 
    			css选择器
    				其实就是一个标记,为了设置css代码方便查找到指定的标签
    				
    			ID选择器      在标签上必须设置id属性 通过style标签(行内式样式设置)+#可以设置
    				id选择器是唯一的,一个html网页中不能出现相同的id属性值,否则就会覆盖
    					样式可以一样,但是获取值会优选选中第一个
    			
    			
    			
    			类选择器      在标签上必须设置class属性 通过style标签(行内式样式设置)+.可以设置
    				class选择器的值可以重复
    			元素选择器
    				标签本身,可以通过元素选择器为标签上所有相同的标签设置一样的样式。
    				
    				
    				css属性样式设置的语法
    					属性名:属性值;
    					
    				结合选择器设置css属性设置的完整语法
    					选择器{
    						属性名:属性值;
    					}
    		 
    		 
    		 -->
    		 
    		 <ol>
    		 	<li id="a1">123</li>
    		 	<li></li>
    		 	<li></li>
    		 	<li class="s1"></li>
    		 	<li></li>
    			<ul>
    				<li>item1</li>
    				<li>item2</li>
    				<li>item3</li>
    				<li>item4</li>
    				<li>item5</li>
    			</ul>
    		 	<li class="s1"></li>
    		 	<li></li>
    		 	<li></li>
    		 	<li></li>
    		 	<li id="a1">456</li>
    		 </ol> 
    		 
    	</body>
    </html>
    

            选择器的作用:能够更快的设置样式。

    展开全文
  • 1.CSS规定拥有更高确定度的选择器优先级更高 2.如果样式中包含冲突的规则,且它们具有相同的确定度。那么,后出现的规则优先级高。 优先级:由高到低(从上到下) !important 内联(1,0,0,0) id: (0,1,0,0) 类:(0,0,1,...
  • CSS选择器之相邻兄弟选择器

    千次阅读 2021-08-04 05:39:05
    选择器css里面非常重要的一部分知识,根据不同的样式定义,CSS提供了不同类型的选择器,大家可以根据自己的实际情况选择合适的选择器来编写代码,前面的课程我们对类选择器,子元素选择器等作了介绍,下面让我们一...
  • css选择器有哪些

    千次阅读 2021-08-05 04:11:47
    在css中,css的选择器有很多种,其中...css选择器有几种?怎么使用css选择器?要想实现对html实现一对一的控制,就要去使用css选择器,那么css选择器有哪些?下面我们来总结一下css选择器。如果我们合适使用css选择...
  • CSS选择器详解

    万次阅读 多人点赞 2020-08-29 19:06:55
    CSS选择器用于选择你想要的元素的样式的模式。下面是css所有的选择器 选择器 示例 示例说明 css版本 .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * ...
  • CSS选择器之nth

    千次阅读 2021-08-05 02:56:47
    语法:E:nth-child(n){}说明:nth-child() 是CSS3的一个伪类选择器,匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。效果实例:一、数字序号写法 E:nth-child(5){} //数值123456789E表示标签,div, li...
  • CSS选择器的类型,css,种类

    千次阅读 2021-08-04 04:11:41
    1、标签选择器以标签名开头,选择所有div元素2、类选择器给标签取class名,以点(.)加class名开头,选择所有该class名的元素3、id选择器给标签取id名,以#加id名开头,具有唯一性,选择”id = ‘wrap’”的元素4、子...
  • CSS选择器练习之餐厅练习

    千次阅读 2022-02-02 15:56:20
    源代码链接: ...W3C关于CSS选择器的说明:CSS 伪类 关卡操作说明: 1.直接选择所有的plate元素 plate 2.直接选择所有的bento元素 bento 3.利用id选择器 选择id为fancy的plate元素 /* id选择器
  • css选择器重点内容

    万次阅读 2021-02-25 10:07:26
    css选择器:筛选具有相似特征的元素 1. 基本选择器 (*必掌握) id选择器:选择具体的id属性值的元素。id值唯一     ->语法:#id属性值{} class类选择器:选择具有相同class属性值的元素...
  • python css选择器用法

    万次阅读 2019-07-11 11:52:10
    想优化一下刚刚写的爬虫,改一下...大概就是这么多了,这篇文章主要是写了css选择器的使用。 有时候css , xpath选择器组合使用,可以简单的获取到数据。有时间的话我会再写一篇xpath选择器的用法
  • CSS选择器的用法(详解)

    千次阅读 多人点赞 2020-08-07 13:50:16
    那选中的方法自然是多种多样,所以CSS选择器也是分为很多种,这里就来一一介绍。 一、CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。 如果设置 HTML 的样式,选择器...
  • css选择器—四大基本选择器

    千次阅读 2022-02-21 15:53:43
    一、四大基本选择器 1、统配选择器(*):匹配页面中的所有元素。 *{ } 例:页面中所有的元素都变成红色,背景是绿色 *{ color:red; background-color: darkseagreen; } 如图: ...
  • css 选择器 1. css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式。 2. css 选择器的种类 标签选择器选择器 层级选择器(后代选择器) id选择器选择器 伪类选择器 3. 标签选择器 ...
  • scrapy框架(3):CSS选择器解析数据

    千次阅读 多人点赞 2021-05-21 10:12:53
    css选择器 标签<> <标签的属性> <>标签的内容</> 进入黑窗口的操作 1、进入虚拟环境 scrapy -h
  • CSS选择器优先级顺序是什么

    千次阅读 2021-08-13 14:46:26
    css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。 在看css选择器优先级顺序...
  • 【CSS】CSS选择器及其权重

    千次阅读 2020-08-26 04:37:50
    CSS选择器及其权重基本选择器属性选择器并列选择器选择器组合伪类选择器普通伪类选择器结构性伪类选择器伪元素选择器选择器的权重 基本选择器 id 选择器 - - - #id { } 类名选择器 - - - .class { } 标签选择器 - -...
  • CSS 选择器 选择前几个元素

    千次阅读 2021-05-31 14:38:00
    CSS 选择器 选择前几个元素 选择第n个,n代表数字 :nth-child(n){ } 选择列表中的偶数的标签 :nth-child(2n){ } 选择列表中的奇数标签 :nth-child(2n-1){ } 【负方向范围】选择第1个到第6个 :nth-child(-n+6...
  • CSS 基础教程:CSS 选择器

    千次阅读 2021-07-11 21:28:34
    CSS 选择器 CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。 我们可以将 CSS 选择器分为五类: 简单选择器(根据名称、id、类来选取元素) 组合器选择器(根据它们之间的特定关系来选取元素) 伪类选择...
  • CSS -- CSS选择器

    千次阅读 多人点赞 2021-02-27 23:08:11
    基本选择器(重要) 优先级:ID选择器 > 类选择器 > 标签(元素)选择器。 标签(元素)选择器:选择某一个或者某一类元素。 ID选择器 :id不能重复,全局唯一。 类选择器:可以跨标签,类相同,可以复用。 示例: ...
  • CSS3提供了:第一个类型的伪类,用于选择与其兄弟姐妹相关的其...坏消息是〜是一个CSS3选择器。好消息是,IE从IE7开始识别,就像CSS2的>所以如果你担心浏览器的兼容性,那么唯一的“主要浏览器”就是IE6。所以你...
  • css的选择器有很多种,那么,自然而然的就会有优先级这一概念出现,所以,css选择器优先级顺序是怎样的呢?本篇文章将来给大家介绍css选择器优先级的排序,话不多说,我们来直接看正文内容。 在看css选择器优先级...
  • 三种常用CSS选择器

    千次阅读 2021-06-02 20:39:10
    CSS样式表的样式规则是由三个部分构成:Selector(选择器),Property(属性)和Value(属性的取值)。 基本的格式如下:Selector {property:value; property:value;…; property:value}
  • css选择器获得2个元素(css selector get 2 elements)我需要选择两个元素,跳过接下来的两个元素,选择两个元素等。例如,假设我有10个元素:element1element2element3element4element5element6element7element8...
  • 本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 一:什么是css选择器? CSS是一种用于屏幕上渲染html,xml等一种语言,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 474,488
精华内容 189,795
关键字:

css选择器