css选择器

最新推荐文章于 2022-06-27 00:34:58 发布

cathy18c

最新推荐文章于 2022-06-27 00:34:58 发布

阅读量193

点赞数

分类专栏： HTML CSS JS

本文链接：https://blog.csdn.net/cathy18c/article/details/100520704

版权

HTML CSS JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

元素选择器：p{ color:red } 所有p元素字都是红色

ID选择器：#first 选择 id="firstname" 的所有元素

类选择器：.info 选择class="info"的所有元素

选择器分组

/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}

/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}

后代选择器 也可以说是包含选择器后代选择器不是说一定要是相邻的，只要是里面它里面包含的就行

例如 h1 p a{color:red} h1中的p元素中的a标签应用这个样式

子元素选择器

例如 h1>strong{ color:blue} h1里面有几个strong标签，但只有离它最近的一个strong标签应用这个样式，是蓝色

相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

例如：h1+p{ margin-top:50px } 选择紧跟在h1之后的所有p元素

通配符选择器 *

*{color:red} 页面中所有元素都是红色

属性选择器

简单的属性选择：

*[title] {color:red} 只要有title这个属性的元素都是红色

a[title] {color:red} a标签中有title属性的是红色

a[title] [href] {color:red} a标签中同时设置了title和href的是红色

img[alt] {border:1px solid blue} img中有alt属性的应用这个样式

通过具体属性值选择：

a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} a标签中链接是这个的，颜色是红色

a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} a标签中href和title都是和这个一样，应用样式，红色

上面这些就是属性和值必须完全匹配一致

根据部分属性值选择

p[class~="important"] {color:red} p中class带有important的应用这个样式红色例如skkk就可以应用如果去掉~就不应用

子串匹配属性选择器

a[title^="def"] {color:red} a标签中title属性值以def开头的，应用此样式为红色

a[title$="def"] {color:red} a标签中title属性值以def结尾的，应用此样式为红色

a[title*="def"] {color:red} a标签中title属性值包含def的，应用此样式为红色和~区别都是包含但是有区别，*表示只要属性里面有指定的值就可以应用样式，但是~需要指定的值和其他的要用空格隔开才能应用

[lang|="en"] {color: red;} 会选择lang以en或en-开头的元素

伪类选择器

1，超链接（LOVE HATE）

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

2，:focus

例如文本框有聚焦时，背景色变为黄色 input:focus{ background:yellow }

3，:lang 给带有lang属性的元素添加样式

<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>

<style>
q:lang{ font-weight:bold }
</style>

4.结构性伪类选择器

:root 根选择器
:root{ background:orange} 相当于 html{ background:orange }背景橙色

:not 否定选择器 除某个元素之外的所有元素
除submit按钮之外的所有input表单设置border为红色 input:not([type="submit"]){ border:1px solid red; }

:empty 空选择器 选择没有内容的元素(连一个空格都没有的那种)
p段落为空时隐藏
p{ background:orange}
p:empty{ display:none }
1111 背景橙色
 背景橙色
 隐藏

:enabled 可用 :disabled 不可用状态 通常用于表单
例如 input[type="text"]:enabled{ background:green} 文本框可用状态，背景绿色
input[type="submit"]:disabled{ background:#999 } 提交按钮禁用状态，背景灰色

:checked 用于给单选或复选按钮设置选中样式

:target 选择当前活动的目标元素

:target  选取当前活动的目标元素
html代码：
<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>
css代码：
.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  display:block;
}
点击Brand，div显示
1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand
2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。

多个url（多个target）处理:
只要#号后对的名称与id=""中的名称对应就可以了。

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</div>

#brand:target {
  background: orange;
  color: #fff;
}
#jake:target {
  background: blue;
  color: #fff;
}
#aron:target {
  background: red;
  color: #fff;
}

:first-child 首个子对象 :last-child 最后一个子元素

例如：匹配第一个p元素 p:first-child{ font-weight:bold} 匹配所有p元素的第一个i元素 p>i:first-child{ font-weight:bold} 匹配所有作为第一个子元素的p元素的所有i元素 p:first-child i

