css知识点2

最新推荐文章于 2024-09-07 19:05:57 发布

mine01*

最新推荐文章于 2024-09-07 19:05:57 发布

阅读量198

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_64181490/article/details/128197807

版权

6.3复合选择器

6.3.1交集选择器：既是什么又是什么

格式：选择器选择器 {属性：属性值；}

注：选择器之间没有任何的连接符号。选择器可以是class，也可以是id，还可以是标签，但标签要放在前面。比如： p.one 表示选择类名既是.one 且是段落标签。

    <style type="text/css">
         /* 既是p标签选择器又是类名为red的类选择器 */
        p.red { 
            color: red;
        }
         /* 既是p标签选择器又是id名为pink的类选择器 */
        p#pink {
            color: pink;
        }
          /* 既是类名为red的类选择器又是id名为pink的类选择器 */
        .red#pink {
            color: blue;
        }
    </style>
</head>
<body>
    <p class="red">段落1</p>
    <p id="pink">段落2</p>
    <p class="red" id="pink">段落3</p>
</body>

6.3.2并集选择器：什么和什么

格式：选择器，选择器 {属性：属性值；}

注：并集选择器表示和的意思，只要使用逗号分隔，所有选择器都会执行后面的样式。

    <style type="text/css">
      .red,#pink,.red{
        color: red;
      }
    </style>
</head>
<body>
    <p class="red">段落1</p>
    <p id="pink">段落2</p>
    <p class="red" id="pink">段落3</p>
</body>

6.3.3 兄弟选择器：兄弟选择器是CSS3.0新增的一个选择器。A~B 或者 A+B

语法格式：选择器+选择器 {属性：属性值；}

选择器+选择器 {属性：属性值；}

‘+’选择器则表示某元素后相邻的兄弟元素，也就是紧挨着的，是单个的。

‘~’选择器则表示某元素后所有同级的指定元素，强调所有的。

    <style type="text/css">
        /* 类名为red的类选择器相邻的兄弟p标签为粉色 */
     .red+p {color: pink;}
        /* 类名为red的类选择器后面的所有兄弟div标签为红色*/
     .red~div{color: red;} 
    </style>
</head>
<body>
    <p class="red">段落1</p>
    <p id="pink">段落2</p>
    <p class="red" id="pink">段落3</p>
    <div>盒子</div>
    <div>盒子2</div>
</body>

6.3.4后代选择器：又称为包含选择器，用来选择元素或元素组的后代

