美文网首页
元素选择器

元素选择器

作者: 李仁平 | 来源:发表于2016-08-12 15:16 被阅读15次

子元素选择器
+兄弟选择器
通用兄弟节点选择器pb
[ ]通用选择器
[id]附带id属性的
div[ id]div中具有[ id]通用他们之间没有空格
[id][class]附带id class 属性的
/div中值为class="we"这个才会按照这个样式显示/
div[class="we"]{background: red;
color:red;
}
/div中以c开头的才按这个样式显示/
div[class^="c"]{
background: green;
}
/div中以m结尾的才按这个样式显示/
div[class$="m"]{
background: blue;
}
/div中具有w的按这个样式显示/

div[class="w"]{
background: #ccc;
}
class^=“c" class$=“m”(以c开头以m结尾class换成id也成)
/
class里只有有其中一个属性值就行*/
div[class~="bbba"]
{
background: red;
}
<div class="bbba xxxs cccz"></div>

:target目标

伪类;
<input enabled>可用
<input disabled>不可用
input:enabled{
background-color: blue;
}
input:disabled{
background-color: red;
}
input:checked{
background-color: green;

}选中变化

p:first-child{
color: red;
}第一个元素变
last最后一个元素变
empty空元素变
only只有一个

input:not([type=“text]){
}不是type=“text按这个显示

first-letter首字
::selection选中的变

:before在什么前面
:after在上面后面
{content:能容}
counter
/重置计数器/
body{
counter-reset: charpter;
}
/通过counter()实现计数/
h1:before{
content: "第"counter(charpter)"章"
}
/指定增长幅度/
h1{counter-increment: charpter;

}
-webkit-
-zom-
p{width: 300px;
/分成三列/
column-count:3;
/列间的间隔/
column-gap:20px;
/列间虚线/
column-rule:2px dashed red;

}

相关文章

  • jquery学习笔记(一)

    选择器 元素选择器 jQuery元素选择器基于元素名选取元素。选取页面中所有 元素: #id选择器 jQuery ...

  • 餐厅练习题

    plate 元素选择器 bento 元素选择器 #fancy ID选择器 plate apple 后代元素选择器 ...

  • CSS选择器

    选择器类型 元素选择器 类选择器 ID 选择器 属性选择器 伪类 伪元素 选择器组 后代选择器 子元素选择器 相邻...

  • CSS选择器

    CSS选择器规定了CSS规则会作用到哪些元素上。 基本选择器 元素选择器:根据元素名称匹配元素 类选择器:根据元素...

  • CSS选择器详解

    元素选择器 类选择器 ID选择器 属性选择器 派生选择器 1. 元素选择器 最常见css选择器当属元素选择器,在H...

  • css选择器详解

    元素选择器 类选择器 ID选择器 属性选择器 派生选择器 元素选择器 最常见的css选择器当属元素选择器了,在HT...

  • CSS学习笔记(一):选择器

    选择器 1.元素选择器 元素选择器:文档(HTML、XML)的元素就是最基本的选择器,html所有元素如html ...

  • 选择器、CSS(层叠样式表)语法、块和内联

    选择器 元素选择器 作用:通过元素选择器可以选择页面中的所有指定元素 语法:标签名{} id选择器 作用:通过元素...

  • CSS3选择器

    一、基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father...

  • css选择器

    元素选择器 id选择器 类选择器 后代选择器 元素选择器 文档中的元素是最基本的选择器其选择器通常是某个 HTML...

网友评论

      本文标题:元素选择器

      本文链接:https://www.haomeiwen.com/subject/tcqesttx.html