css选择器——属性选择器和基于元素结构关系的选择器

cc成      2022-02-11     156

关键词:

在有些标记语言中,不能使用类名和id选择器,于是css2引入了属性选择器。

3.属性选择器

  a)根据是否存在该属性来选择

    如果希望选择有某个属性的元素,例如要选择有class属性的所有h1元素,使其文本为银色,可以这样写:

/*根据单个属性来选择*/
h1[class]{ color:sliver; }
/*还可以根据多个属性来选择*/
h1[class][id]{
  color:yellow;
}

  b)根据具体属性值来选择 

  <style>

    /*也可以利用多个属性值来选择,第二段变成了红色*/

    p[class=‘one‘][alt=‘two‘]{
      color:red;
    }
  </style>
  <body>
    <p class=‘one‘>一个class属性</p>
    <p class=‘one‘ alt=‘two‘>一个class属性加上一个alt属性</p>
  </body>

  c)根据部分属性值来选择

  ~=:如果属性能够接受词列表,可以根据其中的任意一个词进行选择。

  *=word1:选择属性值中包含word1的所有元素

  ^=start:选择属性值中以start开头的所有元素

  $=end:选择属性值中以end结尾的所有元素

<style>
    p[class~=‘bar‘]{
        color:red;
    }
    p[class*=‘wo‘]{
        color:blue;
    }
    p[class^=‘th‘]{
        color:yellow;
    }
    p[class$=‘ur‘]{
        color:purple;
    }
</style>
<body>
        <p class=‘one bar‘>one</p><!--红色-->
        <p class=‘one bard‘>与上一段作为对比</p><!--默认颜色-->
        <p class=‘two ok‘>two</p><!--蓝色-->
        <p class=‘three‘>three</p><!--黄色-->
        <p class=‘four‘>four</p><!--紫色-->
</body>

  d)特定属性选择器

    直接看例子:

/*选择src属性等于figure或者以figure-开头的元素*/
img[src|=‘figure‘]{
    border:1px;
}

4.基于文档结构的选择器

  a)后代选择器——使用空格分隔:

    选择h1中的所有em元素:

h1 em{
    color:gray;
}
/*当然并不限于两个选择器,例如:*/
/*将p标签下的所有span标签下的所有em元素的文本颜色设置为灰色*/
p span em{
  color:em
}

  b)子元素选择器——使用>号分隔

   选择h1的子元素而不是后代元素

<style>
    h1 > em{
        color:red;
    }
</style>
<body>
        <h1>sjfsl<span><em>不会被选择到</em></span><em>会被选择到</em></h1>
</body>

  c)相邻兄弟(不能是堂兄弟,即拥有相同的父元素)选择器——使用+号分隔 

<style>
    p + h1{
        color:red;
    }
</style>
<body>
    <p>第一段</p>
    <h1>第二段</h1><!--颜色变红-->
    <h1>第三段</h1><!--颜色不变-->

</body>

 




















css3选择器归类整理---基本选择器和属性选择器

css3选择器分类CSS3选择器分类如下图所示 选择器的语法1.基本选择器类型代码功能描述通配选择器*{margin:0;padding:0;border:none;}选择文档中所有HTML元素元素选择器body{background:#eee;}选择指定类型的HTML元素类选择器.list{list-style:squar... 查看详情

css3选择器(详细!全!)(代码片段)

文章目录一、属性选择器1、E[att^=value]属性选择器2、E[att$=value]属性选择器3、E[att*=value]属性选择器二、关系选择器1、子代选择器(>)2、兄弟选择器(+、~)临近兄弟选择器(+)普通兄弟... 查看详情

css选择器

一、什么是CSS选择器CSS语法由选择器和声明组成,选择器定义需要改变样式的HTML元素,声明定义要设置的样式,声明由一个属性和一个值组成选择器有多种分类:派生选择器、id选择器、类选择器、属性选择器等等 派生选择... 查看详情

2、css选择器

...样式。根据标签为元素设置样式同时设置多个元素组合类选择器是为一类状态声明样式规则,下面是把文本居中定义为类样式。将类选择器指定为具体标签。这样样式的权重就提高了注意span.help-block不能写成span.help-block。标签选... 查看详情

css选择器伪类选择器和伪元素选择器

选择器的权重伪类:hover当鼠标悬浮在元素上方时,向元素添加样式 :active向被激活的元素添加样式 :first-child向元素的第一个子元素添加样式 :focus向拥有键盘输入焦点的元素添加样式 :link 向未被访问的链接添加样式 :visited 向已被... 查看详情

css类选择器和id选择器

ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的。ID也可以用来标识持久的结构性元素,例如主导航或内容区域。ID还可以用来标识一次性元素,例如某个链接或表单元素。一个ID只能应用于页面上的一个元素... 查看详情

css选择器(属性选择器,关系选择器,伪类选择器,伪元素选择器)(代码片段)

目录属性选择器类别应用 关系选择器子元素选择器临近兄弟选择器普通兄弟选择器伪类选择器伪元素选择器:before选择器:after伪元素选择器属性选择器属性选择器可以根据元素的属性及属性值来选择元素。(常用在input中ÿ... 查看详情

css布局基础(五)--选择器

参考技术A一、简单的选择器1)标签选择器与网页元素同名,用的最多,也简单,即直接作用于与该选择器名字相同的标签2)类选择器能够为网页对象定义不同的样式类,实现不同元素拥有相同的样式,相同元素的不同对象拥有... 查看详情

