Есть ли способ переименовать n-й элемент в списке с помощью CSS? [Дубликат]

Question

Есть ли способ переименовать n-й элемент в списке с помощью CSS? [Дубликат]

Пожалуйста, проверьте, как только выбранная база данных не была вызвана, потому что некоторая база данных не выбрана

Проверьте

mysql_select_db('database name ')or DIE('Database name is not available!');

перед запросом MySQL, а затем перейдите к следующему шагу

$result = mysql_query('SELECT * FROM Users WHERE UserName LIKE $username');

f($result === FALSE) {
    die(mysql_error());

215

css

задан RyanS 25 November 2015 в 02:17

17 ответов

Другие вопросы по тегам:

css

Похожие вопросы:

score 1 · Answer 1

У меня возникла проблема, когда мне пришлось заменить текст ссылки, но не мог использовать javascript, и я не мог напрямую изменить текст гиперссылки, поскольку она была скомпилирована из XML. Кроме того, я не мог использовать псевдоэлементы, или они, похоже, не работали, когда я их пробовал.

В принципе, я помещал текст, который я хотел в промежуток, и помещал привязывающий тег под ним завернутый в div. Я в основном переместил якорный тег через css, а затем сделал шрифт прозрачным. Теперь, когда вы нависаете над промежутком, он «действует» как ссылка. Это очень хакерский способ сделать это, но так вы можете иметь ссылку с другим текстом ...

Это сценарий того, как я обошел эту проблему

Мой HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

Мой CSS

 div.field a {
     color:transparent;
     position:absolute;
     top:1%;
 }
 div.field span {
     display:inline-block;
 }

CSS необходимо будет изменить в соответствии с вашими требованиями, но это общий способ делать то, что вы спрашивают.

Изменить: может ли кто-нибудь сказать мне, почему это было приостановлено? Мое решение работает ...

score 12 · Answer 2

Попробуйте использовать: before и: after. Один вставляет текст после визуализации HTML, другие вставки перед визуализацией HTML. Если вы хотите заменить текст, оставьте содержимое кнопки пустым.

В этом примере задается текст кнопки в соответствии с размером ширины экрана.

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

Текст кнопки:

1) с: перед

большой экранxxx

большой экран

2) с: после

xxxbig screen

большой экран

score 45 · Answer 3

На основании ответа mikemaccana это сработало для меня

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

& sect; Абсолютное позиционирование

элемент, который позиционируется абсолютно, вынимается из потока и, следовательно, не занимает места при размещении других элементов.

score 1 · Answer 4

В отличие от того, что я вижу в каждом другом ответе, вам не нужно , чтобы использовать псевдоэлементы, чтобы заменить содержимое баллиза изображением

. Факты

div.pvw-title { /* no :after or :before required*/
content: url("your url here");
}

1

ответ дан Estecka 4 September 2018 в 08:48

1

– mrec 7 August 2017 в 11:22

score 13 · Answer 5

Вы не можете, ну, можете.

.pvw-title:after {
  content: "Test";
}

Это вставляет содержимое после текущего содержимого элемента. Это фактически не заменяет его, но вы можете выбрать пустой div и использовать CSS для добавления всего содержимого.

Но пока вы более или менее можете, вы не должны. Фактический контент должен быть помещен в документ. Свойство содержимого в основном предназначено для небольшой разметки, например, кавычек вокруг текста, который должен отображаться.

13

ответ дан GolezTrol 4 September 2018 в 08:48

1

– MokiTa 25 October 2011 в 23:11
2

– Sir 3 August 2013 в 00:29
3

– GolezTrol 3 August 2013 в 17:34
4

– GolezTrol 23 November 2014 в 00:17

score 25 · Answer 6

Простой, короткий, эффективный. Никакого дополнительного html не нужно.

.pvw-title { color: transparent; }