语法格式：选择器空格选择器 {属性：属性值；}

    <style>
          /* 类名为one的选择器所有p标签被选中 */
        .one p{
            color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="one">
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </div>
</body>

6.3.5子元素选择器：子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“>”进行连接。

语法格式：父元素>子元素{属性：属性值；}

注：这里的子元素表示亲儿子，不包含孙子、重孙子之类

        /* 类名为one的选择器第一个p标签被选中 */
        .one>p{
            color: antiquewhite;
        }
    </style>
</head>
<body>
    <div class="one">
        <p>111</p>
        <span>222<p>333</p></span>
    </div>
</body>

6.3.6属性选择器：表示选取标签带有某些特殊属性的选择器

选择器	含义
[attr]	存在attr属性即可
[attr=val]	属性值完全等于val
*[attr=val]**	属性值里包含val字符并且在“任意”位置
[attr^=val]	属性值里包含val字符并且在“开始”位置
[attr$=val]	属性值里包含val字符并且在“结束”位置

    <style>
        div[class^="font"] {
            color: red;
        }

        /*表示class属性的值以font开头的标签才能使用该样式*/
    </style>
</head>

<body>
    <div class="font14">这是一个div</div>
    <div class="font24">这是一个div</div>
    <div class="textfont">这是一个div</div>
</body>

6.3.7伪类元素选择器

E::first-letter 块级文本的第一个单词或字

E::first-line 块级文本的第一行

E::selection 可改变选中文本的样式

E::before和E::after 在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。

::-webkit-input-placeholder表示选择到input中的placeholder，为其设置样式

注意：“.”一个点是类选择器， “：”一个冒号是伪类选择器， “::”两个冒号是伪元素选择器。

before与after表示在盒子内部的前端和后端插入内容。

7.css的三大特性

7.1优先级：优先级表示当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

7.1.1优先级判断

如果使用的是同类型的选择器，那么谁写在后面就听谁的。就近原则

如果使用的是不同类型的选择器，那么会按照选择器的优先级来层叠。

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

7.1.2优先级之!important：用于提升选择器中某个属性的优先级, 可以将被指定属性的优先级提升为最高。

!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升。

!important必须写在属性值得分号前面，与属性值之间加上一个空格。

!important前面的感叹号不能省略。

7.1.3优先级权重：当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高。

权重计算规则

（1）内联样式，如: style=””，权值为1，0，0，0。

（2）ID选择器，如：#content，权值为0，1，0，0。

（3）类，伪类和属性选择器，如.content E:link E[attr]，权值为0，0，1，0。

（4）元素选择器和伪元素选择器，如div p ::before，权值为0，0，0，1。

（5）通配符、子选择器、兄弟选择器等的。如*、>、+,权值为0，0，0，0。

（6）继承的样式没有权值。!important的权重最高

1,0,0,0 > 0,99,99,99 也就是说从左往右逐个等级比较，前一等级相等才往后比

复合选择器权重的计算就是一个简单的加法计算

注意：0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

7.2继承性

作用：子元素可以继承父元素的样式。

特殊性：

并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。

在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承。

a标签的颜色和下划线的设置不能继承，必须对a标签本身进行设置。

h标签的字体大小不能修改，必须对h标签本身进行修改。

7.3层叠性：是浏览器处理冲突的一个能力。如果一个css属性通过两个选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

8.标签显示模式：

8.1块级元素（block-level）：每个块元素通常都会独自占据一整行或多整行，可以对其设置高度、宽度、对齐等属性，常用于网页布局和网页结构的搭建。

8.1.1常见块元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form <li>等，其中<div>标签是最典型的块元素。div非常符合布局，所以通常叫CSS+div布局

8.1.2块级元素的特点：

总是从新行开始 --- 换行

宽度、高度、外边距以及内边距都可以控制

宽度默认是容器的100%

可以容纳---嵌套内联元素和其他块元素

8.2行内元素（inline-level）：行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

8.2.1常见的行内元素有：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。

8.2.2行内元素的特点：

和相邻行内元素在一行上。

宽、高无效，但水平方向的padding和margin可以设置，垂直方向padding有效但是margin不可以。

默认宽度就是它本身内容的宽度。

行内元素只能容纳文本或其他行内元素（a特殊）。

注意：只有文字才能组成段落，因此p标签中不能放块级元素，示例：p标签中放div，查看源代码（有bug）。链接里面不能在放链接。

        8.3行内块元素（inline-block）：在行内元素中有几个特殊的标签——<img />、<input />，可以对它们设置宽高和对齐属性，有些资料可能会把它们称为行内块元素。

                8.3.1行内块元素的特点：
                和相邻行内元素（行内块）在一行上，但是之间会有空白间隙。
                默认宽度就是它本身内容的宽度。
                宽高、内外边距都可以控制,但在上下边距的问题上仍然遵循行内元素的原则。

8.4块级元素和行内元素区别

8.4.1块级元素的特点：

总是从新行开始

宽高、内外边距都可以控制

宽度默认为容器的100%

可以容纳内联元素和其他块元素文字类的块级标签（p，h1~h6，dt）内部不能嵌套块级标签

8.4.2行内元素的特点：

和相邻行内元素在一行上

宽高无效，可以设置水平方向的内外边距，垂直方向不可设置。

默认宽度就是它本身内容的宽度

行内元素只能容纳文本和其他行内元素

8.5标签显示模式转换 display