css:first-child选择器和htmldomfirstchild属性

CSS选择器参考手册实例选择属于其父元素的首个子元素的每个<p>元素,并为其设置样式:p:first-child{background-color:yellow;}亲自试一试浏览器支持IEFirefoxChromeSafariOpera     所有主流浏览器都支持:first-child选择器... 查看详情

选择器和层叠

选择器和层叠 常见CSS属性: 属性color,示例color:red,描述设置元素内容的颜色属性text-align,示例text-align:center,描述设置元素内容的对齐text-align,方式text-align:center,描述设置元素内容的对齐方式属性font-size,示例font-si... 查看详情

web前端入门到实战:常见css3选择器和文本字体样式汇总(代码片段)

常见的CSS3选择器包含:常用基本、属性、伪类、层级(组合)选择器,具体使用情况建议先阅读[css选择器四大类:基本、组合、属性、伪类]对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且给它添加... 查看详情

css选择器——属性选择器

...ID属性可以将不同DIV元素进行区分。CSS2中引入了一些属性选择器,这些选择器可基于元素的属性匹配元素,而CSS3在CSS2的基础上扩展了这些属性选择器,支持基于模式匹配定位元素。属性选择器E[attr]选择匹配具有属性attr的E元素... 查看详情

css常用选择器和定位

选择器结构伪类选择器/*选中ul的第一个子元素*/ulli:first-child/*ul的最后一子元素*/ulli:last-child/*选择p:定位到父元素然后选择子元素中第一个,但如果类型不符合则不改*/p:nth-child(2)/*选择p:定位到父元 查看详情

在css中比较后代选择器和相邻选择器有啥区别设计一个示例

在css中比较后代选择器和相邻选择器有什么区别设计一个示例在css中比较后代选择器和相邻选择器有什么区别设计一个示例比较如下1、css后代选择器语法:h1emcolor:red;表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先... 查看详情

jquery选择器和选取方法

 一、jQuery选择器在CSS3选择器标淮草案定义的选择器语法中,jQuery支持相当完整的一套子集,同时还添加了一些非标准但很有用的伪类。注意:本节讲述的是jQuery选择器。其中有不少选择器(但不是全部)可以在CSS样式表中使用。... 查看详情

css

css选择器选择器有分很多种:标签选择器是比较常用范围用的多的如div,span。类选择器通过类名可选择多个元素。灵活的对应class属性。p.one选中p元素并且p元素下的class属性的值等于oneclass属性下的p元素等于one的p元素的值。。。... 查看详情

css3选择器和伪类

元素选择子:* 任何元素E 与E标签结合的任何元素EF E的所有派生标签中,有F标签的元素E>F 或者 E/F E的所有直接的拥有F标签的子类E+F 所有具有F标签的元素,紧靠的前一个元素有E标签E~F 所有具有F... 查看详情

css选择器

CSS选择器分为基本选择器、组合选择器、属性选择器。基本选择器是.class、#id、*、element选择器,经常用,不赘述。主要介绍下组合选择器和属性选择器,在项目中也经常用到:??一、组合选择器1、element,element组选择器用于选取... 查看详情