.pvw-title:after { 
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

Мне пришлось сделать это для замены текста ссылки, кроме дома, для палочек woocommerce

SASS / LESS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after { 
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

CSS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after { 
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}

score 118 · Answer 7

Если вы хотите использовать псевдоэлементы и позволить им вставлять содержимое, вы можете сделать следующее. Он не предполагает знания исходного элемента и не требует дополнительной разметки.

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

Пример JSFiddle

118

ответ дан James van Dyke 4 September 2018 в 08:48

1

– Chris Kerekes 8 April 2014 в 14:23
2

– dontGoPlastic 9 June 2014 в 22:38
3

– Benjamin 27 November 2014 в 16:10
4

– Chris Janssen 9 July 2015 в 20:34
5

– Robert Koritnik 17 September 2015 в 11:27

score 6 · Answer 8

Мне посчастливилось установить font-size: 0 внешнего элемента, а font-size селектора :after - все, что мне нужно.

score 205 · Answer 9

Или, может быть, вы можете обернуть «Факты» вокруг <span> следующим образом:

<div class="pvw-title"><span>Facts</span></div>

Затем используйте:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

205

ответ дан Matthew Cachia 4 September 2018 в 08:48

1

– mikemaccana 10 January 2013 в 17:58
2

– locrizak 6 February 2014 в 22:49
3

– xryl669 18 August 2014 в 07:16
4

– Facundo Colombier 23 February 2015 в 15:20
5

– dewtea 5 June 2015 в 17:19

score 169 · Answer 10

Обязательно: это взломать: CSS не подходит для этого, но в некоторых ситуациях - например, у вас есть сторонняя библиотека в iframe, которую можно настроить только с помощью CSS - такой взлом единственный вариант.

Вы можете заменить текст через CSS. Давайте заменим зеленую кнопку «hello» красной кнопкой, которая говорит «до свидания», используя CSS. Смотрите http://jsfiddle.net/ZBj2m/274/ для живой демонстрации:

Вот наша зеленая кнопка:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

Теперь давайте спрячемся исходный элемент, но потом добавьте еще один элемент блока:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

Примечание:

Мы явно должны отметить это как элемент блока, после того, как элементы «span» по умолчанию
Нам нужно компенсировать исходный элемент, отрегулировав положение псевдоэлемента.
Мы должны скрыть исходный элемент и отобразить псевдоэлемент с помощью visibility. Примечание display: none на исходном элементе не работает.

score 1 · Answer 11

Это невозможно сделать без трюков. Вот как это работает, заменив текст изображением текста.

.pvw-title{
    text-indent:-9999px;
    background-image:url(text_image.png)
}

Этот тип вещей обычно выполняется с помощью Javascript. Вот как это можно сделать с помощью jQuery:

$('.pvw-title').text('new text');

1

ответ дан Nathan Manousos 4 September 2018 в 08:48

1

– MokiTa 25 October 2011 в 23:16
2

– MokiTa 25 October 2011 в 23:20
3

– Nathan Manousos 25 October 2011 в 23:22
4

– MokiTa 25 October 2011 в 23:25

score 9 · Answer 12

Это работало для меня со встроенным текстом. Протестировано в FF, Safari, Chrome и Opera

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>


span {
visibility: hidden;
word-spacing:-999px;
letter-spacing: -999px; 
}

span:after {
content: "goodbye";
visibility: visible;
word-spacing:normal;
letter-spacing:normal; 
}

score 8 · Answer 13

Я использую этот трюк:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

Я даже использовал это для обработки интернационализации страниц, просто изменив базовый класс ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

score 7 · Answer 14

Это может не совсем ответить на вопрос, но он удовлетворил мои потребности и, возможно, и другие.

Итак, если вы просто хотите показать разные тексты или изображения, сохраните тег пустым и напишите свой контент в нескольких атрибутах данных, таких как <span data-text1="Hello" data-text2="Bye"></span>. Отобразите их с одним из псевдо классов :before {content: attr(data-text1)}

Теперь у вас есть несколько способов переключения между ними. Я использовал их в сочетании со мультимедийными запросами для гибкого подхода к дизайну, чтобы изменить имена моей навигации на значки.

демонстрация jsfiddle и примеры

score 0 · Answer 15

0

ответ дан Stephen Rauch 4 September 2018 в 08:48

score 2 · Answer 16

2

ответ дан Steve Douglas 4 September 2018 в 08:48

score 2 · Answer 17

Используя псевдоэлемент, этот метод не требует знания исходного элемента и не требует дополнительной разметки.

#someElement{
    color: transparent; /*you may need to change this color*/
    position: relative;
}
#someElement:after { /*or use :before if that tickles your fancy*/
    content:"New text";
    color:initial;
    position:absolute;
    top:0;
    left:0;
}