:nth-child(n) 用来定义一个父元素的一个或多个特定子元素
n可以是数值，也可以是2n+1，-n+5表达式，也可以是odd，even关键词 n的起始值始终是1不是0
odd 和 even 是可用于匹配下标是奇数(odd)或偶数(even)的子元素的关键词（第一个子元素的下标是 1）。

//例如偶数行为黄色
<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>
css部分
ol>li:nth-child(2n){
    background:yellow
}

如果是奇数行是黄色，只用改下表达式 ol>li:nth-child(2n+1)

:nth-last-child(n) 使用方法和nth-child类似，只是从某父元素的最后一个子元素开始算
ol>li:nth-last-child(5){
background: orange;
}
列表倒数第五个背景设置为橙色

:first-of-type 类似于first-child 不同之处在于它制定了元素类型，主要用于定位一个父元素下某个类型的第一个子元素

示例演示：

通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。

html：
<div class="wrapper">
  <div>我是一个块元素，我是.wrapper的第一个子元素</div>
  <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p>
  <p>我是一个段落元素</p>
  <div>我是一个块元素</div>
</div>

css：
.wrapper {
  width: 500px;
  margin: 20px auto;
  padding: 10px;
  border: 1px solid #ccc;
  color: #fff;
}
.wrapper > div {
  background: green;
}
.wrapper > p {
  background: blue;
}
/*我要改变第一个段落的背景为橙色*/
.wrapper > p:first-of-type {
  background: orange;
}

:last-of-type 和 :first-of-type类似它选择的是父元素下某个类型的最后一个子元素
上面一个例子，例如将容器“div.wrapper”中最后一个段落元素背景设置为红色 .wrapper>p:last-of-type{ background:red}

:nth-of-type(n)选择器和:nth-child(n)选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用:nth-of-type(n)选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在:nth-of-type(n)选择器中的“n”和:nth-child(n)选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

//将容器“div.wrapper”中偶数段数(p)的背景设置为橙色。

html:
<div class="wrapper">
  <div>我是一个Div元素</div>
  <p>我是一个段落元素</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
</div>

css:
.wrapper>p:nth-of-type(2n){ background:orange}

:nth-last-of-type(n) 选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始
例如上面一个例子，倒数第三个段落背景红色 .wrapper>p:nth-last-of-type(3){ background:red}

:only-child 父元素中只有一个子元素，而且只有唯一的一个子元素

<div class="post">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
</div>
<div class="post">
  <p>我是一个段落</p>
</div>

p{ background:green}
p:only-child{ background:orange}

:only-of-type是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的

//通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色
html:
<div class="wrapper">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
</div>
<div class="wrapper">
  <div>我是一个Div</div>
  <ul>
    <li>我是一个列表项</li>
  </ul>
  <p>我是一个段落</p>
</div>
css
.wrapper>div:only-of-type{ background:orange }

伪元素选择器

:first-letter 第一个字母 :first-line 首行 :befor 在元素的内容前面插入新内容 :after 在元素的内容后面插入新内容
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动

/*h1前面加入logo.jpg图片*/
h1:before{
content:url(logo.jpg)
}

/*清除浮动*/
.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

::selection 伪元素用来匹配突出显示的文本(用鼠标显示文本时的文本) 鼠标选中文本时默认时蓝底白字，如果需要一个不同的效果，就要用到::selection 不过在firefox浏览器中加-moz-前缀

::-moz-selection {
  background: red;
  color: green;
}
::selection {
  background: red;
  color: green;
}

::read-only 用来设置只读状态的样式表单元素中用了readonly="readonly"时，就可以用这个伪元素设置只读状态的样式 firefox中加前缀-moz-

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

::read-write 设置不是只读控件的文本框样式和::read-only相反

input[type="text"]:-moz-read-write{
  border-color: #f36;
}
input[type="text"]:read-write{
  border-color: #f36;
}

cathy18c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器

元素选择器：p{ color:red } 所有p元素字都是红色ID选择器：#first 选择 id="firstname" 的所有元素类选择器：.info 选择class="info"的所有元素选择器分组/* no grouping */h1 {color:blue;}h2 {color:blue;}h3 {color:blue;}h4 {color:blue;}...
复制链接

扫一扫